iOS User Interface Default Value

我們在開發 iOS App 的時候,對於 User interface 的開發模式有幾種流派

  • Storyboard
  • Storyboard + xib
  • xib
  • Code

而這篇的主題,先撇除純 Code 流的開發方式,來聊聊使用 Storyboard 和 xib 的朋友,會遇到什麼事。

先說說為什麼我使用 User interface(Storyboard, xib)

一方面是因為一開始學習的時候,教學是從拉拉元件,連動按鈕開始, 比起純 Code 的寫法,這樣也讓人比較好上手; 再來便開始弄一些 Auto layout,讓畫面越來越完整。 而其中一點是,方便和設計師做討論, 看著畫面來調整 UI 會比我一直重新 Build 出 App 還快得一些。 但也正是為了讓設計師可以看到畫面,我可能得在一些 UIKit 的元件上先放置好預設的值, 好比說:

儘管這個 UIViewController 在 viewDidLoad 的時候,會再配置一次多語系的文案以及更換些 icon 或者顏色, 但至少在初步上可以看到大概會長什麼樣子。

若不清空預設值呢?

我們就可能在部分畫面上會看到,原本打在 xib 的 UITextField 上的值(e.g Hinet CHT Auto), 甚至是可能有些元件的 isHidden 是由程式判斷出需不需要呈現, 而畫面顯示到判斷完畢的中間,會造成畫面上元件閃現的情況。 於是原先我的做法會:

  • 清空 xib 上的所有預設值
  • 在 viewDidLoad 的狀態,執行清空的動作

前者的做法,會影響到的就是 xib 失去了給設計師觀看的意義, 因為全空的畫面並不符合使用者的情境; 而後者的做法,當元件一多的時候,有時便會有疏忽。

class ViewController: UIViewController {
    @IBOutlet private weak var nameTextField: UITextField!
    @IBOutlet private weak var passwordTextField: UITextField!
    @IBOutlet private weak var addressTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
    }
    
    private func setUpView() {
        nameTextField.placeholder = "給值"
        passwordTextField.placeholder = "給值"
        addressTextField.placeholder = "給值"
    }
}

如上圖,我會在 setUpView() 的時候對 UIKit 元件一一設置。 後來,某天看到了另一種方式處理這一塊:

class ViewController: UIViewController {
    @IBOutlet private weak var nameTextField: UITextField! {
        didSet {
            nameTextField.placeholder = "給值"
        }
    }
    @IBOutlet private weak var passwordTextField: UITextField! {
        didSet {
            passwordTextField.placeholder = "給值"
        }
    }
    @IBOutlet private weak var addressTextField: UITextField! {
        didSet {
            addressTextField.placeholder = "給值"
        }
    }
}

也就是將元件建構的動作寫在 UIKit 的元件 didSet 的時候,對於每個元件該做哪些事情就會有比較清楚的說明。

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus