第三节，第一课NSButton使用，macOS开发入门之实战课程（仿主流视频app界面）
如果你开发过iOS，经过前面二节你肯定已经入门了，对于一些基础控件的使用我们可以直接使用option键跳转官方文档查看。从这节课开始，我们直接进入UI实战课程。效果如下图：
我将首页分为二个部分，一个部分是左边的分类栏，右边是分类内容展示页面。
为方便管理我们分别新建二个NSViewController：
在ViewController.m代码：
- (void)viewDidLoad {
[super viewDidLoad];
[self addSplitView];
}
#pragma mark- view methods
- (void)addSplitView {
CGFloat leftViewWidth = CGRectGetWidth(self.view.frame)/7;
CGFloat rightViewWidth = CGRectGetWidth(self.view.frame)-leftViewWidth;
CGFloat viewHeight = CGRectGetHeight(self.view.frame);
XLMenuLeftVC *leftVC = [XLMenuLeftVC new];
[self addChildViewController:leftVC];
leftVC.view.frame = CGRectMake(0, 0, leftViewWidth, viewHeight);
leftVC.view.wantsLayer = YES;
leftVC.view.layer.backgroundColor = [NSColor clearColor].CGColor;
[self.view addSubview:leftVC.view];
XLRightContentVC *rightVC = [XLRightContentVC new];
[self addChildViewController:rightVC];
rightVC.view.frame = CGRectMake(leftViewWidth, 0, rightViewWidth, viewHeight);
rightVC.view.wantsLayer = YES;
rightVC.view.layer.backgroundColor = [UIUtils colorWithHexColorString:@"0x3A3C40"].CGColor;
[self.view addSubview:rightVC.view];
}
在这里为方便后面扩展，我们新建一个基础NSViewController。
前面说到macOS开发遵循严格的mvc架构，所以，我们在定义baseViewController的时候直接
新建一个NSView，后面就不用每次都新建NSView了，代码如下：
新建一个@interface XLBaseViewController : NSViewController
在XLBaseViewController.m中实现：
- (void)loadView{
NSView *view = [[NSView alloc]initWithFrame:CGRectMake(0, 0, 0,0)];
self.view = view;
}
前面的XLMenuLeftVC和 XLRightContentVC分别继承与XLBaseViewController。
@interface XLMenuLeftVC : XLBaseViewController；
@interface XLRightContentVC : XLBaseViewController；
现在我们来看下现在工程目录：
我们现在在XLMenuLeftVC.m文件实现TabBar的功能。
第一步我们先学习NSButton的使用：
声明一个button：
@interface XLMenuLeftVC ()
@property (nonatomic, strong)NSButton *playButton;
@end
进行简单初始化：
#pragma mark- init methods
- (NSButton *)playButton{
if (!_playButton) {
NSButton *playButton = [NSButton buttonWithTitle:@"Play" target:self action:@selector(playButtonClicked:)];
_playButton = playButton;
}
return _playButton;
}
设置frame：
- (void)viewDidAppear{
CGRect gRect = CGRectMake(0, CGRectGetHeight(self.view.frame)-40-10, CGRectGetWidth(self.view.frame), 40);
self.playButton.frame = gRect;
}
- (void)playButtonClicked:(NSButton *)sender{
NSLog(@"playButtonClicked");
}
这个有个知识点：
macOS中view的属性：@property NSRect frame；它的坐标原点在左下方。
CGRect的frame是在左上方。
运行然后点击play会打印信息：
2021-03-07 12:55:59.449610+0800 demo02[7131:518158] playButtonClicked
这样NSButton的初步使用就OK了
现在我们来看下NSButton的其他设置：
//按钮样式
_playButton.bezelStyle = NSBezelStyleRegularSquare;
//是否显示背景 默认YES
_playButton.bordered = YES;
//按钮的Type
[_playButton setButtonType:NSButtonTypeMomentaryPushIn];
//设置图片
_playButton.image = [NSImage imageNamed:@"close.png"];
//按钮的标题
[_playButton setTitle:@"Play"];
//是否隐藏
_playButton.hidden = NO;
//标题居中显示
_playButton.alignment = NSTextAlignmentCenter;
//设置背景是否透明
_playButton.transparent = NO;
//按钮初始状态
_playButton.state = NSControlStateValueOff;
//按钮是否高亮
_playButton.highlighted = NO;
//设置title大小
_playButton.font = [NSFont systemFontOfSize:20];
/*
富文本文字
NSMutableAttributedString *nameAttribute = [[NSMutableAttributedString alloc] initWithString:@"播放：视频"];
NSRange range = NSMakeRange(0, 3);
[nameAttribute addAttribute:NSForegroundColorAttributeName
value:[NSColor redColor]
range:range];
[nameAttribute addAttribute:NSFontAttributeName
value:[NSFont systemFontOfSize:14]
range:range];
[nameAttribute fixAttributesInRange:range];
*/
留下一个问题：
按钮的width与父组件的width是一样的，但是实际显示却不是的，这是为什么呢？
(lldb) po gRect
(origin = (x = 0, y = 670), size = (width = 163.57142857142858, height = 40))
(lldb) po self.view.frame
(origin = (x = 0, y = 0), size = (width = 163.57142857142858, height = 720))
下节课我们将学习点击按钮跳转新的窗口。