前言
在上篇文章MAC开发-去掉系统titleBar中，去掉了系统titlebar，参考QQ的例子，窗口的按钮的位置可以调整。这篇文章中继续以QQ为例，实现主界面的切换。
第一部分：优化顶部背景
仔细的观察QQ的顶部，有毛玻璃的透明效果，实现方法很简单，就是使用NSVisualEffectView。
屏幕快照 2017-08-21 下午6.11.05.png
然后修改它的风格：
//修改毛玻璃的风格
self.effectView.material = NSVisualEffectMaterialLight;
屏幕快照 2017-08-21 下午6.14.32.png
对比左右两边，效果就明显了。
第二部分：添加切换按钮
2-1、自定义TabbarBtn
首先.h文件中声明变量
//是否被选中
@property (nonatomic,assign) BOOL selected;
//两种状态的图片名称
@property (copy,nonatomic) NSString *downImageName;
@property (copy,nonatomic) NSString *normalImageName;
然后监听按钮的状态：mouseDown、mouseUp、mouseExited
//防止按钮按下后移出区域，按钮状态不改变的情况
- (void)mouseExited:(NSEvent *)event{
if (!self.selected){
self.image = [NSImage imageNamed:self.normalImageName];
}
}
- (void)mouseDown:(NSEvent *)event{
self.image = [NSImage imageNamed:self.downImageName];
//这句必须加，防止按钮的点击事件被覆盖
[super mouseDown:event];
}
- (void)mouseUp:(NSEvent *)event{
if (!self.selected){
self.image = [NSImage imageNamed:self.normalImageName];
}
[super mouseUp:event];
}
注意：鼠标的移入移除事件不会直接有效，需要加代码：
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
//响应鼠标移入移出事件
NSTrackingArea *area =[[NSTrackingArea alloc] initWithRect:self.bounds options:NSTrackingMouseEnteredAndExited|NSTrackingActiveInKeyWindow owner:self userInfo:nil];
[self addTrackingArea:area];
}
2-2、自定义TabbarView
新建NSView，由于功能和iOS中的Tabbar类似，暂且命名为TabbarView。然后新建TabbarView.xib文件并相关联。
1470403A-DE1D-49A0-BCED-035E33310C2C.png
添加按钮Gradient Button继承自TabbarBtn
50B244CF-EC8E-4B68-9A50-9FBE432D6869.png
需要修改按钮的属性：去掉Bordered的勾选。
然后在init方法中加载控件
- (instancetype)initWithCoder:(NSCoder *)coder{
self = [super initWithCoder:coder];
if (self){
[self setup];
}
return self;
}
- (void)setup{
//从xib中加载控件
[[NSBundle mainBundle]loadNibNamed:@"TabbarView" owner:self topLevelObjects:nil];
[self addSubview:self.messageBtn];
[self addSubview:self.contactBtn];
[self addSubview:self.moreBtn];
}
设置按钮的属性，并设置出示状态，在setup方法中添加
//图片赋值
self.messageBtn.normalImageName = @"menu-message-normal";
self.messageBtn.downImageName = @"menu-message-down";
self.messageBtn.selected = YES;
_lastSelectBtn = self.messageBtn;
self.contactBtn.normalImageName = @"menu-contact-normal";
self.contactBtn.downImageName = @"menu-contact-down";
self.moreBtn.normalImageName = @"menu-more-normal";
self.moreBtn.downImageName = @"menu-more-down";
//取消按钮高亮状态，去掉点击时的灰色背景
[self.messageBtn.cell setHighlightsBy:NSNoCellMask];
[self.contactBtn.cell setHighlightsBy:NSNoCellMask];
[self.moreBtn.cell setHighlightsBy:NSNoCellMask];
其中_lastSelectBtn是代表上次选中的按钮，切换状态时使用。
给按钮添加点击事件
- (IBAction)itemButtonClicked:(TabbarBtn*)sender {
//新旧选中状态切换
_lastSelectBtn.selected = NO;
sender.selected = YES;
_lastSelectBtn = sender;
}
2-3、把TabbarView添加到ViewController中
拖拽CustomView到view顶部，并修改他的类TabbarView，添加约束居中显示
9F98BDF1-C934-4D15-A20A-57B75ACE8E44.png
运行后：
屏幕快照 2017-08-22 上午11.55.25.png
