1.? Xcode是蘋果軟件開發(fā)的集成開發(fā)環(huán)境,可以開發(fā)所有蘋果系統(tǒng)平臺(tái)上的軟件產(chǎn)品包括iOS應(yīng)用,本文講述如何通過Xcode快速開發(fā)一個(gè)具有基本界面的iOS應(yīng)用,學(xué)習(xí)的內(nèi)容如下:
1) 在Xcode創(chuàng)建一個(gè)iOS應(yīng)用項(xiàng)目
2) 了解使用Xcode項(xiàng)目模版所自動(dòng)生成的主要代碼文件和相關(guān)函數(shù)
3) 在模擬器上運(yùn)行APP
4) 在界面資源文件storyboard上增加、移動(dòng)界面元素和改變其大小
5) 在界面資源文件storyboard上通過屬性管理器編輯界面元素的屬性
6) 使用預(yù)覽助手預(yù)覽一個(gè)storyboard界面
7) 使用自動(dòng)布局排布界面自動(dòng)適配用戶設(shè)備的尺寸
2.? 創(chuàng)建一個(gè)新iOS應(yīng)用項(xiàng)目
打開Xcode選擇創(chuàng)建一個(gè)Xcode項(xiàng)目(Create a new Xcode project),選擇iOS->Application,右側(cè)會(huì)看到有5個(gè)模版選項(xiàng),如下圖。

1) Master-Detail應(yīng)用是主從架構(gòu)的應(yīng)用模版
2) Page-Based應(yīng)用是基于書頁的應(yīng)用模版
3) Single-View應(yīng)用是單視圖的應(yīng)用模版
4) Tabbed標(biāo)簽板應(yīng)用模版
5) 游戲應(yīng)用模版
2.1? 本文選擇單視圖應(yīng)用模版,開始創(chuàng)建一個(gè)簡單界面的iOS應(yīng)用。在單視圖模版上可以修改和增加更多視圖從而創(chuàng)建更復(fù)雜的導(dǎo)航架構(gòu)(Navigation)、主從架構(gòu)(Master-Detail)和Tabbar架構(gòu)的界面組合。

2.2? 點(diǎn)擊“Next”按鈕,選擇新項(xiàng)目的存放目錄后,Xcode自動(dòng)生成新項(xiàng)目的文件和資源,如下圖

2.3? 在Xcode左上方選擇模擬器類型

2.4? 點(diǎn)擊Xcode左上方的運(yùn)行按鈕

2.5? 改變模擬器的顯示尺寸

2.6? 模擬器顯示的iOS應(yīng)用

3.? 選擇單視圖模版創(chuàng)建iOS應(yīng)用,Xcode自動(dòng)生成了兩個(gè)swift文件:AppDelegate.swift、ViewController.swift和兩個(gè)storyboard文件:Main.storyboard、LaunchScreen.storyboard。
swift文件的擴(kuò)展名是swift,它是swift的源碼文件。storyboard文件的擴(kuò)展名是storyboard,它是一種可視化界面資源文件,允許包含一個(gè)以上視圖界面。
3.1 AppDelegate.swift文件
提供了兩個(gè)主要功能:1)iOS應(yīng)用的程序入口點(diǎn):使用@UIApplciationMain的聲明,創(chuàng)建一個(gè)程序應(yīng)用對(duì)象負(fù)責(zé)管理整個(gè)應(yīng)用程序的生命周期和一個(gè)應(yīng)用程序代理對(duì)象(app delegate);2)定義AppDelegate類,指定實(shí)現(xiàn)應(yīng)用程序代理對(duì)象的協(xié)議函數(shù):
1)應(yīng)用程序啟動(dòng)完成函數(shù)
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool
2)應(yīng)用程序即將進(jìn)入不活躍狀態(tài)函數(shù)
func applicationWillResignActive(application: UIApplication)
3)應(yīng)用程序進(jìn)入后臺(tái)運(yùn)行函數(shù)
func applicationDidEnterBackground(application: UIApplication)
4)應(yīng)用程序進(jìn)入前端運(yùn)行函數(shù)
func applicationWillEnterForeground(application: UIApplication)
5)應(yīng)用程序進(jìn)入活躍狀態(tài)函數(shù)
func applicationDidBecomeActive(application: UIApplication)
6)應(yīng)用程序即將終止函數(shù)
func applicationWillTerminate(application: UIApplication)
3.2? ViewController.swift文件
單視圖模版創(chuàng)建一個(gè)UIViewController的子類ViewController,其源碼文件前綴名與類名相同(含有大小寫)。iOS應(yīng)用開發(fā)采用MVC設(shè)計(jì)模式,UIViewController類對(duì)應(yīng)于Controller,管理View和調(diào)用Model的方法。ViewController重寫了基類的視圖加載方法viewDidLoad(),
3.3? LaunchScreen.storyboard
應(yīng)用程序的啟動(dòng)界面文件,應(yīng)用啟動(dòng)加載時(shí)調(diào)用該資源文件。
3.4? Main.storyboard
應(yīng)用程序的主界面文件,Xcode缺省創(chuàng)建的主界面文件,用戶可以創(chuàng)建并指定其他名稱的主界面文件。本項(xiàng)目是單視圖模版,在Main.storyboard上顯示的與ViewController綁定的界面。圖中的箭頭表示指向的視圖界面是這個(gè)storyboard文件的入口點(diǎn),是加載storyboard資源時(shí)第一個(gè)加載的視圖。

4.? 創(chuàng)建基本界面
在ViewController視圖上添加按鈕和文字輸入框。iOS中所有視圖對(duì)象都是UIView類或者其子類,文本輸入框UITextField是UIView的子類。
4.1 在界面上添加一個(gè)文本輸入框
1)打開對(duì)象選擇面板,在搜索框輸入“text field”;
2)選中文本輸入框(Text Field)將其拖到ViewController界面上,調(diào)整其大小使其左右邊距在左右藍(lán)色界線上;
3)在屬性編輯面板上修改文本輸入框的信息,在Placeholder處改為“輸入菜名”;
4)確定在選中文本輸入框狀態(tài)下,在屬性編輯面板上“Return Key”處選擇“Done”;
5)在屬性編輯面板上“Auto-enable Return Key”處選中打勾。






4.2? 在界面上添加一個(gè)Label標(biāo)簽
1)打開對(duì)象選擇面板,在搜索框輸入“l(fā)abel”;
2)選中Label標(biāo)簽將其拖到文本輸入框上方,左對(duì)齊于文本輸入框;
3)雙擊Label標(biāo)簽,輸入文字“菜名”。

4.3? 在界面上添加一個(gè)按鈕
1)打開對(duì)象選擇面板,在搜索框輸入“button”;
2)選中按鈕對(duì)象將其拖到文本輸入框下方,左對(duì)齊于文本輸入框;
3)雙擊按鈕,輸入文字“設(shè)置缺省標(biāo)簽文字”。

5.? 預(yù)覽視圖界面
使用助手編輯器預(yù)覽視圖界面
5.1? 點(diǎn)擊右上角的助手編輯器(Assistant editor)

5.2? 點(diǎn)擊編輯器選擇器,選中預(yù)覽Preview。



在預(yù)覽視圖發(fā)現(xiàn)視圖沒有適配不同尺寸的設(shè)備(iPhone和iPad),使用自動(dòng)布局Auto Layout來建立適配不同尺寸設(shè)備的視圖。
6.? 采用自動(dòng)布局Auto Layout
自動(dòng)布局是一個(gè)高效的布局引擎幫助輕松地設(shè)計(jì)適配的布局,使用約束 (constraints)
來描述界面元素的位置以及與其它元素之間的相對(duì)位置。類似堆棧式視圖(UIStackView)的工具可以幫助更有效地實(shí)現(xiàn)自動(dòng)布局,堆棧式視圖可以提供直線式接口用于每一列或者每一行的視圖集合的布局。
6.1? 增加自動(dòng)布局約束
6.1.1? 按住Shift鍵的同時(shí)選中文本輸入框、標(biāo)簽和按鈕;

6.1.2? 點(diǎn)擊底部右側(cè)的Stack按鈕

6.1.3? 選中StackView控件,在屬性編輯器修改Spacing為12


6.1.4? 點(diǎn)擊Pin按鈕;

6.1.5? 按照?qǐng)D示設(shè)置約束,點(diǎn)擊最下方按鈕添加3個(gè)約束。

6.2? 調(diào)整文本輸入框的約束
6.2.1? 選中文本輸入框
6.2.2? 點(diǎn)擊Pin按鈕
6.2.3? 設(shè)置文本輸入框約束
6.2.4? 在選中文本輸入框同時(shí),在尺寸面板上選擇Intrinsic Size為PlaceHolder。



6.3? 最后的預(yù)覽效果
