? ? ? ?前面章節(jié)介紹了Xcode的基本內(nèi)容,這節(jié)我們以一個簡單的實例介紹下與用戶的交互,本節(jié)將編寫一個稍微簡單的應(yīng)用(看似簡單,但本章知識點是相當(dāng)多的),它由兩個按鈕(UIButton)和一個文本框(UILabel)構(gòu)成如圖1-4-1,當(dāng)點擊按鈕文本會發(fā)生相應(yīng)的變化.

圖 1-4-1 本章節(jié)的實例應(yīng)用實例,兩個按鈕和一個文本框

1.4.1 創(chuàng)建項目

? ? ? ? ? ? 現(xiàn)在開始創(chuàng)建工程名為"1.4-Button And Label"的實例工程,我們選擇的模板是1.1章節(jié)所提到的Single View Application(單視圖應(yīng)用程序),對相應(yīng)參數(shù)進(jìn)行設(shè)置如圖1-4-2, 本節(jié)我們要使用自動布局來創(chuàng)建一個可以在所有iOS設(shè)備上運行的應(yīng)用程序,所以要在Devices下拉菜單中選擇Universal.

圖 1-4-2 創(chuàng)建工程配置選項(Swift版)

點擊Next,Xcode會提示你選擇項目的保存位置.按下Create之后項目就創(chuàng)建完成了.

1.4.2 視圖控制器(View Controller.swift)和應(yīng)用代理方法(AppDelegate.swift)

終于要開始編寫代碼了,在編寫之前我們先看看已經(jīng)創(chuàng)建好的文件.如圖1-4-3

圖1-4-3 項目模板自動創(chuàng)建的類文件

"1.4-Button And Label"文件夾包含了.swift的兩個文件/兩個storyboard文件/一個.xcassets文件(存放應(yīng)用程序所需要的全部圖片)和一個Info.plist文件(它包含了應(yīng)用程序的重要信息,例如程序名稱,bundle id,對運行的設(shè)備規(guī)格是否有要求,等等)

視圖控制器(View Controller.swift):負(fù)責(zé)管理應(yīng)用程序的視圖,這個類是一個視圖控制器,點擊ViewController.swift,查看文件內(nèi)容如圖1-4-4

圖 1-4-4 ViewController.swift 內(nèi)容

ViewController是UIViewController的子類,UIviewController是一個通用控制器,是UIKit的一部分,通過繼承這個類,可以獲得大量的功能.

應(yīng)用程序代理(AppDelegate.swift):是整個APP的事件代理類,是負(fù)責(zé)為其他對象處理特定任務(wù)的對象,在應(yīng)用程序執(zhí)行過程中的某些特定時間點UIApplication調(diào)用特定的代理方法,例如:如果需要在程序退出時觸發(fā)一段代碼,可以在應(yīng)用程序代理實現(xiàn)applicationTerminate方法,在這個方法內(nèi)編寫想要的代碼即可.如圖1-4-5各個方法會在什么時候被調(diào)用.

圖1-4-5 AppDelegate.swift 內(nèi)容

1.4.3 添加控件到視圖并進(jìn)行自動布局

我們了解了視圖控制器(View Controller.swift)和應(yīng)用代理方法(AppDelegate.swift)之后,就開始將兩個按鈕和一個文本框加入到view中去.如圖1-4-6

圖 1-4-6 添加控件到View Controller控制的View上

我們雙擊拖進(jìn)視圖的控件,就可以修改默認(rèn)的文字.好了,我們可以運行下程序(快捷鍵為command + R),運行結(jié)果如圖1-4-7

圖 1-4-7 加入控件直接運行在模擬器上

? ? ? ?我們看到"右邊按鈕"消失了,只有"左邊按鈕"是正確的,這個時候不要擔(dān)心,我們還要進(jìn)行下一步操作,就是自動布局.讓我們的程序在任何設(shè)備上可以正常顯示.

? ? ? ?在本實例中我們想達(dá)到如下效果:

? ? ? ? A.文本框應(yīng)該水平居中,并且位于屏幕頂端的下方

? ? ? ? B.左邊按鈕應(yīng)該垂直居中并且靠近屏幕左側(cè)

? ? ? ? C.右邊按鈕應(yīng)該垂直居中并且靠近屏幕右側(cè)

每個要求都包含兩條約束:一條是水平約束,另一條是垂直約束.如果我們對這三個控件采用這些約束,自動布局就能在任意屏幕上保持視圖處于正確的位置,下面首先對左邊按鈕進(jìn)行約束如圖1-4-8和圖1-4-9

圖 1-4-8 添加左邊按鈕垂直居中

圖 1-4-9 左邊按鈕添加靠左約束,和固定寬高

這樣左邊的按鈕就約束好了.下面進(jìn)行右邊按鈕的約束.如圖1-4-10和圖1-4-11

圖 1-4-10 添加右邊按鈕垂直居中

圖 1-4-11 右邊按鈕添加靠右約束,和固定寬高

這樣右邊按鈕自動布局也OK,下面還有文本框的約束如圖1-4-12和圖1-4-13

圖 1-4-12 文本框約束水平位置

圖 1-4-13 文本框添加靠頂部約束,和固定寬高

OK,大功告成,我們command + R運行下:如圖1-4-14和1-4-15

圖 1-4-14 豎屏正常

圖 1-4-15 橫屏正常

OK,自動布局就這樣愉快的解決了,當(dāng)然在Ipad運行也是OK的,因為我們已經(jīng)做好了適配.

下面簡單的介紹下在布局中Align(對齊)/Pin(固定)/Resolve Auto Layout Issues(解決自動布局問題)

Align(對齊):可以將你選中的視圖與另一個視圖對齊.如果現(xiàn)在點擊這個按鈕,將會看到一個包含多個選項的懸浮框.其中一個Horizontal Center in Container(容器中水平居中),上面已經(jīng)使用了這個約束.

Pin(固定):點擊按鈕會彈出一個面板,通過上面的控件可以設(shè)定某個視圖與另一個視圖的相對位置并且使用尺寸約束,以上的例子當(dāng)中就設(shè)定了左右按鈕分別有視圖的左邊和右邊距離.

Resolve Auto Layout Issues(解決自動布局問題):按鈕可以糾正布局問題,可以推測遺漏了那些約束并補上,以及調(diào)整視圖在運行時的布局,如果你在上面的例子中遇到警告,就可以用Update Frames來改變控件在視圖中的準(zhǔn)確位置.

1.4.4 布局預(yù)覽功能

?想要看適配后的效果,我們必須要運行到每一個模擬器上嗎,不是的.Xcode為我們提供了強大的預(yù)覽功能,可以選擇不同設(shè)備同時預(yù)覽,下面將介紹預(yù)覽的位置,以及怎樣添加不同設(shè)備到預(yù)覽中去.

圖1-4-16 找到Automatic

圖1-4-17 點擊Automatic后的下拉菜單,點擊Preview就會出現(xiàn)預(yù)覽視圖

圖1-4-18 預(yù)覽圖

圖1-4-19 點擊加號就可以添加預(yù)覽的設(shè)備了

1.4.5 添加按鈕的事件/文本框的屬性和編輯邏輯代碼

以上小節(jié)已經(jīng)完成了控件的添加以及自動布局適配,下面我們就開始編寫代碼了.

第一步:先將視圖中的按鈕添加方法到ViewController.swift中,并將文本框添加屬性到ViewController中.如圖:1-4-20

第二步:進(jìn)行代碼邏輯的編寫.如圖:1-4-24

圖1-4-20將兩個按鈕的事件和文本框?qū)傩酝系絍iewController.swift中

選中按鈕,按住Ctrl鍵并用鼠標(biāo)左鍵拖出一條線到ViewController,主要按鈕的Connection需要改為Action并把方法名命名為btnClick,如圖1-4-21

?圖1-4-21 設(shè)置按鈕方法名以及修改Connection為Action

右邊按鈕就直接把它拖到剛生成的方法中即可如圖1-4-22

圖1-4-22 添加右邊按鈕的事件方法?

添加文本屬性到ViewController.swift中如圖1-4-23

圖 1-4-23 文本框?qū)傩蕴砑覥onnection改為Outlet

最后一步就是代碼的邏輯操作:如圖1-4-24

圖 1-4-24 代碼的邏輯編寫

到這里就可以運行下程序就大功告成了,不妨點擊下兩個按鈕觀察文本框的變化吧,其中sender.titleForState(.Normal) 就是獲取兩個按鈕在正常狀態(tài)下的文本信息.

?歡迎加入Swift QQ交流群:513653400