從程式加入 Document Outline 的元件

製作 iOS App 畫面時，有時我們希望加入某個 UI 元件，但卻不是將它加到畫面上。比方以下例子，我們希望 Date Picker 變成 text field 的輸入鍵盤，輸入 stranger things 發生的的時間。

此問題有很多解法，我們可以在程式裡另外生成 date picker ，然後將它指定為 text feild 的 inputView。

class ViewController: UIViewController {
    @IBOutlet weak var textField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let datePicker = UIDatePicker()
        datePicker.preferredDatePickerStyle = .wheels
        textField.inputView = datePicker
    }
}

不過如果懶得寫程式，我們也可以先在 Interface Builder 生成元件，方法如下:

將 date picker 拉到 controller 的 Exit 底下

如下圖所示，此時將產生 date picker 元件，不過它並不會出現在畫面上，而是長在 controller 的畫面之外。

設定 date picker 的 preferred style 為 Wheels

連結 date picker 的 outlet

由於 date picker 沒有在畫面上，預設連線產生的 outlet 不會加上 weak。此處的 datePicker 可以加 weak，也可以不加。

@IBOutlet var datePicker: UIDatePicker!

在 viewDidLoad 將 date picker 設為 text field 的 input view

class ViewController: UIViewController {
     @IBOutlet var datePicker: UIDatePicker!
     @IBOutlet weak var textField: UITextField!
    
     override func viewDidLoad() {
        super.viewDidLoad()
        
        textField.inputView = datePicker
     }
}

其它例子

以下連結提到的 profile 區塊也可以加到 Document Outline，從 Interface Builder 設計畫面後連結 outlet，然後再從程式用 addSubview 貼上和設定 auto layout 條件。

#83 製作 IG 滑動後 profile tab 卡在上方的效果