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而已。

plist的資料型別為[String:[String]],用城市的名稱當Key,以車站的名稱做Array value

最後要實作UIPickerViewDelegate跟UIPickerViewDataSource的方法。

程式碼都有註解,其中比較特別的是第二欄的 picker view 隨著第一欄而變化的功能,在51行判斷選擇車站的component要回傳的row數時,先用selectedRow(inComponent: 0)取得所選到的城市,再用城市當key去取得車站的Array回傳count。

再來就是第57行是當pickerView有選擇到東西的時候會呼叫的方法, 在69行的意思是,當使用者選擇了第一個component的資料後,要reload第二個component(index是1),資料才會更新。

心得

老實說做過一次之後,之後要用只會無腦複製貼上了,每次都要重看一次是怎麼做的,希望之後可以做更多一點客製化。

GitHub連結

--

--