MAC开发-定义Tabbar

前言

在上篇文章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

最重要的事

源码地址：https://github.com/yakerapp/Mac-Tabbar