NSButton 上的简单鼠标悬停效果

Question

我正在为自定义渲染创建一个自定义 NSButtonCell 。

现在，我想要有不同的方面，具体取决于鼠标是否位于按钮上。我怎样才能得到这些信息？

谢谢和问候，

Answer 1

这是我完美创建并为我工作的...

步骤 1：创建带有跟踪区域的按钮

 NSButton *myButton = [[NSButton alloc] initWithFrame:NSMakeRect(100, 7, 100, 50)];
[myButton setTitle:@"sample"];

[self.window.contentView addSubview:myButton];
// Insert code here to initialize your application
NSTrackingArea* trackingArea = [[NSTrackingArea alloc]
                                initWithRect:[myButton bounds]
                                options:NSTrackingMouseEnteredAndExited | NSTrackingActiveAlways
                                owner:self userInfo:nil];
[myButton addTrackingArea:trackingArea];

步骤：2 实现以下方法

- (void)mouseEntered:(NSEvent *)theEvent{
NSLog(@"entered");
[[myButton cell] setBackgroundColor:[NSColor blueColor]];


}

- (void)mouseExited:(NSEvent *)theEvent{
[[myButton cell] setBackgroundColor:[NSColor redColor]];
NSLog(@"exited");

}

Answer 2

Swift 3：

使用代码创建按钮或仅使用它的@IBOutlet。
然后定义鼠标悬停在按钮上的跟踪区域：

let area = NSTrackingArea.init(rect: yourButtonName.bounds,
                               options: [.mouseEnteredAndExited, .activeAlways], 
                               owner: self, 
                               userInfo: nil)
yourButtonName.addTrackingArea(area)

然后覆盖 mouseEntered 和 mouseExited，在这些函数中设置您想要更改的任何内容（按钮颜色、按钮图像、按钮文本等）：

override func mouseEntered(with event: NSEvent) {
    print("Entered: \(event)")
}

override func mouseExited(with event: NSEvent) {
    print("Exited: \(event)")
}

如果您有多个按钮（带有跟踪功能 ）为每个按钮添加了区域）并且您需要确定哪个按钮触发了 mouseEntered 事件，您可以为此目的添加一些 userInfo 信息，因此不要：

userInfo: nil

在每个按钮的 userInfo 中添加您的自定义按钮名称，例如：

userInfo: ["btnName": "yourButtonName"]

然后您可以编写switch-case 或 if mouseEntered 和 mouseExited 函数中的语句如下所示：

override func mouseEntered(with event: NSEvent) {
        // Identify which button triggered the mouseEntered event
        if let buttonName = event.trackingArea?.userInfo?.values.first as? String {
            switch (buttonName) {
            case "yourButtonName":
                //do whatever you want for this button..
            case "anotherButtonName":
                //do whatever you want for this button..
            default:
                print("The given button name: \"\(buttonName)\" is unknown!")
            }
        }
    }

Answer 3

您需要子类化 NSButton 类（或者更好的是 NSButtonCell 类）。
正如贾斯汀所说，如果你放置这两个方法，

- (void)mouseEntered:(NSEvent *)theEvent;
- (void)mouseExited:(NSEvent *)theEvent;

当鼠标进入和退出该区域时，它们应该被调用。您可能还需要重新创建跟踪区域，请查看此处：

- (void)updateTrackingAreas

对于淡入和淡出效果，我使用了动画师和 alpha 值，例如：

[self animator]setAlphaValue:0.5]; 

Answer 4

带回调的 Swift 5 版本，超级好用：

final class HoverButton: NSButton {

    private let callback: (HoverButton, Bool) -> Void

    init(callback: @escaping (HoverButton, Bool) -> Void) {
        self.callback = callback
        super.init(frame: .zero)
        let area = NSTrackingArea(rect: .zero, options: [.mouseEnteredAndExited, .activeAlways, .inVisibleRect], owner: self, userInfo: nil)
        addTrackingArea(area)
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func mouseEntered(with event: NSEvent) {
        super.mouseEntered(with: event)
        callback(self, true)
    }

    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        callback(self, false)
    }

}

用法：

let button = HoverButton { button, isHovered in
    button.animator().alphaValue = isHovered ? 1 : 0.5
}

Answer 5

一个很好的起点，在 NSResponder 中声明：

- (void)mouseEntered:(NSEvent *)theEvent;
- (void)mouseExited:(NSEvent *)theEvent;

具体来说，按钮单元格的容器（不是单元格本身）是 NSResponder。

Answer 6

对于那些喜欢子类化的人，您还可以创建自己的 NSButton 并在其中分配 NSTrackingArea 。

这是一种非常简单而优雅的方法，感谢 Joey Zhou ： https://github.com/Swift-Kit/JZHoverNSButton

它是用 Swift 2 编写的，但 XCode 会自动将其翻译为 Swift 3 - 4，无需任何操作问题。

希望它可以帮助别人

Answer 7

这是一个简单的代码，用于跟踪某些控件（图像、标签等）上的鼠标进入和鼠标退出事件：

@IBOutlet weak var myImage: NSImageView!
@IBOutlet weak var myLabel: NSTextField!

override func viewDidLoad() {
    super.viewDidLoad()

    let area1 = myTrakingArea(control: self.myImage)
    let area2 = myTrakingArea(control: self.myLabel)
    self.myImage.addTrackingArea(area1)
    self.myLabel.addTrackingArea(area2)
}

func myTrakingArea(control: NSControl) -> NSTrackingArea {
    return NSTrackingArea.init(rect: control.bounds,
    options: [.mouseEnteredAndExited, .activeAlways],
    owner: control,
    userInfo: nil)
}

override func mouseEntered(with event: NSEvent) {
    if let owner = event.trackingArea?.owner as? NSControl {
        let id : String = owner.identifier!.rawValue

        switch id {
        case self.myLabel.identifier!.rawValue:
                print("Entered Quit Label")
        case self.myImage.identifier!.rawValue:
                print("Entered Quit Image")
            default:
                print("Entered ???")
        }
    }
}

override func mouseExited(with event: NSEvent) {
    if let owner = event.trackingArea?.owner as? NSControl {
        let id : String = owner.identifier!.rawValue

        switch id {
        case self.myLabel.identifier!.rawValue:
                print("Exited Quit Label")
        case self.myImage.identifier!.rawValue:
                print("Exited Quit Image")
            default:
                print("Exited ???")
        }
    }
}