在這一篇中,我們使用一個開源控件EDStarRating對Bug進行rate的設置,你可以從這里下載Demo Resources,解壓后拖入工程。
2.1 創建新的分組:Views, Helpers,Art,并將文件組織如下:
開始創建ScaryBugs詳情展示部分,這就開始動手吧^_^
在iOS中,如果想展示下一個界面,一般需要創建兩個不同的view,在用戶操作table view的某一行時,切換不同的view來進行顯示。
在OSX中,有一點不同,因為沒有像iphone那樣屏幕尺寸的限制,所以,只需要把view弄的再大一些我們可以在同一個view中添加更多的的內容。
2.2 選中MasterViewController.xib 選中view,然后把它拖動的更寬更高,不必在意具體的尺寸細節,要能夠放下新的控件就可以。
2.3 添加新控件:我們需要顯示的詳情內容有bugs的名字(name),圖片(image),和評分(rating),額外的,我們還需要添加兩個Label來說明一下每個區域的含義,界面的最終樣子大概如下圖
對于名字 (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數據,并展示詳情視圖信息,這里我們要處理三個環節:
第一,我們要知道table view 的哪一行被點選了。當table view被選中某行的時候,它會告知它的delegate,通過tableViewSelectionDidChange方法告知被選中的行(row),我們需要在這個方法處理。
第二,我們要獲取選中行相關的數據
第三,根據數據,顯示詳情視圖信息
2.5 MasterViewController.m中的代碼實現
在Mac OSX10.10 之前,初始化view的代碼需要寫在控制器的loadView方法中,現在編譯運行,隨意點選table view 中的某一行,我們就可以看到實際效果了
由于image view 默認沒有縮放圖片,導致圖片看起來比較小,我們可以在xib中選中image view 設置它的“Scaling”屬性,達到想要的效果
再次運行,查看效果
現在你可以點擊某一行,右邊將會顯示出對應的界面效果,你也可以更改名稱里的文字和評分,但它們都不會有什么效果,下面我們來實現添加和刪除的功能
首先我們要添加兩個按鈕(Gradient Button),一個增加新行,設置image為 NSAddTemplate,另一個刪除選中行,設置image 為NSRemoveTemplate ,效果如下:
2.6 在MasterViewController.m中分別為兩個按鈕添加操作方法(為按鈕添加方法的步驟與iOS相同,選中按鈕控件,按住control鍵拖拽到對應文件類中)addBug 和deleteBug,代碼如下:
點擊運行,如果沒有錯誤的話,我們就可以通過+按鈕來添加一個新行,-按鈕來刪除選中的行?,F在我們已經實現在table view 中添加或者刪除數據來,那么接下來,我們來實現編輯現有的數據功能,同樣,我們要為NSTextField添加事件監聽方法(與iOS的UITextField一樣)
再次運行程序,沒有錯誤的話,我們可以在右側詳情視圖的text field中修改左側table view 選中行的名稱了。接下來我們實現修改評分功能,這個非常容易,只要實現EDStarRating控件的一個代理方法就夠啦。看下圖:
運行程序,現在我們可以進行評分修改功能了,在右側詳情視圖的操作都會保存到數據模型中,并且會影響到左側table view 數據展示。
好了,現在我們只剩下最后一件事情了:允許用戶更換圖片! 那么我們先在image view下添加一個按鈕來讓用戶點擊,當用戶點選按鈕時,我們要給用戶提供一個圖片選擇的窗口。
2.7 為新添加的按鈕增加事件處理:(與之前的+按鈕操作相同)代碼如下:
在按鈕響應的方法里,我們使用了一個新的控件類:IKPictureTaker,這個控件可以讓你從電腦中選取圖片或者從攝像頭拍照,當用完成圖片選擇時,IKPictuerTaker會調用代理回調方法通知控制器,關于IKPictureTaker更詳細的使用方法,有興趣的可以到這個鏈接學習IKPictureTaker
為了能夠讓IKPictureTaker正常使用,需要導入#import <Quartz/Quartz.h> 并且要手動添加Quartz.framework到工程項目中
經過上面的設置,現在運行程序,如果沒有出錯,你就可以得到一個可以進行圖片替換啦
關于本篇的代碼,可以從github上下載demo code
到這里大家已經算初步入門了,這僅僅是個開始,后面還有一篇關于應用的細化小知識,抽空翻譯整理后再補上...?