使用Swift編程語言開發(fā)iOS應(yīng)用(二)

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ù)覽效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末栅炒,一起剝皮案震驚了整個濱河市掂摔,隨后出現(xiàn)的幾起案子术羔,更是在濱河造成了極大的恐慌,老刑警劉巖乙漓,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件级历,死亡現(xiàn)場離奇詭異,居然都是意外死亡叭披,警方通過查閱死者的電腦和手機(jī)寥殖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涩蜘,“玉大人嚼贡,你說我怎么就攤上這事≈逄常” “怎么了编曼?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長剩辟。 經(jīng)常有香客問我掐场,道長,這世上最難降的妖魔是什么贩猎? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任熊户,我火速辦了婚禮,結(jié)果婚禮上吭服,老公的妹妹穿的比我還像新娘嚷堡。我一直安慰自己,他們只是感情好艇棕,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布蝌戒。 她就那樣靜靜地躺著,像睡著了一般沼琉。 火紅的嫁衣襯著肌膚如雪北苟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天打瘪,我揣著相機(jī)與錄音友鼻,去河邊找鬼。 笑死闺骚,一個胖子當(dāng)著我的面吹牛彩扔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播僻爽,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼虫碉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了进泼?” 一聲冷哼從身側(cè)響起蔗衡,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤纤虽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绞惦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逼纸,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年济蝉,在試婚紗的時候發(fā)現(xiàn)自己被綠了杰刽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡王滤,死狀恐怖贺嫂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情雁乡,我是刑警寧澤第喳,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站踱稍,受9級特大地震影響曲饱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜珠月,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一扩淀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧啤挎,春花似錦驻谆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至伙判,卻和暖如春区端,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背澳腹。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留杨何,地道東北人酱塔。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像危虱,于是被迫代替她去往敵國和親羊娃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容