第三節(jié)，第一課NSButton使用，macOS開發(fā)入門之實戰(zhàn)課程（仿主流視頻app界面）
如果你開發(fā)過iOS，經(jīng)過前面二節(jié)你肯定已經(jīng)入門了，對于一些基礎(chǔ)控件的使用我們可以直接使用option鍵跳轉(zhuǎn)官方文檔查看。從這節(jié)課開始，我們直接進(jìn)入UI實戰(zhàn)課程。效果如下圖：
我將首頁分為二個部分，一個部分是左邊的分類欄，右邊是分類內(nèi)容展示頁面。
為方便管理我們分別新建二個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];
}
在這里為方便后面擴展，我們新建一個基礎(chǔ)NSViewController。
前面說到macOS開發(fā)遵循嚴(yán)格的mvc架構(gòu)，所以，我們在定義baseViewController的時候直接
新建一個NSView，后面就不用每次都新建NSView了，代碼如下：
新建一個@interface XLBaseViewController : NSViewController
在XLBaseViewController.m中實現(xiàn)：
- (void)loadView{
? NSView *view = [[NSView alloc]initWithFrame:CGRectMake(0, 0, 0,0)];
? self.view = view;
}
前面的XLMenuLeftVC和 XLRightContentVC分別繼承與XLBaseViewController。
@interface XLMenuLeftVC : XLBaseViewController；
@interface XLRightContentVC : XLBaseViewController；
現(xiàn)在我們來看下現(xiàn)在工程目錄：
我們現(xiàn)在在XLMenuLeftVC.m文件實現(xiàn)TabBar的功能。
第一步我們先學(xué)習(xí)NSButton的使用：
聲明一個button：
@interface XLMenuLeftVC ()
@property (nonatomic, strong)NSButton? *playButton;
@end
進(jìn)行簡單初始化：
#pragma mark- init methods
- (NSButton *)playButton{
? if (!_playButton) {
? ? NSButton *playButton = [NSButton buttonWithTitle:@"Play" target:self action:@selector(playButtonClicked:)];
? ? _playButton = playButton;
? }
? return _playButton;
}
設(shè)置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；它的坐標(biāo)原點在左下方。
CGRect的frame是在左上方。
運行然后點擊play會打印信息：
2021-03-07 12:55:59.449610+0800 demo02[7131:518158] playButtonClicked
這樣NSButton的初步使用就OK了
現(xiàn)在我們來看下NSButton的其他設(shè)置：
//按鈕樣式
? ? _playButton.bezelStyle = NSBezelStyleRegularSquare;
? ? //是否顯示背景 默認(rèn)YES
? ? _playButton.bordered = YES;
? ? //按鈕的Type
? ? [_playButton setButtonType:NSButtonTypeMomentaryPushIn];
? ? //設(shè)置圖片
? ? _playButton.image = [NSImage imageNamed:@"close.png"];
? ? //按鈕的標(biāo)題
? ? [_playButton setTitle:@"Play"];
? ? //是否隱藏
? ? _playButton.hidden = NO;
? ? //標(biāo)題居中顯示
? ? _playButton.alignment = NSTextAlignmentCenter;
? ? //設(shè)置背景是否透明
? ? _playButton.transparent = NO;
? ? //按鈕初始狀態(tài)
? ? _playButton.state = NSControlStateValueOff;
? ? //按鈕是否高亮
? ? _playButton.highlighted = NO;
? ? //設(shè)置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))
下節(jié)課我們將學(xué)習(xí)點擊按鈕跳轉(zhuǎn)新的窗口。
