PickerView練習
Picker View 的上方加入包含完成 & 取消 button 的 bar,第二欄的Picker View隨著第一欄變化
成果圖
課題
- 顯示單欄及雙欄的Picker View
- 點選畫面後顯示 Picker View。
- Picker View 的上方加入包含完成 & 取消 button 的 bar,按下完成時更新畫面的內容。
- 顯示多欄的 Picker View,第二欄的 picker view 隨著第一欄而變化。
架構
程式碼
初始化pickerView的會用到的資料以及要顯示在textField上的字串
服從UITextFieldDelegate後,在viewDidLoad將要設定點擊後要彈出Picker View的textField指定delegate為self,在textFieldDidBeginEditing方法呼叫initPickerView方法,所點擊的textField當參數傳進去。
loadData方法寫在DataController類別裡,內容只是生成假資料以及解析plist檔,程式碼可以看分享的GitHub連結。
在initPickerView方法裡,根據傳進來的textField給不同的tag值,然後將Picker View的delegate設定為self。
初始化Picker View上方的ToolBar以及按鈕,按鈕會按照加入的順序由左到右,其中doneButton要設定跟Picker View一樣的tag值,是在執行submit方法時判斷哪個textField的Picker View用的設定toolBar的isUserInteractionEnabled = true。
初始化一個UITextField並指定給一開始宣告的pickerField,在addSubView後將pickerView跟toolBar設定成他的inputView跟inputAccessoryView,呼叫becomeFirstResponder()將pickerView彈出。
在submit方法從sender的tag值判斷要顯示哪個的textField的文字,由於plist檔的城市名稱前有加編碼方便排序,在顯示前要先將編碼切掉。而cancel方法只是關掉pickerField而已。
最後要實作UIPickerViewDelegate跟UIPickerViewDataSource的方法。
程式碼都有註解,其中比較特別的是第二欄的 picker view 隨著第一欄而變化的功能,在51行判斷選擇車站的component要回傳的row數時,先用selectedRow(inComponent: 0)取得所選到的城市,再用城市當key去取得車站的Array回傳count。
再來就是第57行是當pickerView有選擇到東西的時候會呼叫的方法, 在69行的意思是,當使用者選擇了第一個component的資料後,要reload第二個component(index是1),資料才會更新。
心得
老實說做過一次之後,之後要用只會無腦複製貼上了,每次都要重看一次是怎麼做的,希望之後可以做更多一點客製化。
GitHub連結