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

周末閑暇僚害,在網(wǎng)上看到一篇Mac開發(fā)教程How to Make a Simple Mac App on OS X 10.7 Tutorial: Part 1/3摸航,鑒于Mac開發(fā)資料較少奥帘,翻譯整理铜邮,也算是自己練習(xí)的一個(gè)過程記錄。

學(xué)習(xí)目標(biāo):

通過本文寨蹋,你可以創(chuàng)建你的第一個(gè)Mac Application松蒜,編譯并指定版本號(hào),而且經(jīng)過練習(xí)钥庇,你應(yīng)該掌握:

1. 如何使用Xcode 創(chuàng)建Mac app

2. 一個(gè)Mac app 的基本結(jié)構(gòu)

3. ?Mac OSX開發(fā)與iOS開發(fā)的不同

4. 怎樣使用Table Views (比如添加或者刪除行)

5. 怎樣使用文本(text field)牍鞠,按鈕(button),圖片(image view)

6. 圖片(image view)的獲取方式(從硬盤或者攝像頭)

7. 窗口(window)的尺寸控制

實(shí)踐開始:

創(chuàng)建一個(gè)Mac工程其實(shí)與iOS工程非常相似评姨,都使用Xcode,只是選擇的工程模版不同??

1.1 首先開啟Xcode 創(chuàng)建工程

創(chuàng)建新Xcode 工程

1.2 選擇mac OS 標(biāo)簽萤晴,Application欄中的Cocoa Application 然后點(diǎn)擊next下一步

選取工程模版

1.3 配置工程信息和開發(fā)語言(本文根據(jù)英文原文吐句,使用Objective-C 開發(fā))

配置項(xiàng)目工程信息

1.4 選擇保存的文件夾路徑后,點(diǎn)擊Create完成工程創(chuàng)建

創(chuàng)建后的界面

項(xiàng)目就緒店读,現(xiàn)在你已經(jīng)擁有一個(gè)具有空窗口的Mac Application了嗦枢,點(diǎn)擊運(yùn)行,Xcode將開始編譯這個(gè)App屯断,當(dāng)Xcode編譯完成后文虏,你就可以看到這個(gè)App的主窗口了(盡管它上面空空如也),到這步殖演,對(duì)你來說意味著三件事:

1. 選擇模版沒有出錯(cuò)并且它能正常工作

2. 一個(gè)好的編譯開端:盡管這是一個(gè)空窗口項(xiàng)目

3. 與iOS開發(fā)有很多不同:Mac開發(fā)的窗口(window)不像iPhone或iPad固定屏幕尺寸氧秘,它完全可變的;Mac app 可以擁有多個(gè)窗口(window)趴久,你也可以最小化窗口(window)等操作

下面我們要使用窗口(window)來做寫練習(xí)丸相,顯示一些信息,正如iOS開發(fā)一樣彼棍,我們接下來創(chuàng)建一個(gè)View Controller灭忠,在這個(gè)view中膳算,我們可以設(shè)置app的UI。

1.5 添加一個(gè)新的View Controller:菜單欄中 選擇File/New/File...

選擇文件模版

1.6 命名新添加的類命名MasterViewController 繼承自父類NSViewController弛作,并使用Xib描述UI

創(chuàng)建MasterViewController

1.7 選擇保存路徑后涕蜂,點(diǎn)擊create,完成創(chuàng)建

點(diǎn)擊create 完成創(chuàng)建

1.8 Xcode工程添加MasterViewController后映琳,應(yīng)該類似下圖

添加MasterViewController后的界面

1.9 選中MasterViewController.xib机隙,因?yàn)槲覀冞@個(gè)工程練習(xí)需要顯示一些Bugs信息列表,所以需要一個(gè)table view刊头,在Mac中黍瞧,這個(gè)控件叫做NSTableView(類似iOS中的UITableview)≡樱可能你已經(jīng)意識(shí)到了印颤,在iOS中你熟知的許多UIKit控件,就是脫生于Mac OSX 的AppKit穿肄,只是把原來在Mac OSX中的NS前綴改為UI前綴而已年局,因此,多數(shù)情況下咸产,你在iOS中經(jīng)常用的控件基本上Mac上已經(jīng)存在了矢否,試著使用NS來代替UI開頭查找一下,你會(huì)驚訝的發(fā)現(xiàn)許多控件:NSScrollView, NSLabel, NSButton 等脑溢,但要注意僵朗,這些控件的API可能在Mac環(huán)境中會(huì)與iOS原本的有很多不同。現(xiàn)在屑彻,拖動(dòng)table view到xib面板的view中验庙,隨便放個(gè)地方就可以(在后面我們會(huì)學(xué)習(xí)處理它)

選擇table view

現(xiàn)在你已經(jīng)擁有一個(gè)view,并且它上面有個(gè)table view社牲,但是它并不能顯示出來粪薛。這是因?yàn)槟悴]有將MasterViewController 添加到主窗口(main window),這一步搏恤,需要在AppDelegate中進(jìn)行违寿。為了使用view Controller, 就要讓App Delegate 知道它的存在熟空,因此你需要做第一步就是在AppDelegate.m中導(dǎo)入view controller的頭文件

1.10 在AppDelegate.m文件中藤巢,導(dǎo)入MasterViewController,并創(chuàng)建成員屬性

現(xiàn)在Application Delegate 已經(jīng)擁有了MasterViewController 屬性痛阻,但是這并不能顯示(被view controller管理的)視圖到應(yīng)用程序的屏幕上菌瘪,我們還需要通過實(shí)例化這個(gè)屬性來創(chuàng)建一個(gè)新的view,并需要將新創(chuàng)建出來的view 添加到應(yīng)用的主窗口中才可以。那么我們?cè)谑裁磿r(shí)刻做這些事情比較合適呢俏扩?

當(dāng)應(yīng)用程序(Application)啟動(dòng)后糜工,操作系統(tǒng)會(huì)調(diào)AppDelegate的這個(gè)方法“applicationDidFinishLaunching”,在這里我們可以編寫一些初始化代碼录淡,保證應(yīng)用在啟動(dòng)后會(huì)執(zhí)行(僅且一次)捌木,對(duì)應(yīng)熟悉iOS開發(fā)的來說,這與iOS中的– (BOOL)application:didFinishLaunchingWithOptions:launchOptions方法作用相等嫉戚。

1.11 創(chuàng)建view controller 并添加view到window中

添加controller的view 到window中

上面的代碼做了三個(gè)操作:

1. 使用initWithNibName:方法從nib(就是我們創(chuàng)建控制器時(shí)的Xib)文件中創(chuàng)建了一個(gè)新的view Controller刨裆。

2. 將控制的view 添加到主窗口的容器視圖(contentView)中。

3. 設(shè)置控制器view的大小與主窗口相等彬檀。

在OSX中帆啃,窗口(NSWindow class)總是會(huì)默創(chuàng)建一個(gè)view,叫做contentView窍帝,它的尺寸自動(dòng)跟隨窗口變化努潘,如果想添加view到窗口中,那么要使用addSubView方法把它們加到contentView坤学。到此疯坤,與iOS開發(fā)比較,你會(huì)發(fā)現(xiàn)一些不同深浮,在iOS中需要設(shè)置窗口的根控制器(rootViewController)压怠,但在OSX中并不存在根控制器,因此需要將view添加到窗口的contentview中飞苇。

1.12 點(diǎn)擊運(yùn)行菌瘫,在主窗口將會(huì)顯示帶有table View的視圖

運(yùn)行結(jié)果

上面的運(yùn)行結(jié)果顯示了一個(gè)空的table View,為了能夠顯示一些我們想看的結(jié)果布卡,我們需要一些數(shù)據(jù)突梦,但在創(chuàng)建數(shù)據(jù)模型之前,我們先來組織一下工程結(jié)構(gòu)羽利,目前我們的工程目錄結(jié)構(gòu)是這樣的:

項(xiàng)目工程目錄結(jié)構(gòu)

Xcode默認(rèn)的工程模版只會(huì)根據(jù)應(yīng)用名創(chuàng)建組(Group)和一個(gè)子組supporting files ,當(dāng)我們的工程不斷變大時(shí)刊懈,必須處理大量的文件这弧,這樣查找需要的文件會(huì)變得非常困難。下面我們展示一種組織工程文件的方式:分組

首先在 ScrayBugsMac組 點(diǎn)擊鼠標(biāo)右鍵虚汛,在彈出菜單中選擇“New Group” 創(chuàng)建一個(gè)名字為“GUI”的新組

將我們的一些文件(( AppDelegate.h/.m , MasterViewController.h/.m/.xib 和 MainMenu.xib)直接拖動(dòng)到這個(gè)新組中

同樣的方法匾浪,我們?cè)赟crayBugsMac組中再創(chuàng)建一個(gè)Model組,用來放置后面需要用到的數(shù)據(jù)模型

整理后的工程目錄

1.13 在工程目錄中卷哩,右鍵點(diǎn)擊Model組 蛋辈,選擇“New file...”,然后選擇macOS/Cocoa Class

選擇文件模版

1.14 為文件命名為ScaryBugData,并繼承自NSObject

創(chuàng)建ScaryBugData

1.15 在最后的窗口中,點(diǎn)擊create冷溶,完成ScaryBugData創(chuàng)建渐白,工程看起來應(yīng)該像下這樣:

創(chuàng)建ScaryBugData后的工程

1.16 為ScrayBugData編寫代碼,添加兩個(gè)屬性:title和rating 以及一個(gè)便捷初始化方法

ScrayBugsMac的.h和.m

ScrayBugData 是我們創(chuàng)建的第一個(gè)數(shù)據(jù)模型對(duì)象逞频,我們用這個(gè)數(shù)據(jù)模型保存Bug的名稱和標(biāo)記Bug的重要程度纯衍,并為這個(gè)數(shù)據(jù)模型添加了一個(gè)自定義的初始化方法:- (instancetype)initWithTitle:(NSString *)title rating:(float)rating

strong :系統(tǒng)的runtime會(huì)自動(dòng)保持對(duì)其進(jìn)行強(qiáng)引用(ARC)

assign:基本數(shù)據(jù)類型(非對(duì)象類型)使用,不會(huì)觸發(fā)內(nèi)存管理問題(不會(huì)納入到ARC中)

1.17 使用同樣的步驟苗胀,我們?cè)賱?chuàng)建另一個(gè)數(shù)據(jù)模型ScaryBugsDoc襟诸,并編寫代碼,結(jié)果如下:

ScaryBugsDoc的.h文件和.m文件

至此基协,我們已經(jīng)完成了數(shù)據(jù)模型的構(gòu)建歌亲。這時(shí)我們最好編譯運(yùn)行一下項(xiàng)目工程,以確保我們做的這些操作都沒什么問題澜驮,雖然窗口里table View仍然是空的陷揪,這是因?yàn)槲覀儾]有把數(shù)據(jù)模型和UI連接在一起。接下來泉唁,我們?yōu)镸asterViewController 添加一個(gè)數(shù)組屬性鹅龄,用來存儲(chǔ)許多ScaryBugDoc類型的數(shù)據(jù)模型

1.18 在項(xiàng)目工程中選中MasterViewController.h文件,添加一個(gè)bugs屬性

MasterViewController.h

現(xiàn)在MasterViewController 已經(jīng)準(zhǔn)備好接收數(shù)據(jù)亭畜,我們需要把圖片資源添加到工程中(你也可以自己找些喜歡的圖片也可以從來這里下載我們使用的示例圖片)扮休,拖動(dòng)你下載好的圖片到工程時(shí),要確彼┩遥“Copy items if needed”

拖動(dòng)圖片到項(xiàng)目中時(shí)的選項(xiàng)界面

1.19 現(xiàn)在我們可以創(chuàng)建一些演示數(shù)據(jù)了玷坠,選擇AppDelegate.m,導(dǎo)入ScaryBugsDoc.h,并創(chuàng)建演示數(shù)據(jù):

AppDelegate.m文件

運(yùn)行程序劲藐,確保上面我們做的設(shè)置沒有錯(cuò)誤八堡。為了能夠顯示需要的Bug 列表,我們要讓table view 從模型中獲取數(shù)據(jù)聘芜。在OSX中table view 控件是NSTableView兄渺,它類似iOS中的UITableView,不同的是在NSTableView的一行(row)中可以有很多列(column)

1.20 選中table view汰现,設(shè)置它的UI屬性:只顯示1列(column)挂谍,去除header,每行交替色差效果

Tableview 設(shè)置?

1.21 設(shè)置table view cell:添加新的cell:Image&Text Table Cell瞎饲,并設(shè)置它的高度為32口叙。

添加新的cell,并設(shè)置高度值32

1.22 設(shè)置table column的重用標(biāo)識(shí)(類似iOS中cell 的identify):

設(shè)置column的identity

到此嗅战,關(guān)于table view 的UI妄田,我們都完成了,點(diǎn)擊運(yùn)行,確保設(shè)置正確疟呐,效果如下:

table view 設(shè)置后運(yùn)行效果

與iOS相似脚曾,NSTableView 也有數(shù)據(jù)源和代理這兩個(gè)屬性,現(xiàn)在我們需要將MasterViewController設(shè)置為table view 的數(shù)據(jù)源和代理(通常情況下萨醒,table view的數(shù)據(jù)源和代理都是控制器)斟珊,這一步可以通過代碼設(shè)置,也可以在xib圖形界面中設(shè)置:

設(shè)置table view 的數(shù)據(jù)源和代理屬性

1.23 選中MasterViewController.m文件富纸,編寫代碼:

實(shí)現(xiàn)table view 的數(shù)據(jù)源和代理方法

1.24 點(diǎn)擊運(yùn)行囤踩,如果設(shè)置都正確的話,你將看到一個(gè)帶有圖片和文字的table view:

最終運(yùn)行結(jié)果

你可以從這里下載到整個(gè)項(xiàng)目的demo:github 代碼示例

下一篇晓褪,我們將對(duì)table view 列表進(jìn)行添加堵漱,編輯,刪除的操作已經(jīng)窗口尺寸的適配涣仿,未完待續(xù)...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末勤庐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子好港,更是在濱河造成了極大的恐慌愉镰,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钧汹,死亡現(xiàn)場(chǎng)離奇詭異丈探,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)拔莱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門碗降,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人塘秦,你說我怎么就攤上這事讼渊。” “怎么了尊剔?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵爪幻,是天一觀的道長。 經(jīng)常有香客問我须误,道長笔咽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任霹期,我火速辦了婚禮,結(jié)果婚禮上拯田,老公的妹妹穿的比我還像新娘历造。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布吭产。 她就那樣靜靜地躺著侣监,像睡著了一般。 火紅的嫁衣襯著肌膚如雪臣淤。 梳的紋絲不亂的頭發(fā)上橄霉,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音邑蒋,去河邊找鬼姓蜂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛医吊,可吹牛的內(nèi)容都是我干的钱慢。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼卿堂,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼束莫!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起草描,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤览绿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后穗慕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饿敲,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年揍诽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了诀蓉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡暑脆,死狀恐怖渠啤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情添吗,我是刑警寧澤沥曹,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站碟联,受9級(jí)特大地震影響妓美,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鲤孵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一壶栋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧普监,春花似錦贵试、人聲如沸琉兜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽豌蟋。三九已至,卻和暖如春桑滩,著一層夾襖步出監(jiān)牢的瞬間梧疲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來泰國打工运准, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幌氮,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓戳吝,卻偏偏與公主長得像浩销,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子听哭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

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