周末閑暇,在網上看到一篇Mac開發教程How to Make a Simple Mac App on OS X 10.7 Tutorial: Part 1/3,鑒于Mac開發資料較少,翻譯整理,也算是自己練習的一個過程記錄。
學習目標:
通過本文,你可以創建你的第一個Mac Application,編譯并指定版本號,而且經過練習,你應該掌握:
1. 如何使用Xcode 創建Mac app
2. 一個Mac app 的基本結構
3. ?Mac OSX開發與iOS開發的不同
4. 怎樣使用Table Views (比如添加或者刪除行)
5. 怎樣使用文本(text field),按鈕(button),圖片(image view)
6. 圖片(image view)的獲取方式(從硬盤或者攝像頭)
7. 窗口(window)的尺寸控制
實踐開始:
創建一個Mac工程其實與iOS工程非常相似,都使用Xcode,只是選擇的工程模版不同??
1.1 首先開啟Xcode 創建工程
1.2 選擇mac OS 標簽,Application欄中的Cocoa Application 然后點擊next下一步
1.3 配置工程信息和開發語言(本文根據英文原文,使用Objective-C 開發)
1.4 選擇保存的文件夾路徑后,點擊Create完成工程創建
項目就緒,現在你已經擁有一個具有空窗口的Mac Application了,點擊運行,Xcode將開始編譯這個App,當Xcode編譯完成后,你就可以看到這個App的主窗口了(盡管它上面空空如也),到這步,對你來說意味著三件事:
1. 選擇模版沒有出錯并且它能正常工作
2. 一個好的編譯開端:盡管這是一個空窗口項目
3. 與iOS開發有很多不同:Mac開發的窗口(window)不像iPhone或iPad固定屏幕尺寸,它完全可變的;Mac app 可以擁有多個窗口(window),你也可以最小化窗口(window)等操作
下面我們要使用窗口(window)來做寫練習,顯示一些信息,正如iOS開發一樣,我們接下來創建一個View Controller,在這個view中,我們可以設置app的UI。
1.5 添加一個新的View Controller:菜單欄中 選擇File/New/File...
1.6 命名新添加的類命名MasterViewController 繼承自父類NSViewController,并使用Xib描述UI
1.7 選擇保存路徑后,點擊create,完成創建
1.8 Xcode工程添加MasterViewController后,應該類似下圖
1.9 選中MasterViewController.xib,因為我們這個工程練習需要顯示一些Bugs信息列表,所以需要一個table view,在Mac中,這個控件叫做NSTableView(類似iOS中的UITableview)。可能你已經意識到了,在iOS中你熟知的許多UIKit控件,就是脫生于Mac OSX 的AppKit,只是把原來在Mac OSX中的NS前綴改為UI前綴而已,因此,多數情況下,你在iOS中經常用的控件基本上Mac上已經存在了,試著使用NS來代替UI開頭查找一下,你會驚訝的發現許多控件:NSScrollView, NSLabel, NSButton 等,但要注意,這些控件的API可能在Mac環境中會與iOS原本的有很多不同。現在,拖動table view到xib面板的view中,隨便放個地方就可以(在后面我們會學習處理它)
現在你已經擁有一個view,并且它上面有個table view,但是它并不能顯示出來。這是因為你并沒有將MasterViewController 添加到主窗口(main window),這一步,需要在AppDelegate中進行。為了使用view Controller, 就要讓App Delegate 知道它的存在,因此你需要做第一步就是在AppDelegate.m中導入view controller的頭文件
1.10 在AppDelegate.m文件中,導入MasterViewController,并創建成員屬性
現在Application Delegate 已經擁有了MasterViewController 屬性,但是這并不能顯示(被view controller管理的)視圖到應用程序的屏幕上,我們還需要通過實例化這個屬性來創建一個新的view,并需要將新創建出來的view 添加到應用的主窗口中才可以。那么我們在什么時刻做這些事情比較合適呢?
當應用程序(Application)啟動后,操作系統會調AppDelegate的這個方法“applicationDidFinishLaunching”,在這里我們可以編寫一些初始化代碼,保證應用在啟動后會執行(僅且一次),對應熟悉iOS開發的來說,這與iOS中的– (BOOL)application:didFinishLaunchingWithOptions:launchOptions方法作用相等。
1.11 創建view controller 并添加view到window中
上面的代碼做了三個操作:
1. 使用initWithNibName:方法從nib(就是我們創建控制器時的Xib)文件中創建了一個新的view Controller。
2. 將控制的view 添加到主窗口的容器視圖(contentView)中。
3. 設置控制器view的大小與主窗口相等。
在OSX中,窗口(NSWindow class)總是會默創建一個view,叫做contentView,它的尺寸自動跟隨窗口變化,如果想添加view到窗口中,那么要使用addSubView方法把它們加到contentView。到此,與iOS開發比較,你會發現一些不同,在iOS中需要設置窗口的根控制器(rootViewController),但在OSX中并不存在根控制器,因此需要將view添加到窗口的contentview中。
1.12 點擊運行,在主窗口將會顯示帶有table View的視圖
上面的運行結果顯示了一個空的table View,為了能夠顯示一些我們想看的結果,我們需要一些數據,但在創建數據模型之前,我們先來組織一下工程結構,目前我們的工程目錄結構是這樣的:
Xcode默認的工程模版只會根據應用名創建組(Group)和一個子組supporting files ,當我們的工程不斷變大時,必須處理大量的文件,這樣查找需要的文件會變得非常困難。下面我們展示一種組織工程文件的方式:分組
首先在 ScrayBugsMac組 點擊鼠標右鍵,在彈出菜單中選擇“New Group” 創建一個名字為“GUI”的新組
將我們的一些文件(( AppDelegate.h/.m , MasterViewController.h/.m/.xib 和 MainMenu.xib)直接拖動到這個新組中
同樣的方法,我們在ScrayBugsMac組中再創建一個Model組,用來放置后面需要用到的數據模型
1.13 在工程目錄中,右鍵點擊Model組 ,選擇“New file...”,然后選擇macOS/Cocoa Class
1.14 為文件命名為ScaryBugData,并繼承自NSObject
1.15 在最后的窗口中,點擊create,完成ScaryBugData創建,工程看起來應該像下這樣:
1.16 為ScrayBugData編寫代碼,添加兩個屬性:title和rating 以及一個便捷初始化方法
ScrayBugData 是我們創建的第一個數據模型對象,我們用這個數據模型保存Bug的名稱和標記Bug的重要程度,并為這個數據模型添加了一個自定義的初始化方法:- (instancetype)initWithTitle:(NSString *)title rating:(float)rating
strong :系統的runtime會自動保持對其進行強引用(ARC)
assign:基本數據類型(非對象類型)使用,不會觸發內存管理問題(不會納入到ARC中)
1.17 使用同樣的步驟,我們再創建另一個數據模型ScaryBugsDoc,并編寫代碼,結果如下:
至此,我們已經完成了數據模型的構建。這時我們最好編譯運行一下項目工程,以確保我們做的這些操作都沒什么問題,雖然窗口里table View仍然是空的,這是因為我們并沒有把數據模型和UI連接在一起。接下來,我們為MasterViewController 添加一個數組屬性,用來存儲許多ScaryBugDoc類型的數據模型
1.18 在項目工程中選中MasterViewController.h文件,添加一個bugs屬性
現在MasterViewController 已經準備好接收數據,我們需要把圖片資源添加到工程中(你也可以自己找些喜歡的圖片也可以從來這里下載我們使用的示例圖片),拖動你下載好的圖片到工程時,要確保“Copy items if needed”
1.19 現在我們可以創建一些演示數據了,選擇AppDelegate.m,導入ScaryBugsDoc.h,并創建演示數據:
運行程序,確保上面我們做的設置沒有錯誤。為了能夠顯示需要的Bug 列表,我們要讓table view 從模型中獲取數據。在OSX中table view 控件是NSTableView,它類似iOS中的UITableView,不同的是在NSTableView的一行(row)中可以有很多列(column)
1.20 選中table view,設置它的UI屬性:只顯示1列(column),去除header,每行交替色差效果
1.21 設置table view cell:添加新的cell:Image&Text Table Cell,并設置它的高度為32。
1.22 設置table column的重用標識(類似iOS中cell 的identify):
到此,關于table view 的UI,我們都完成了,點擊運行,確保設置正確,效果如下:
與iOS相似,NSTableView 也有數據源和代理這兩個屬性,現在我們需要將MasterViewController設置為table view 的數據源和代理(通常情況下,table view的數據源和代理都是控制器),這一步可以通過代碼設置,也可以在xib圖形界面中設置:
1.23 選中MasterViewController.m文件,編寫代碼:
1.24 點擊運行,如果設置都正確的話,你將看到一個帶有圖片和文字的table view:
你可以從這里下載到整個項目的demo:github 代碼示例
下一篇,我們將對table view 列表進行添加,編輯,刪除的操作已經窗口尺寸的適配,未完待續...