1.? Xcode是蘋果軟件開發(fā)的集成開發(fā)環(huán)境随闺,可以開發(fā)所有蘋果系統(tǒng)平臺上的軟件產(chǎn)品包括iOS應(yīng)用日川,本文講述如何通過Xcode快速開發(fā)一個具有基本界面的iOS應(yīng)用,學(xué)習(xí)的內(nèi)容如下:
1) 在Xcode創(chuàng)建一個iOS應(yīng)用項目
2) 了解使用Xcode項目模版所自動生成的主要代碼文件和相關(guān)函數(shù)
3) 在模擬器上運行APP
4) 在界面資源文件storyboard上增加矩乐、移動界面元素和改變其大小
5) 在界面資源文件storyboard上通過屬性管理器編輯界面元素的屬性
6) 使用預(yù)覽助手預(yù)覽一個storyboard界面
7) 使用自動布局排布界面自動適配用戶設(shè)備的尺寸
2.? 創(chuàng)建一個新iOS應(yīng)用項目
打開Xcode選擇創(chuàng)建一個Xcode項目(Create a new Xcode project)龄句,選擇iOS->Application,右側(cè)會看到有5個模版選項,如下圖分歇。
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)建一個簡單界面的iOS應(yīng)用。在單視圖模版上可以修改和增加更多視圖從而創(chuàng)建更復(fù)雜的導(dǎo)航架構(gòu)(Navigation)卿樱、主從架構(gòu)(Master-Detail)和Tabbar架構(gòu)的界面組合僚害。
2.2? 點擊“Next”按鈕,選擇新項目的存放目錄后繁调,Xcode自動生成新項目的文件和資源萨蚕,如下圖
2.3? 在Xcode左上方選擇模擬器類型
2.4? 點擊Xcode左上方的運行按鈕
2.5? 改變模擬器的顯示尺寸
2.6? 模擬器顯示的iOS應(yīng)用
3.? 選擇單視圖模版創(chuàng)建iOS應(yīng)用,Xcode自動生成了兩個swift文件:AppDelegate.swift蹄胰、ViewController.swift和兩個storyboard文件:Main.storyboard岳遥、LaunchScreen.storyboard。
swift文件的擴(kuò)展名是swift裕寨,它是swift的源碼文件浩蓉。storyboard文件的擴(kuò)展名是storyboard,它是一種可視化界面資源文件宾袜,允許包含一個以上視圖界面捻艳。
3.1 AppDelegate.swift文件
提供了兩個主要功能:1)iOS應(yīng)用的程序入口點:使用@UIApplciationMain的聲明,創(chuàng)建一個程序應(yīng)用對象負(fù)責(zé)管理整個應(yīng)用程序的生命周期和一個應(yīng)用程序代理對象(app delegate)庆猫;2)定義AppDelegate類认轨,指定實現(xiàn)應(yīng)用程序代理對象的協(xié)議函數(shù):
1)應(yī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)入后臺運行函數(shù)
func applicationDidEnterBackground(application: UIApplication)
4)應(yīng)用程序進(jì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)建一個UIViewController的子類ViewController,其源碼文件前綴名與類名相同(含有大小寫)月培。iOS應(yīng)用開發(fā)采用MVC設(shè)計模式嘁字,UIViewController類對應(yīng)于Controller,管理View和調(diào)用Model的方法杉畜。ViewController重寫了基類的視圖加載方法viewDidLoad()纪蜒,
3.3? LaunchScreen.storyboard
應(yīng)用程序的啟動界面文件,應(yīng)用啟動加載時調(diào)用該資源文件此叠。
3.4? Main.storyboard
應(yīng)用程序的主界面文件纯续,Xcode缺省創(chuàng)建的主界面文件,用戶可以創(chuàng)建并指定其他名稱的主界面文件拌蜘。本項目是單視圖模版杆烁,在Main.storyboard上顯示的與ViewController綁定的界面。圖中的箭頭表示指向的視圖界面是這個storyboard文件的入口點简卧,是加載storyboard資源時第一個加載的視圖兔魂。
4.? 創(chuàng)建基本界面
在ViewController視圖上添加按鈕和文字輸入框。iOS中所有視圖對象都是UIView類或者其子類举娩,文本輸入框UITextField是UIView的子類析校。
4.1 在界面上添加一個文本輸入框
1)打開對象選擇面板构罗,在搜索框輸入“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? 在界面上添加一個Label標(biāo)簽
1)打開對象選擇面板召边,在搜索框輸入“l(fā)abel”;
2)選中Label標(biāo)簽將其拖到文本輸入框上方裹驰,左對齊于文本輸入框隧熙;
3)雙擊Label標(biāo)簽,輸入文字“菜名”幻林。
4.3? 在界面上添加一個按鈕
1)打開對象選擇面板贞盯,在搜索框輸入“button”;
2)選中按鈕對象將其拖到文本輸入框下方沪饺,左對齊于文本輸入框躏敢;
3)雙擊按鈕,輸入文字“設(shè)置缺省標(biāo)簽文字”随闽。
5.? 預(yù)覽視圖界面
使用助手編輯器預(yù)覽視圖界面
5.1? 點擊右上角的助手編輯器(Assistant editor)
5.2? 點擊編輯器選擇器父丰,選中預(yù)覽Preview。
在預(yù)覽視圖發(fā)現(xiàn)視圖沒有適配不同尺寸的設(shè)備(iPhone和iPad)掘宪,使用自動布局Auto Layout來建立適配不同尺寸設(shè)備的視圖。
6.? 采用自動布局Auto Layout
自動布局是一個高效的布局引擎幫助輕松地設(shè)計適配的布局攘烛,使用約束 (constraints)
來描述界面元素的位置以及與其它元素之間的相對位置魏滚。類似堆棧式視圖(UIStackView)的工具可以幫助更有效地實現(xiàn)自動布局,堆棧式視圖可以提供直線式接口用于每一列或者每一行的視圖集合的布局坟漱。
6.1? 增加自動布局約束
6.1.1? 按住Shift鍵的同時選中文本輸入框鼠次、標(biāo)簽和按鈕;
6.1.2? 點擊底部右側(cè)的Stack按鈕
6.1.3? 選中StackView控件芋齿,在屬性編輯器修改Spacing為12
6.1.4? 點擊Pin按鈕腥寇;
6.1.5? 按照圖示設(shè)置約束,點擊最下方按鈕添加3個約束觅捆。
6.2? 調(diào)整文本輸入框的約束
6.2.1? 選中文本輸入框
6.2.2? 點擊Pin按鈕
6.2.3? 設(shè)置文本輸入框約束
6.2.4? 在選中文本輸入框同時赦役,在尺寸面板上選擇Intrinsic Size為PlaceHolder。
6.3? 最后的預(yù)覽效果