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

圖 1-4-1 本章節的實例應用實例,兩個按鈕和一個文本框

1.4.1 創建項目

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

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

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

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

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

圖1-4-3 項目模板自動創建的類文件

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

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

圖 1-4-4 ViewController.swift 內容

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

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

圖1-4-5 AppDelegate.swift 內容

1.4.3 添加控件到視圖并進行自動布局

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

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

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

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

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

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

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

? ? ? ? B.左邊按鈕應該垂直居中并且靠近屏幕左側

? ? ? ? C.右邊按鈕應該垂直居中并且靠近屏幕右側

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

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

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

這樣左邊的按鈕就約束好了.下面進行右邊按鈕的約束.如圖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,自動布局就這樣愉快的解決了,當然在Ipad運行也是OK的,因為我們已經做好了適配.

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

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

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

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

1.4.4 布局預覽功能

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

圖1-4-16 找到Automatic

圖1-4-17 點擊Automatic后的下拉菜單,點擊Preview就會出現預覽視圖

圖1-4-18 預覽圖

圖1-4-19 點擊加號就可以添加預覽的設備了

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

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

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

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

圖1-4-20將兩個按鈕的事件和文本框屬性拖到ViewController.swift中

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

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

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

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

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

圖 1-4-23 文本框屬性添加Connection改為Outlet

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

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

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

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