在這一篇中购桑,我們使用一個開源控件EDStarRating對Bug進行rate的設置,你可以從這里下載Demo Resources氏淑,解壓后拖入工程勃蜘。
2.1 創(chuàng)建新的分組:Views, Helpers,Art,并將文件組織如下:
開始創(chuàng)建ScaryBugs詳情展示部分假残,這就開始動手吧^_^
在iOS中缭贡,如果想展示下一個界面,一般需要創(chuàng)建兩個不同的view辉懒,在用戶操作table view的某一行時阳惹,切換不同的view來進行顯示。
在OSX中眶俩,有一點不同莹汤,因為沒有像iphone那樣屏幕尺寸的限制,所以颠印,只需要把view弄的再大一些我們可以在同一個view中添加更多的的內(nèi)容纲岭。
2.2 選中MasterViewController.xib 選中view,然后把它拖動的更寬更高线罕,不必在意具體的尺寸細節(jié)止潮,要能夠放下新的控件就可以。
2.3 添加新控件:我們需要顯示的詳情內(nèi)容有bugs的名字(name)钞楼,圖片(image)沽翔,和評分(rating),額外的,我們還需要添加兩個Label來說明一下每個區(qū)域的含義仅偎,界面的最終樣子大概如下圖
對于名字 (name) 我們使用NSTextField 控件,它具有顯示和編輯的功能
對應圖片(image)我們使用控件NSImageView
對應評分(rating)我們使用導入的開源控件EDStarRating 控件雳殊,為此我們需要從控件庫中拖拽一個叫做“Custom View”的控件橘沥,后面再設置它
2.4 設置EDStarRating控件,并修改label的文字
上一步里的Custom View是NSView類型夯秃,我們需要把它指定為EDStarRating
然后我們把第一個label名稱改為Name座咆,第二個labe的名稱改為Rating
編譯運行程序,如果沒有錯誤仓洼,界面大概是下面的樣子
?? Rating下面的控件不見了介陶!別擔心,它就在那里色建,只是我們還沒有對它進行設置哺呜,接下來我們給控件來綁定到控制器的屬性。
記得import EDStarRating.h頭文件
當用戶點擊table view的任意一行時箕戳,我們要獲取用戶選中的Bug數(shù)據(jù)某残,并展示詳情視圖信息,這里我們要處理三個環(huán)節(jié):
第一陵吸,我們要知道table view 的哪一行被點選了玻墅。當table view被選中某行的時候,它會告知它的delegate壮虫,通過tableViewSelectionDidChange方法告知被選中的行(row)澳厢,我們需要在這個方法處理。
第二囚似,我們要獲取選中行相關的數(shù)據(jù)
第三剩拢,根據(jù)數(shù)據(jù),顯示詳情視圖信息
2.5 MasterViewController.m中的代碼實現(xiàn)
在Mac OSX10.10 之前谆构,初始化view的代碼需要寫在控制器的loadView方法中裸扶,現(xiàn)在編譯運行,隨意點選table view 中的某一行搬素,我們就可以看到實際效果了
由于image view 默認沒有縮放圖片呵晨,導致圖片看起來比較小,我們可以在xib中選中image view 設置它的“Scaling”屬性熬尺,達到想要的效果
再次運行摸屠,查看效果
現(xiàn)在你可以點擊某一行,右邊將會顯示出對應的界面效果粱哼,你也可以更改名稱里的文字和評分季二,但它們都不會有什么效果,下面我們來實現(xiàn)添加和刪除的功能
首先我們要添加兩個按鈕(Gradient Button),一個增加新行胯舷,設置image為 NSAddTemplate刻蚯,另一個刪除選中行,設置image 為NSRemoveTemplate ,效果如下:
2.6 在MasterViewController.m中分別為兩個按鈕添加操作方法(為按鈕添加方法的步驟與iOS相同桑嘶,選中按鈕控件炊汹,按住control鍵拖拽到對應文件類中)addBug 和deleteBug,代碼如下:
點擊運行逃顶,如果沒有錯誤的話讨便,我們就可以通過+按鈕來添加一個新行,-按鈕來刪除選中的行∫哉現(xiàn)在我們已經(jīng)實現(xiàn)在table view 中添加或者刪除數(shù)據(jù)來霸褒,那么接下來,我們來實現(xiàn)編輯現(xiàn)有的數(shù)據(jù)功能盈蛮,同樣废菱,我們要為NSTextField添加事件監(jiān)聽方法(與iOS的UITextField一樣)
再次運行程序,沒有錯誤的話眉反,我們可以在右側詳情視圖的text field中修改左側table view 選中行的名稱了昙啄。接下來我們實現(xiàn)修改評分功能,這個非常容易寸五,只要實現(xiàn)EDStarRating控件的一個代理方法就夠啦梳凛。看下圖:
運行程序梳杏,現(xiàn)在我們可以進行評分修改功能了韧拒,在右側詳情視圖的操作都會保存到數(shù)據(jù)模型中,并且會影響到左側table view 數(shù)據(jù)展示十性。
好了叛溢,現(xiàn)在我們只剩下最后一件事情了:允許用戶更換圖片! 那么我們先在image view下添加一個按鈕來讓用戶點擊劲适,當用戶點選按鈕時楷掉,我們要給用戶提供一個圖片選擇的窗口。
2.7 為新添加的按鈕增加事件處理:(與之前的+按鈕操作相同)代碼如下:
在按鈕響應的方法里霞势,我們使用了一個新的控件類:IKPictureTaker烹植,這個控件可以讓你從電腦中選取圖片或者從攝像頭拍照,當用完成圖片選擇時愕贡,IKPictuerTaker會調用代理回調方法通知控制器草雕,關于IKPictureTaker更詳細的使用方法,有興趣的可以到這個鏈接學習IKPictureTaker
為了能夠讓IKPictureTaker正常使用固以,需要導入#import <Quartz/Quartz.h> 并且要手動添加Quartz.framework到工程項目中
經(jīng)過上面的設置墩虹,現(xiàn)在運行程序嘱巾,如果沒有出錯,你就可以得到一個可以進行圖片替換啦
關于本篇的代碼诫钓,可以從github上下載demo code
到這里大家已經(jīng)算初步入門了旬昭,這僅僅是個開始,后面還有一篇關于應用的細化小知識尖坤,抽空翻譯整理后再補上...?