前一篇講解了負責控制UI變化與處理使用者互動的viewController,今天要講的是IOS提供我們刻UI的工具Interface Builder

Interface Builder其實只是圖形化介面工具,讓我們可以在上面放置UI(ex: 圖片,文字,輸入框,...等),他提供一個機制能讓我們刻的UI能夠自動適應於不同尺寸的iphone上,這個功能是AutoLayout

AutoLayout是透過設定一些限制來達成自動調整大小與位置的功能,例如一張圖片,其距離整個畫面上下左右各50pt,則在不同尺寸的iphone上,便會依據這些限制來自動調整圖片大小與位置
另外還有一些好用的限制,例如對parent view垂直置中或水平置中,還有對某UI元件成等比例大小(ex: H1 = H2 * 0.3, H1,H2為兩個UI元件的高)
還有stackView,我們可以把多個元件,透過放在stackView裡面,讓每個元件有相同的大小且彼此的間距也相同
當然也可以直接限定UI元件的長寬,讓這個UI元件在不同尺寸的iphone上的大小都一樣．

Autolayout實作練習請參考下面兩個連結或其他網路教學:
ref: https://ithelp.ithome.com.tw/articles/10192965?sc=iThelpR
ref: https://www.appcoda.com.tw/introduction-auto-layout/

Note:

跟Android的不同之處:

1.Interface Builder背後其實也是XML,但它跟Android的layout.xml不一樣的是它不能夠或是幾乎很難直接對文本的xml去新增或調整UI元件
2. Android可以透過在layout.xml內去定義某個UI元件的id,在Activity內用findViewById來存取UI元件,但IOS想要在viewController內存取UI元件一定要透過從interface builder拖拉UI元件到viewController中,xcode會自動在viewController中產生該UI元件的變數,例如我們在interface builder建立一個文字輸入欄位(UITextField)元件,對其按住ctrl並拖拉到viewController內後,可以產生如下的變數

    @IBOutlet weak var mTextField: UITextField!

某些UI元件提供互動的功能,例如使用者在文字輸入欄位輸入文字,則這個行爲也可對應到一個function,這個function也可藉由拖拉UI元件到viewController中的方式來自動產生對應的function,例如:

    @IBAction func textChanged(_ sender: UITextField) {
        ........
    }

最後提一下Storyboard,這個東西操作方式跟Interface Builder一樣,但是他提供了一些額外的功能,比較顯著的功能是Storyboard上可以放置多個畫面(viewController),方便開發者了解整個流程.而Interface Builder上只能有一個畫面(viewController)

Note:

在Interface Builder內的viewController指的是整個頁面UI,而不是控制UI的類別程式碼.
而前一篇提到的控制UI的viewController實際上是一個繼承UIViewController的class!!!
EX:

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var mTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
    @IBAction func textChanged(_ sender: UITextField) {
    }
}