周末閑暇僚害,在網(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)建工程
1.2 選擇mac OS 標(biāo)簽萤晴,Application欄中的Cocoa Application 然后點(diǎn)擊next下一步
1.3 配置工程信息和開發(fā)語言(本文根據(jù)英文原文吐句,使用Objective-C 開發(fā))
1.4 選擇保存的文件夾路徑后,點(diǎn)擊Create完成工程創(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
1.7 選擇保存路徑后涕蜂,點(diǎn)擊create,完成創(chuàng)建
1.8 Xcode工程添加MasterViewController后映琳,應(yīng)該類似下圖
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í)處理它)
現(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中
上面的代碼做了三個(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é)果顯示了一個(gè)空的table View,為了能夠顯示一些我們想看的結(jié)果布卡,我們需要一些數(shù)據(jù)突梦,但在創(chuàng)建數(shù)據(jù)模型之前,我們先來組織一下工程結(jié)構(gòu)羽利,目前我們的工程目錄結(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
1.15 在最后的窗口中,點(diǎn)擊create冷溶,完成ScaryBugData創(chuàng)建渐白,工程看起來應(yīng)該像下這樣:
1.16 為ScrayBugData編寫代碼,添加兩個(gè)屬性:title和rating 以及一個(gè)便捷初始化方法
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é)果如下:
至此基协,我們已經(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屬性
現(xiàn)在MasterViewController 已經(jīng)準(zhǔn)備好接收數(shù)據(jù)亭畜,我們需要把圖片資源添加到工程中(你也可以自己找些喜歡的圖片也可以從來這里下載我們使用的示例圖片)扮休,拖動(dòng)你下載好的圖片到工程時(shí),要確彼┩遥“Copy items if needed”
1.19 現(xiàn)在我們可以創(chuàng)建一些演示數(shù)據(jù)了玷坠,選擇AppDelegate.m,導(dǎo)入ScaryBugsDoc.h,并創(chuàng)建演示數(shù)據(jù):
運(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,每行交替色差效果
1.21 設(shè)置table view cell:添加新的cell:Image&Text Table Cell瞎饲,并設(shè)置它的高度為32口叙。
1.22 設(shè)置table column的重用標(biāo)識(shí)(類似iOS中cell 的identify):
到此嗅战,關(guān)于table view 的UI妄田,我們都完成了,點(diǎn)擊運(yùn)行,確保設(shè)置正確疟呐,效果如下:
與iOS相似脚曾,NSTableView 也有數(shù)據(jù)源和代理這兩個(gè)屬性,現(xiàn)在我們需要將MasterViewController設(shè)置為table view 的數(shù)據(jù)源和代理(通常情況下萨醒,table view的數(shù)據(jù)源和代理都是控制器)斟珊,這一步可以通過代碼設(shè)置,也可以在xib圖形界面中設(shè)置:
1.23 選中MasterViewController.m文件富纸,編寫代碼:
1.24 點(diǎn)擊運(yùn)行囤踩,如果設(shè)置都正確的話,你將看到一個(gè)帶有圖片和文字的table view:
你可以從這里下載到整個(gè)項(xiàng)目的demo:github 代碼示例
下一篇晓褪,我們將對(duì)table view 列表進(jìn)行添加堵漱,編輯,刪除的操作已經(jīng)窗口尺寸的適配涣仿,未完待續(xù)...