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

周末閑暇,在網上看到一篇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 創建工程

創建新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

創建MasterViewController

1.7 選擇保存路徑后,點擊create,完成創建

點擊create 完成創建

1.8 Xcode工程添加MasterViewController后,應該類似下圖

添加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中,隨便放個地方就可以(在后面我們會學習處理它)

選擇table 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中

添加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

創建ScaryBugData

1.15 在最后的窗口中,點擊create,完成ScaryBugData創建,工程看起來應該像下這樣:

創建ScaryBugData后的工程

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

ScrayBugsMac的.h和.m

ScrayBugData 是我們創建的第一個數據模型對象,我們用這個數據模型保存Bug的名稱和標記Bug的重要程度,并為這個數據模型添加了一個自定義的初始化方法:- (instancetype)initWithTitle:(NSString *)title rating:(float)rating

strong :系統的runtime會自動保持對其進行強引用(ARC)

assign:基本數據類型(非對象類型)使用,不會觸發內存管理問題(不會納入到ARC中)

1.17 使用同樣的步驟,我們再創建另一個數據模型ScaryBugsDoc,并編寫代碼,結果如下:

ScaryBugsDoc的.h文件和.m文件

至此,我們已經完成了數據模型的構建。這時我們最好編譯運行一下項目工程,以確保我們做的這些操作都沒什么問題,雖然窗口里table View仍然是空的,這是因為我們并沒有把數據模型和UI連接在一起。接下來,我們為MasterViewController 添加一個數組屬性,用來存儲許多ScaryBugDoc類型的數據模型

1.18 在項目工程中選中MasterViewController.h文件,添加一個bugs屬性

MasterViewController.h

現在MasterViewController 已經準備好接收數據,我們需要把圖片資源添加到工程中(你也可以自己找些喜歡的圖片也可以從來這里下載我們使用的示例圖片),拖動你下載好的圖片到工程時,要確保“Copy items if needed”

拖動圖片到項目中時的選項界面

1.19 現在我們可以創建一些演示數據了,選擇AppDelegate.m,導入ScaryBugsDoc.h,并創建演示數據:

AppDelegate.m文件

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

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

Tableview 設置?

1.21 設置table view cell:添加新的cell:Image&Text Table Cell,并設置它的高度為32。

添加新的cell,并設置高度值32

1.22 設置table column的重用標識(類似iOS中cell 的identify):

設置column的identity

到此,關于table view 的UI,我們都完成了,點擊運行,確保設置正確,效果如下:

table view 設置后運行效果

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

設置table view 的數據源和代理屬性

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

實現table view 的數據源和代理方法

1.24 點擊運行,如果設置都正確的話,你將看到一個帶有圖片和文字的table view:

最終運行結果

你可以從這里下載到整個項目的demo:github 代碼示例

下一篇,我們將對table view 列表進行添加,編輯,刪除的操作已經窗口尺寸的適配,未完待續...

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

推薦閱讀更多精彩內容