自定义NSButton实现hover、highlighted效果
NSButton并没有UIButton可以设置state的接口，虽然系统提供了很多button的样式，但是自定义程度不够高，比如hover或highlighted的效果。没关系，既然没有，那就自定义好了。
其实，自定义NSButton非常简单，基本思路就是要在响应不同的鼠标事件时让button呈现不同的状态（通过字体或背景颜色区分，也可以是边框颜色或宽度）。
先上效果：
ButtonEffect.gif
左边的button是通过各种颜色的变化来表示hover、highlighted和selected状态的，右边的button是通过图片切换来表示，原理相同。
为了响应不同鼠标事件，可以定义四种状态，分别对应正常、鼠标移入、鼠标按下、鼠标释放。
typedef NS_ENUM(NSUInteger, SWSTAnswerButtonState) {
SWSTAnswerButtonNormalState = 0,
SWSTAnswerButtonHoverState = 1,
SWSTAnswerButtonHighlightState = 2,
SWSTAnswerButtonSelectedState = 3
};
NSButton继承了NSResponder的键鼠方法，我们要实现这四种状态需要重写mouseEntered:、mouseExited:、mouseDown:以及mouseUp:四个方法。
- (void)mouseEntered:(NSEvent *)theEvent {
self.hover = YES;
if (!self.selected) {
self.buttonState = SWSTAnswerButtonHoverState;
}
}
- (void)mouseExited:(NSEvent *)theEvent {
self.hover = NO;
if (!self.selected) {
[self setButtonState:SWSTAnswerButtonNormalState];
}
}
- (void)mouseDown:(NSEvent *)event {
self.mouseUp = NO;
if (self.enabled && !self.selected) {
self.buttonState = SWSTAnswerButtonHighlightState;
}
}
- (void)mouseUp:(NSEvent *)event {
self.mouseUp = YES;
if (self.enabled) {
if (self.canSelected && self.hover) {
self.selected = !self.selected;
self.buttonState = self.selected ? SWSTAnswerButtonSelectedState : SWSTAnswerButtonNormalState;
} else {
if (!self.selected) {
self.buttonState = SWSTAnswerButtonNormalState;
}
}
}
}
通过mouseEntered:和mouseExited:来标记hover状态，而mouseDown:来标记highlighted状态，最后mouseUp:标记selected状态。
在buttonState改变的时候更新UI：
- (void)updateButtonApperaceWithState:(SWSTAnswerButtonState)state {
CGFloat cornerRadius = 0.f;
CGFloat borderWidth = 0.f;
NSColor *borderColor = nil;
NSColor *themeColor = nil;
NSColor *backgroundColor = nil;
switch (state) {
case SWSTAnswerButtonNormalState: {
cornerRadius = self.cornerNormalRadius;
borderWidth = self.borderNormalWidth;
borderColor = self.borderNormalColor;
themeColor = self.normalColor;
backgroundColor = self.backgroundNormalColor;
if (self.normalImage != nil) {
self.defaultImage = self.normalImage;
}
break;
}
case SWSTAnswerButtonHoverState: {
cornerRadius = self.cornerHoverRadius;
borderWidth = self.borderHoverWidth;
borderColor = self.borderHoverColor;
themeColor = self.hoverColor;
backgroundColor = self.backgroundHoverColor;
if (self.hoverImage != nil) {
self.defaultImage = self.hoverImage;
}
}
break;
case SWSTAnswerButtonHighlightState: {
cornerRadius = self.cornerHighlightRadius;
borderWidth = self.borderHighlightWidth;
borderColor = self.borderHighlightColor;
themeColor = self.highlightColor;
backgroundColor = self.backgroundHighlightColor;
if (self.highlightImage != nil) {
self.defaultImage = self.highlightImage;
}
}
break;
case SWSTAnswerButtonSelectedState: {
cornerRadius = self.cornerSelectedRadius;
borderWidth = self.borderSelectedWidth;
borderColor = self.borderSelectedColor;
themeColor = self.selectedColor;
backgroundColor = self.backgroundSelectedColor;
if (self.selectedImage != nil) {
self.defaultImage = self.selectedImage;
}
}
break;
}
if (self.defaultImage != nil) {
self.image = self.defaultImage;
}
[self setFontColor:themeColor];
if (self.hasBorder) {
self.layer.cornerRadius = cornerRadius;
self.layer.borderWidth = borderWidth;
self.layer.borderColor = borderColor.CGColor;
} else {
self.layer.cornerRadius = 0.f;
self.layer.borderWidth = 0.f;
self.layer.borderColor = [NSColor clearColor].CGColor;
}
self.layer.backgroundColor = backgroundColor.CGColor;
}
这样就可以简单的实现你想要的几乎任何NSButton支持的样式，只要扩展对应的属性就好了。
不过，在实现样式的时候，发现了一个严重的问题。在重写mouseDown:和mouseUp:方法后，NSButton的action不执行了。这里调用super方法也不管用，看来系统会在这种情况下忽略action方法。
既然系统不执行，我在mouseUp:方法里手动执行一下：
- (void)mouseUp:(NSEvent *)event {
self.mouseUp = YES;
if (self.enabled) {
if (self.canSelected && self.hover) {
self.selected = !self.selected;
self.buttonState = self.selected ? SWSTAnswerButtonSelectedState : SWSTAnswerButtonNormalState;
} else {
if (!self.selected) {
self.buttonState = SWSTAnswerButtonNormalState;
}
}
if (self.hover && self.enabled) {
NSString *selString = NSStringFromSelector(self.action);
if ([selString hasSuffix:@":"]) {
[self.target performSelector:self.action withObject:self afterDelay:0.f];
} else {
[self.target performSelector:self.action withObject:nil afterDelay:0.f];
}
}
}
}
修改后的mouseUp:方法在hover（确保鼠标在button的frame内）及enabled的状态下会通过performSelector:withObject:afterDelay:方法让button的target执行button的action。看起来有点奇怪，但确实可以这么干。
NSButton的初始化可以在代码里给所有属性赋值，但我相信你会觉得这些代码看着很恶心。其实完全不用放在代码里，这些初始化可以全丢给storyboard。
在storyboard里选中NSButton，选择右边第三个标签（Identity），看到有一行是User Defined Runtime Attributes。这里可以在运行时初始化一些自定义属性，支持基本类型外，居然还支持NSPoint、NSSize、NSRect、NScolor，甚至是NSImage（传图片名就好了）。
UserDefined.png
最后，在updateTrackingAreas方法中，添加了自己的NSTrackingArea，以保证窗口不在最前时移动鼠标到button也可以实现hover效果。
- (void)updateTrackingAreas {
[super updateTrackingAreas];
if (self.trackingArea != nil) {
[self removeTrackingArea:self.trackingArea];
self.trackingArea = nil;
}
NSTrackingAreaOptions options = NSTrackingInVisibleRect|NSTrackingMouseEnteredAndExited|NSTrackingActiveAlways;
self.trackingArea = [[NSTrackingArea alloc] initWithRect:CGRectZero options:options owner:self userInfo:nil];
[self addTrackingArea:self.trackingArea];
}
完整代码见gitlab：https://gitlab.com/Maulyn/CustomButtonDemo
欢迎随时交流～
