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

在這一篇中购桑,我們使用一個開源控件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é)止潮,要能夠放下新的控件就可以。

拖拽后的view


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

對于名字 (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數(shù)據(jù)某残,并展示詳情視圖信息,這里我們要處理三個環(huán)節(jié):

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

第二囚似,我們要獲取選中行相關的數(shù)據(jù)

第三剩拢,根據(jù)數(shù)據(jù),顯示詳情視圖信息

2.5 MasterViewController.m中的代碼實現(xiàn)

MasterViewController.m中的代碼實現(xiàn)

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

運行效果

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

調整image view 的Scaling

再次運行摸屠,查看效果

設置image view 后的運行效果

現(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一樣)

NSTextField 添加事件響應方法

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

EDStarRatingProtocol 方法實現(xiàn)

運行程序梳杏,現(xiàn)在我們可以進行評分修改功能了韧拒,在右側詳情視圖的操作都會保存到數(shù)據(jù)模型中,并且會影響到左側table view 數(shù)據(jù)展示十性。

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

添加Push Button

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

Change picture 按鈕事件處理

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

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

添加Quartz.framework

經(jīng)過上面的設置墩虹,現(xiàn)在運行程序嘱巾,如果沒有出錯,你就可以得到一個可以進行圖片替換啦

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

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

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稳懒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子慢味,更是在濱河造成了極大的恐慌,老刑警劉巖墅冷,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纯路,死亡現(xiàn)場離奇詭異,居然都是意外死亡寞忿,警方通過查閱死者的電腦和手機驰唬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腔彰,“玉大人叫编,你說我怎么就攤上這事∨祝” “怎么了搓逾?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長杯拐。 經(jīng)常有香客問我霞篡,道長,這世上最難降的妖魔是什么端逼? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任朗兵,我火速辦了婚禮,結果婚禮上顶滩,老公的妹妹穿的比我還像新娘余掖。我一直安慰自己,他們只是感情好礁鲁,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布盐欺。 她就那樣靜靜地躺著,像睡著了一般救氯。 火紅的嫁衣襯著肌膚如雪找田。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天着憨,我揣著相機與錄音墩衙,去河邊找鬼。 笑死,一個胖子當著我的面吹牛漆改,可吹牛的內(nèi)容都是我干的心铃。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼挫剑,長吁一口氣:“原來是場噩夢啊……” “哼去扣!你這毒婦竟也來了?” 一聲冷哼從身側響起樊破,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤愉棱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后哲戚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奔滑,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年顺少,在試婚紗的時候發(fā)現(xiàn)自己被綠了朋其。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡脆炎,死狀恐怖梅猿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秒裕,我是刑警寧澤袱蚓,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站簇爆,受9級特大地震影響癞松,放射性物質發(fā)生泄漏。R本人自食惡果不足惜入蛆,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一响蓉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧哨毁,春花似錦枫甲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至话浇,卻和暖如春脏毯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背幔崖。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工食店, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留渣淤,地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓吉嫩,卻偏偏與公主長得像价认,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子自娩,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容