Text Field 搭配 Picker View 應用

Picker View 常常都會搭配著Text Field使用，所以藉由這次練習讓自己可以熟悉這類型的UI應用

學習目標：

Text Field 搭配 Picker View 使用
Picker View 有兩個 component
Toolbar 加入在 Picker View

完成的成果大致上是這樣 ↓

第三個Text Filed裡面的Picker View會有連動的效果

實作開始

實作部份會針對重點的部份說明
那先從最簡單的下手吧！建立資料
我們所需要的資料有日期、時間及車站

透過plist建立車站資料

建立 Station 的 struct，到時候會用來解析station.list的資料內容

import Foundation
struct StationData:Decodable {
// 用來decode station.plist資料
var stationDictionary:[String:[String]]
}

建立 Data Controller 將我們所需的資料全部放在一起吧

我們依每天有多少秒來增加不同的日期

透過ProperListDecoder將Data轉為我們想要的資料類型

建立loadData()方法方便我們來取資料

完成資料的部份，接下來就進到這篇重頭戲了
首先 ViewController 分別需要 Protocol
UITextFieldDelegate , UIPickerViewDelegate, UIPickerViewDataSource

↑ 在上面的程式碼，透過 textFieldDidBeginEditing 會知道 User 點擊的欄位，所額外寫 initPickerView 的方法，到時候來決定要 textField 對應 Picker View 的 Data

↑ 根據傳進來的 textField，我們會知道 User 是點擊哪一個欄位， 再將給予pickerView不同的tag，以方便後續載入相對應的Data。

// 將pickerField加到畫面上
view.addSubview(pickerField)
// 將pickerField輸入view改為pickerView
pickerField.inputView = pickerView
// 將toolbar設定在pickerField裡面
pickerField.inputAccessoryView = toolBar
// 彈出pickerField在點擊的欄位
pickerField.becomeFirstResponder()

↑ 由於 pickerField 跟 pickerView 我們都不是透過storyboard創建出來的，
所以需要用程式碼 view.addSubview(pickerField) 讓畫面知道 pickerField 的存在，並且將pickerField inputView 的改為 pickerView
最後，pickerField.becomeFirstResponder() 就可以將設定結果呈現出來

Protocol UIPickerViewDelegate, UIPickerViewDataSource

↑ 在這裡 Protocol 我們要實作四種方法，在下面會各別說明

↑ 之前我們 initPickerView 已經給 textField 對應的 PickerView tag，所以可以根據 tag 來設定 PickerView Component

↑ 在這邊我們要設定 pickerView 的 component data row數，從這邊開始都要特別留意 Station 的部份，因為 Station PickerView 有 City 跟 Station 這兩個component 是相關的，所以先會取得 City name 再至 Station 陣列取出該 City
的資料 row

↑ pickerView 顯示的部份會在這裡處理， 依照 tag 及 component 設定顯示的內容，程式碼 1 2 行 city 的部份因為原始資料城市名稱前面會有兩碼數字，所以會將兩位數字 trim 掉

↑ 在程式碼 16 行， 因為 Station 會根據 City 而有所不同，所以我們要設定reload 才能達到這樣的效果。
另外，由於 每個 City 所擁有的 Staion 數不同，在這邊要特別注意超過 index的問題，在程式碼 26 行就是針對這個問題處理

心得：

沒想到 textField 搭配 pickerView 比我預期還要麻煩，像在 stationTextField 中 City 所對應的車站又不同，詳細的說明我在程式碼裡面都有註解，有興趣的朋友可以從github下載來玩一下。

MrConnor0225/PickerView