本博客將在 6月底停止在 簡(jiǎn)書(shū)的更新腻扇，全新的博客地址請(qǐng)點(diǎn)擊前往-> 君賞博客
本文章文字大約 4500字，大概花費(fèi) 10分鐘閱讀调卑。本文章設(shè)計(jì)的圖片比較多曼氛，流量黨慎入豁辉！。
本教程屬于 制作 Jekyll-Admin-Mac的教程系列舀患，可以關(guān)于 君賞博客關(guān)注以后教程徽级。
本文章一些知識(shí)點(diǎn)，不感興趣可以提前關(guān)閉聊浅！
-
Curl下載命令 - 使用
Xib - 使用
Autolayout -
OSX開(kāi)發(fā) -
@IBDesignable和@IBInspectable draw()- 自定義
NSView的背景顏色 - 使用
Xib加載試圖 - 設(shè)置
autoresizingMask屬性 - 修改
NSWindow的最小顯示區(qū)域 - 去掉
NSTableView的邊框 -
NSTableView使用View Base試圖 - 在
OSX使用 `font-awesome - 如何在
Swift3獲取類名字符串 - 解決
Cocoapods不能使用IBDeisgnable - 面向?qū)ο笏枷?/li>
?為什么要開(kāi)發(fā)
Jekyll-Admin-Mac?因?yàn)榻佑|到使用
Jekyll構(gòu)建博客十分的方便餐抢，但是Jekyll-Admin里面的功能又差強(qiáng)人意。如果修改
Jekyll-Admin里面的源碼代價(jià)是巨大的低匙，不如用自己擅長(zhǎng)的語(yǔ)言來(lái)寫(xiě)旷痕，正好還有自動(dòng)生成的 API 可以用。對(duì)于
Jekyll-Admin-Mac的UI我們采用網(wǎng)頁(yè)的配色即可顽冶。
獲取 Jekyll-Admin的圖標(biāo)欺抗。
經(jīng)過(guò)網(wǎng)絡(luò)抓包，我們抓取到 Jekyll-Admin的圖標(biāo)是經(jīng)過(guò)連接
../admin/847c038a8202754b465604459e16715d.png來(lái)獲取的强重。
我們直接保存到本地绞呈，在工程里面使用。
我們新建一個(gè) Mac的工程保存到本地名字叫做- Jekyll-Admin-Mac间景。
我們打開(kāi)終端 terminal.app
cd /Users/用戶名稱/Downloads
curl -o jekyll-admin-logo.png ../admin/847c038a8202754b465604459e16715d.png
??這里我們用到了
curl命令佃声，更多的想知道curl命令可以去谷歌和百度。
設(shè)置左側(cè)的 Logo
我們拖拽文件 jekyll-admin-logo.png到工程 Assets.xcassets倘要。
左邊功能菜單我們?cè)O(shè)置寬度為 205圾亏。
我們新建一個(gè) SideMenuView繼承 NSView。
現(xiàn)在 NSView創(chuàng)建的時(shí)候不允許使用 XIB封拧，我們自己新建一個(gè) Xib志鹃。
名字叫做 SideMenuView.xib。
我們?cè)O(shè)置 SideMenuView的大小為 205x1000泽西。寬度是固定的弄跌，但是高度不固定，我們使用自動(dòng)布局尝苇。
最上線顯示 Logo的地方大小為 205x75铛只。我們采用 NSImageView。我們采用如下的布局糠溜。
- 左側(cè)和父試圖對(duì)其
- 上側(cè)和父試圖對(duì)其
- 寬度205
- 高度75
??我們發(fā)現(xiàn)我們的圖片是正常的顯示出來(lái)了淳玩，但是背景顏色無(wú)法顯示。那是因?yàn)樵?
OSX開(kāi)發(fā)和iOS不太一樣非竿。對(duì)于正常的NSView,NSImageView是無(wú)法進(jìn)行設(shè)置背景顏色的蜕着。
@IBDesignable和@IBInspectable
為了可以自定義背景顏色，我們創(chuàng)建一個(gè)繼承 NSView的子類 BaseView。
@IBDesignable class BaseView: NSView {
}
我們?cè)?BaseView新增一個(gè)屬性承匣。
@IBInspectable var backgroundColor:NSColor! = NSColor.white {
didSet {
self.needsToDraw(self.bounds)
}
}
自定義draw()
我們?cè)?func draw(_ dirtyRect: NSRect)方法里面進(jìn)行填充顏色蓖乘。
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
self.backgroundColor.setFill()
NSRectFill(dirtyRect)
}
關(guān)于怎么在 XIB及時(shí)預(yù)覽界面可以參考下面的連接。
在Xcode6中使用IBDesignable創(chuàng)建自定義控件(翻譯)
關(guān)于如何 NSView自定義背景顏色參考下面的連接
我們?cè)O(shè)置 NSView為繼承與 BaseView 背景顏色試圖韧骗。我們?cè)O(shè)置背景顏色為 rgb343434嘉抒。
布局參考之前 NSImageView的布局。
我們把剛才的 NSImageView作為子試圖袍暴，布局設(shè)置下面些侍。
我們拖拽 NSView一個(gè)新的試圖放置在 Main.storyboard-ViewController-View上面。
我們?cè)O(shè)置剛才新建的 NSView繼承我們新建的類 SideMenuView政模。
使用 Xib 加載試圖
到這里岗宣，我們新建的 NSView無(wú)法正常的顯示出來(lái)。那是因?yàn)槲覀冊(cè)? XIB進(jìn)行初始化的時(shí)候走的是方法是
public init?(coder: NSCoder)
并且 SideMenuView這個(gè)類不知道從哪里加載試圖淋样。關(guān)于如何進(jìn)行加載自定義的 XIB可以參考這一篇文章耗式。
我們新增一個(gè)綁定的屬性
@IBOutlet weak var view: BaseView!
設(shè)置 Xib的 File's Owner類為 SideMenuView，綁定 view趁猴。
我們?cè)?SideMenuView類里面新增一個(gè)方法,用來(lái)加載自定義的試圖刊咳。
func loadXibView() {
Bundle.main.loadNibNamed("SideMenuView", owner: self, topLevelObjects: nil)
self.view.frame = self.bounds
self.addSubview(self.view)
}
我們重寫(xiě) init?(coder: NSCoder)方法。
required init?(coder: NSCoder) {
super.init(coder: coder)
self.loadXibView()
}
當(dāng)我們?cè)俅蔚倪\(yùn)行躲叼，我們自定義 Xib的界面已經(jīng)可以出現(xiàn)了。
但是到目前來(lái)說(shuō)我們幾乎達(dá)到顯示 Logo企巢，但是我們的背景顏色設(shè)置白色不是我們所希望的枫慷，我們?cè)O(shè)置默認(rèn)的為透明顏色。
我們還發(fā)現(xiàn)我們我們的試圖并沒(méi)有達(dá)到我們?cè)O(shè)置約束的大小浪规。
我們可以點(diǎn)擊 Xcode查看試圖層次
我們看出SideMenuView試圖的 View并沒(méi)有達(dá)到我們隨著父試圖變化而變化或听。
設(shè)置 autoresizingMask屬性
我們?cè)O(shè)置一下 autoresizingMask屬性。關(guān)于 autoresizingMask一些用法可以看一下下面的資料笋婿。
iOS開(kāi)發(fā)－自動(dòng)布局之a(chǎn)utoresizingMask使用詳解（Storyboard&Code）
我們?cè)O(shè)置高度自適應(yīng)誉裆。
self.view.autoresizingMask = .viewHeightSizable
我們?cè)O(shè)置 SideMenuView的view的背景為rgb515151，方便我們進(jìn)行查看缸濒。
我的試圖已經(jīng)能隨著變化自動(dòng)改變高度了足丢。
這個(gè)時(shí)候我們還發(fā)現(xiàn)了一個(gè)問(wèn)題，我們的 Window可以壓縮寬度最小庇配，這樣左邊的側(cè)欄已經(jīng)擋著了斩跌。
修改 Window的最小顯示區(qū)域
我們可以通過(guò)下面設(shè)置 window的最小值。
這樣我們可以讓 Window可以保持最小的尺寸是 600x500捞慌。
我們修改 SideMenuView的 view的試圖背景顏色為 RGB444444耀鸦。
上面的圖可以明顯看出來(lái)是需要封裝控件的，但是封裝完畢是試圖依次疊加還是使用 NSTableView啸澡。試圖依次疊加不利于擴(kuò)展袖订，我們采用 NSTableView氮帐。
我們拖拽一個(gè) NSTableView的控件放置在 SideMenuView剩余的位置。布局如下洛姑。
如圖所示的版本還不能達(dá)到我們的要求上沐，有了標(biāo)題，而且多了一個(gè) Column吏口。
我們?nèi)∠@示 Header和設(shè)置只有一個(gè) Cloumn
我們發(fā)現(xiàn)我們剩下的只有一個(gè) Column的寬度只有 116并不是全屏顯示的奄容。
去掉 NSTableView的邊框
我們?cè)O(shè)置寬度為 205。
我們現(xiàn)在發(fā)現(xiàn)了一個(gè)問(wèn)題产徊，我們本來(lái)有205的寬度的昂勒。但是我們現(xiàn)在只能設(shè)置最大200，并且預(yù)覽顯示是全屏顯示了戈盈。
我們?cè)?NSTableView的屬性里面看到這個(gè)谆刨。
我們的寬度留3大小痊夭。但是就算去掉了3還是只有 203,剩下的 2跑到那里去了。
我們觀察到 NSTableView的父試圖已經(jīng)是 203的寬度了虹曙，既然這樣我們就默認(rèn)使用 200；
可以設(shè)置最外層
Border為沒(méi)有即可番舆。
我們發(fā)現(xiàn)我們剛才創(chuàng)建的 NSTableView顯示的背景顏色是白色的酝碳，我們可以關(guān)閉 NSScrollView的繪制背景顏色和設(shè)置 NSTableView的背景顏色為透明即可。
雖然系統(tǒng)的 NSButton是符合圖片加文字效果的恨狈，但是卻無(wú)法修改文字的顏色疏哗。
我們創(chuàng)建一個(gè)類繼承與 BaseView名字叫做 SideMenuItemView。
我們按照上文所描述的方法創(chuàng)建一個(gè) Xib文件禾怠。
我們?cè)O(shè)置 Xib里面的 NSView的寬度為 205返奉，高度為 49。其實(shí)我們這個(gè)寬度和高度會(huì)隨著改變的吗氏。
我們?cè)谧钭髠?cè)放置一個(gè) NSImageView布局如下衡瓶。
我們?cè)?NSImageView的右側(cè)放置一個(gè) NSTextFiled的 Label，布局如下牲证。
我們?cè)O(shè)置右側(cè) Label的字體顏色為 ebdac1哮针，字體大小為 17px。
我們利用 Xib創(chuàng)建下面的關(guān)聯(lián)屬性。
@IBOutlet weak var iconImageView: NSImageView!
@IBOutlet weak var itemTitle: NSTextField!
我們按照之前寫(xiě) SideMenuView試圖的方法把 Xib的對(duì)象加載進(jìn)來(lái)十厢，具體的方法可以參考上面等太。
我們?cè)O(shè)置 View的試圖按照寬度和高度自動(dòng)約束。
self.view.autoresizingMask = [.viewWidthSizable,.viewHeightSizable]
這里說(shuō)明一點(diǎn)蛮放，可選型不是如
Objective-C那樣一般用|連接，多個(gè)需要放在數(shù)組里面瞻想。
我們需要的控件已經(jīng)封裝好了，我們現(xiàn)在要做的就是設(shè)置 NSTableView的樣式為 View Base佃迄。
我們刪除自動(dòng)生成的試圖滔灶，拖拽一個(gè) NSView到 到 Column下面麻车。我們關(guān)聯(lián) NSTableView的數(shù)據(jù)源唆鸡。
我們?cè)?SideMenuView類里面實(shí)現(xiàn) NSTableView的數(shù)據(jù)源方法燃逻。
我們通過(guò)界面查看器可以看的出來(lái)握童，第一個(gè) Row已經(jīng)出來(lái)了俺附，但是卻因?yàn)闆](méi)有設(shè)置無(wú)法顯示事镣。
在 OSX使用 font-awesome
左側(cè)的圖片網(wǎng)站采用 font-awesome框架。 OSX我們使用 FontAwesomeIconFactory框架随闪。
使用
Cocoapods我強(qiáng)烈的建議使用 官方的App使用
我們?cè)O(shè)置剛才我們封裝的 SideMenuItemView的 NSImageView的子類為 NIKFontAwesomeImageView
解決 Cocoapods不能使用 IBDeisgnable
我們?cè)谑褂?
Cocoapods時(shí)候不能使用IBDeisgnable的解決辦法调鲸。post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['CONFIGURATION_BUILD_DIR'] = '$PODS_CONFIGURATION_BUILD_DIR' end end end
很不幸的是在另外的 Xib使用 SideMenuItemView報(bào)下面的錯(cuò)誤即供。
我們?cè)?Debug IBDeisgnable時(shí)候發(fā)現(xiàn)抱錯(cuò)下面的代碼株依。
因?yàn)槲覀兘壎ㄊ菍?duì)象屬于 !類型抹锄，但是我們此時(shí)還不存在這個(gè)變量。故而強(qiáng)行當(dāng)做存在的使用崩潰了吻育。
到目前為止摊趾，我不清楚這個(gè)對(duì)象沒(méi)有初始化是為什么導(dǎo)致的。但是只是在 Xib進(jìn)行初始化 IBDeisgnable抱錯(cuò)梢为，但是可以正常運(yùn)行的。
但是這樣可能不能滿足我的要求粟害，我們盡量解決就解決。我們之前的方法里面可以接受一個(gè)數(shù)組的指針站蝠。
我們看看數(shù)組里面元素如何留荔。
var views:NSArray = NSArray()
Bundle.main.loadNibNamed("SideMenuItemView", owner: self, topLevelObjects: &views)
數(shù)組里面是有元素的，我們嘗試從這里面的元素獲取試一下。
func loadXibView() {
guard let xibView = self.getXibView(nibName: "SideMenuItemView") else {
return
}
xibView.autoresizingMask = [.viewWidthSizable,.viewHeightSizable]
xibView.frame = self.bounds
self.addSubview(xibView)
}
func getXibView(nibName:String) -> NSView? {
var views:NSArray = NSArray()
Bundle.main.loadNibNamed(nibName, owner: self, topLevelObjects: &views)
var xibView:NSView?
for any in views {
guard let view = any as? NSView else {
continue
}
xibView = view
}
return xibView
}
我們發(fā)現(xiàn)之前報(bào)的錯(cuò)誤果然消失了验靡。我們可以采用這一種方式來(lái)加載試圖凿宾，我們可以封裝一下件蚕，方便我們用排作。
NSStringFromClass(type(of:self))
extension NSView {
func loadXibView() {
guard let xibView = self.getXibView(nibName: NSStringFromClass(type(of:self))) else {
return
}
xibView.autoresizingMask = [.viewWidthSizable,.viewHeightSizable]
xibView.frame = self.bounds
self.addSubview(xibView)
}
func getXibView(nibName:String) -> NSView? {
var views:NSArray = NSArray()
Bundle.main.loadNibNamed(nibName, owner: self, topLevelObjects: &views)
var xibView:NSView?
for any in views {
guard let view = any as? NSView else {
continue
}
xibView = view
}
return xibView
}
}
但是發(fā)現(xiàn)竟然加載不出來(lái)任何數(shù)據(jù)裳瘪，原來(lái)我們發(fā)現(xiàn)自動(dòng)生成的類名帶有工程前綴。
"Jekyll_Admin_Mac.SideMenuView"
我們可以采用分割字符串使用最后一個(gè)派殷。
我們將 SideMenuItemView改成繼承與 NIKFontAwesomeImageView斯撮。
NIKFontAwesomeImageView的IBDeisgnable不能在Xib預(yù)覽的橱乱。
我們?cè)O(shè)置 NIKFontAwesomeImageView屬性如下。
icon Hex:f02d-
Size:17生成的圖片是正方形危纫，并不能和網(wǎng)站的樣式可以設(shè)置寬度和高度。
Color:EBDAC1
我們運(yùn)行一下發(fā)現(xiàn)已經(jīng)可以正常的運(yùn)行了螃征。
面向?qū)ο笤O(shè)計(jì)
我們配置一下 NSTableView的數(shù)據(jù)源如下：
let menuItemDict = [
"文章":"F02D",
"頁(yè)面":"F15C",
"數(shù)據(jù)":"F1C0",
"文件":"F15B",
"配置":"F013",
]
我們?cè)O(shè)置一下 NSTableView數(shù)據(jù)代理踢械。
public func numberOfRows(in tableView: NSTableView) -> Int {
return menuItemDict.keys.count
}
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
guard let view = tableView.make(withIdentifier: "SideMenuItemView", owner: self) as? SideMenuItemView else {
return nil
}
view.itemTitle.stringValue = Array(menuItemDict.keys)[row]
view.iconImageView.iconHex = Array(menuItemDict.values)[row] as NSString
return view
}
??對(duì)于
Swift3里面的Dictionary的屬性Keys無(wú)法作為正常的Array使用背率，我們需要用Array()對(duì)其進(jìn)行初始化移稳。
上圖是我們運(yùn)行起來(lái)的效果翻翩。但是呢和我們網(wǎng)頁(yè)的看起來(lái)還是有寫(xiě)差別的胶征。
我們?cè)? SideMenuItemView.xib上面的底部添加一條線。布局如下：
線繼承與 BaseView，我們?cè)O(shè)置顏色為 424242罩抗。
雖然線是出來(lái)了，但是我們不想讓全部出現(xiàn)。
我們?cè)?SideMenuItemView關(guān)聯(lián)剛才的線骨坑。
@IBOutlet weak var lineView: BaseView!
我們修改配置如下。
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
guard let view = tableView.make(withIdentifier: "SideMenuItemView", owner: self) as? SideMenuItemView else {
return nil
}
view.itemTitle.stringValue = Array(menuItemDict.keys)[row]
let values = Array(menuItemDict.values)[row]
if let hexString = values[0] as? NSString {
view.iconImageView.iconHex = hexString
}
if let hidden = values[1] as? Bool {
view.lineView.isHidden = hidden
}
return view
}
??因?yàn)樽值涞娜≈凳菬o(wú)序的匈辱，所以我們這樣的寫(xiě)法會(huì)導(dǎo)致我們的顯示出現(xiàn)問(wèn)題。
我們修改我們的數(shù)據(jù)源為一個(gè) Array數(shù)組浅碾。
let menuItems = [
["文章", "F02D", false],
["頁(yè)面", "F15C", true],
["數(shù)據(jù)", "F1C0", false],
["文件", "F15B", true],
["配置", "F013", false],
]
我們需要修改對(duì)應(yīng)數(shù)據(jù)賦值。
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
guard let view = tableView.make(withIdentifier: "SideMenuItemView", owner: self) as? SideMenuItemView else {
return nil
}
let values = menuItems[row]
guard values.count == 3 else {
return nil
}
if let title = values[0] as? String {
view.itemTitle.stringValue = title
}
if let hexIcon = values[1] as? NSString {
view.iconImageView.iconHex = hexIcon
}
if let hidden = values[2] as? Bool {
view.lineView.isHidden = !hidden
}
return view
}
我們運(yùn)行此時(shí)顯示如下力试。
我們給 NSTableView綁定一個(gè)方法事件。
@IBAction func didClickRow(_ sender: NSTableView) {
}
我們給 NSTableView新增一個(gè)屬性是否被選中畸裳。然而現(xiàn)在一個(gè)問(wèn)題已經(jīng)出現(xiàn)缰犁，現(xiàn)在這么多的配置需要配置豈不是很麻煩。
這就涉及到面向?qū)ο?/code>思想怖糊，但是我們可以在 Swift中使用 Struct作為我們的配置數(shù)據(jù)源帅容。
struct SideMenuItemConfiguration {
let title:String ///< 標(biāo)題
let iconHex:String ///< icon 的十六進(jìn)制字符串
let hidden:Bool ///< 是否隱藏底部線
let selected:Bool ///< 是否被選中
}
我們修改我們的數(shù)據(jù)源：
let menuItems = [
// ["文章", "F02D", false],
// ["頁(yè)面", "F15C", true],
// ["數(shù)據(jù)", "F1C0", false],
// ["文件", "F15B", true],
// ["配置", "F013", false],
SideMenuItemConfiguration(title: "文章", iconHex: "F02D", hidden: true, selected: false),
SideMenuItemConfiguration(title: "頁(yè)面", iconHex: "F15C", hidden: false, selected: false),
SideMenuItemConfiguration(title: "數(shù)據(jù)", iconHex: "F1C0", hidden: true, selected: false),
SideMenuItemConfiguration(title: "文件", iconHex: "F15B", hidden: false, selected: false),
SideMenuItemConfiguration(title: "配置", iconHex: "F013", hidden: true, selected: false),
]
再次修改我們的賦值代碼。
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
guard let view = tableView.make(withIdentifier: "SideMenuItemView", owner: self) as? SideMenuItemView else {
return nil
}
let configuration = menuItems[row]
view.itemTitle.stringValue = configuration.title
view.iconImageView.iconHex = configuration.iconHex as NSString
view.lineView.isHidden = configuration.hidden
return view
}
我們的代碼比之前要精簡(jiǎn)一些伍伤。
我們?cè)邳c(diǎn)擊 NSTableView點(diǎn)擊方法獲取選中的 Row，之后讓選中數(shù)據(jù)源狀態(tài)被選中百侧，其他取消選中见秤。
@IBAction func didClickRow(_ sender: NSTableView) {
let row = sender.selectedRow
for (index, configuration) in menuItems.enumerated() {
configuration.selected = index == row
}
sender.reloadData()
}
??這段代碼會(huì)被抱錯(cuò)避咆，因?yàn)槲覀冃薷牧吮?
let標(biāo)記的常量脏款，我們修改成var即可痒谴。而且我們
enumerated()出來(lái)的竟然是也是Let標(biāo)記的,我們用var標(biāo)記读慎。81D12FF2-A02E-496A-80D9-BC3994745199
我們?cè)O(shè)置選中的顏色為 ff9900配猫。默認(rèn)的顏色為 EBDAC1肉瓦。
我們?cè)?SideMenuItemConfiguration新增默認(rèn)顏色和選中顏色的屬性挨厚。
let normalColor:NSColor = NSColor(red:1.000, green:0.600, blue:0.000, alpha:1.000) ///< 默認(rèn)狀態(tài)顏色
let selectedColor:NSColor = NSColor(red:0.922, green:0.855, blue:0.757, alpha:1.000) ///< 選中的顏色
我們?cè)O(shè)置默認(rèn)值這樣 之前的代碼也可以 正常的編譯通過(guò)咨油。
我們需要根據(jù)選中狀態(tài)設(shè)置圖標(biāo)的顏色還有文字的顏色霎挟，這樣就要增加一下邏輯。這些都是修改 SideMenuItemView類的內(nèi)容讲冠，為啥不采用賦值砂吞，讓 SideMenuItemView內(nèi)部處理呢配名？
我們說(shuō)做就做霞溪。
var menuItemConfiguration:SideMenuItemConfiguration? {
didSet {
guard let configuration = self.menuItemConfiguration else {
return
}
self.itemTitle.stringValue = configuration.title
self.iconImageView.iconHex = configuration.iconHex as NSString
self.lineView.isHidden = configuration.hidden
let color = configuration.selected ? configuration.selectedColor : configuration.normalColor
self.iconImageView.color = color
self.itemTitle.textColor = color
}
}
我們給 SideMenuItemView類新增 menuItemConfiguration屬性脓杉，當(dāng)給這個(gè)屬性設(shè)置值的時(shí)候我們做出對(duì)應(yīng)處理。
我們現(xiàn)在可以給我們 NSTableView的代碼精簡(jiǎn)如下：
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
guard let view = tableView.make(withIdentifier: "SideMenuItemView", owner: self) as? SideMenuItemView else {
return nil
}
let configuration = menuItems[row]
view.menuItemConfiguration = configuration
return view
}
但是我們運(yùn)行起來(lái)乐疆，卻發(fā)現(xiàn)全部都是選中的顏色埃唯，原來(lái)是我們默認(rèn)顏色和選中顏色配置反了導(dǎo)致，我們修改過(guò)來(lái)即可鹰晨。
此時(shí)我們的初始化配置恢復(fù)了正常墨叛，但是我們點(diǎn)擊了沒(méi)有任何的變化止毕。讓我們找一下出現(xiàn)這種現(xiàn)象原因是怎么導(dǎo)致的。
??因?yàn)榻Y(jié)構(gòu)體沒(méi)有被引用漠趁，所以便利出來(lái)的臨時(shí)變量屬于一個(gè)新的地址扁凛。我們需要修改臨時(shí)變量之后替換掉之前數(shù)組里面的。
@IBAction func didClickRow(_ sender: NSTableView) {
let row = sender.selectedRow
for (index, var configuration) in menuItems.enumerated() {
configuration.selected = index == row
menuItems[index] = configuration
}
sender.reloadData()
}
??此時(shí)需要注意的是我們需要修改我們的
menuItems為var類型闯传。
此時(shí)我們的效果已經(jīng)達(dá)到了谨朝，我們覺(jué)得默認(rèn)啟動(dòng)顯示的第一個(gè)界面是0元素。
我們綁定界面的元素 NSTableView到 SideMenuView 甥绿。
@IBOutlet weak var tableView: NSTableView!
我們把 didClickRow邏輯封裝成下面的對(duì)象字币。
func changeTabeleViewState(row:Int, tableView:NSTableView) {
for (index, var configuration) in menuItems.enumerated() {
configuration.selected = index == row
menuItems[index] = configuration
}
tableView.reloadData()
}
我們修改 didClickRow的調(diào)用。
@IBAction func didClickRow(_ sender: NSTableView) {
let row = sender.selectedRow
changeTabeleViewState(row: row, tableView: sender)
}
我們修改 required init?(coder: NSCoder)的代碼如下:
required init?(coder: NSCoder) {
super.init(coder: coder)
self.loadXibView()
changeTabeleViewState(row: 0, tableView: self.tableView)
}
