一步一步,開始上手Mac 開發(二)

在這一篇中,我們使用一個開源控件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,然后把它拖動的更寬更高,不必在意具體的尺寸細節,要能夠放下新的控件就可以。

拖拽后的view


2.3 添加新控件:我們需要顯示的詳情內容有bugs的名字(name),圖片(image),和評分(rating),額外的,我們還需要添加兩個Label來說明一下每個區域的含義,界面的最終樣子大概如下圖

對于名字 (name) 我們使用NSTextField 控件,它具有顯示和編輯的功能

對應圖片(image)我們使用控件NSImageView

對應評分(rating)我們使用導入的開源控件EDStarRating 控件,為此我們需要從控件庫中拖拽一個叫做“Custom View”的控件,后面再設置它

添加控件后的view

2.4 設置EDStarRating控件,并修改label的文字

上一步里的Custom View是NSView類型,我們需要把它指定為EDStarRating

然后我們把第一個label名稱改為Name,第二個labe的名稱改為Rating

設置EDStarRating和label

編譯運行程序,如果沒有錯誤,界面大概是下面的樣子

運行結果

?? Rating下面的控件不見了!別擔心,它就在那里,只是我們還沒有對它進行設置,接下來我們給控件來綁定到控制器的屬性。

記得import EDStarRating.h頭文件

設置IBOutlet 屬性

當用戶點擊table view的任意一行時,我們要獲取用戶選中的Bug數據,并展示詳情視圖信息,這里我們要處理三個環節:

第一,我們要知道table view 的哪一行被點選了。當table view被選中某行的時候,它會告知它的delegate,通過tableViewSelectionDidChange方法告知被選中的行(row),我們需要在這個方法處理。

第二,我們要獲取選中行相關的數據

第三,根據數據,顯示詳情視圖信息

2.5 MasterViewController.m中的代碼實現

MasterViewController.m中的代碼實現

在Mac OSX10.10 之前,初始化view的代碼需要寫在控制器的loadView方法中,現在編譯運行,隨意點選table view 中的某一行,我們就可以看到實際效果了

運行效果

由于image view 默認沒有縮放圖片,導致圖片看起來比較小,我們可以在xib中選中image view 設置它的“Scaling”屬性,達到想要的效果

調整image view 的Scaling

再次運行,查看效果

設置image view 后的運行效果

現在你可以點擊某一行,右邊將會顯示出對應的界面效果,你也可以更改名稱里的文字和評分,但它們都不會有什么效果,下面我們來實現添加和刪除的功能

首先我們要添加兩個按鈕(Gradient Button),一個增加新行,設置image為 NSAddTemplate,另一個刪除選中行,設置image 為NSRemoveTemplate ,效果如下:

拖拽兩個按鈕并設置

2.6 在MasterViewController.m中分別為兩個按鈕添加操作方法(為按鈕添加方法的步驟與iOS相同,選中按鈕控件,按住control鍵拖拽到對應文件類中)addBug 和deleteBug,代碼如下:

按鈕添加操作方法

點擊運行,如果沒有錯誤的話,我們就可以通過+按鈕來添加一個新行,-按鈕來刪除選中的行?,F在我們已經實現在table view 中添加或者刪除數據來,那么接下來,我們來實現編輯現有的數據功能,同樣,我們要為NSTextField添加事件監聽方法(與iOS的UITextField一樣)

NSTextField 添加事件響應方法

再次運行程序,沒有錯誤的話,我們可以在右側詳情視圖的text field中修改左側table view 選中行的名稱了。接下來我們實現修改評分功能,這個非常容易,只要實現EDStarRating控件的一個代理方法就夠啦。看下圖:

EDStarRatingProtocol 方法實現

運行程序,現在我們可以進行評分修改功能了,在右側詳情視圖的操作都會保存到數據模型中,并且會影響到左側table view 數據展示。

好了,現在我們只剩下最后一件事情了:允許用戶更換圖片! 那么我們先在image view下添加一個按鈕來讓用戶點擊,當用戶點選按鈕時,我們要給用戶提供一個圖片選擇的窗口。

添加Push Button

2.7 為新添加的按鈕增加事件處理:(與之前的+按鈕操作相同)代碼如下:

Change picture 按鈕事件處理

在按鈕響應的方法里,我們使用了一個新的控件類:IKPictureTaker,這個控件可以讓你從電腦中選取圖片或者從攝像頭拍照,當用完成圖片選擇時,IKPictuerTaker會調用代理回調方法通知控制器,關于IKPictureTaker更詳細的使用方法,有興趣的可以到這個鏈接學習IKPictureTaker

為了能夠讓IKPictureTaker正常使用,需要導入#import <Quartz/Quartz.h> 并且要手動添加Quartz.framework到工程項目中

添加Quartz.framework

經過上面的設置,現在運行程序,如果沒有出錯,你就可以得到一個可以進行圖片替換啦

關于本篇的代碼,可以從github上下載demo code

到這里大家已經算初步入門了,這僅僅是個開始,后面還有一篇關于應用的細化小知識,抽空翻譯整理后再補上...?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,656評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,697評論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,098評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,855評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,254評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,473評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,014評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,273評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2 374

推薦閱讀更多精彩內容