TextFieldをPickerViewを用いて表示させていく方法についてまとめてみました。また、TextFieldのテキストによって他方のTextFieldのPickerViewの候補を変更する処理についても自分なりに書いてみました。
#部品の配置
TextFieldを2つ用意します。ここではそれぞれTextFieldとTextField2としています。
#コード例
###宣言部
pickerViewを使うにはデリゲートやデータソース(UIPickerViewDelegate, UIPickerViewDataSource)を用いるます。
今回の例ではdata1の配列をpickerView1に、data1の配列から選択され表示したtextFieldの値に応じてdata2~4をpickerView2にあてる感じです。
ViewContoroller.swift
import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
@IBOutlet weak var textField: UITextField!
@IBOutlet weak var textField2: UITextField!
var pickerView1 = UIPickerView()
var pickerView2 = UIPickerView()
var data1 = ["Era", "Year", "Week"]
var data2 = ["明治","大正","昭和","平成","令和"]
var data3 = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
var data4 = ["月曜日","火曜日","水曜日","木曜日","金曜日","土曜日","日曜日"]
var word1 = String()
var word2 = String()
###ViewDidLoad
PickerView、toolBarの設定。
ViewContoroller.swift
override func viewDidLoad() {
super.viewDidLoad()
makePickerView()
}
func makePickerView() {
//PickerView1
pickerView1.delegate = self
textField.inputView = pickerView1
//PickerView2
pickerView2.delegate = self
textField2.inputView = pickerView2
// toolbar1
let toolbar1 = UIToolbar()
toolbar1.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 44)
let doneButtonItem1 = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(ViewController.doneButton1))
toolbar1.setItems([doneButtonItem1], animated: true)
textField.inputAccessoryView = toolbar1
// toolbar2
let toolbar2 = UIToolbar()
toolbar2.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 44)
let doneButtonItem2 = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(ViewController.doneButton2))
toolbar2.setItems([doneButtonItem2], animated: true)
textField2.inputAccessoryView = toolbar2
}
@objc func doneButton1() {
textField.endEditing(true)
textField.text = word1
textField2.text = ""
}
@objc func doneButton2() {
textField2.endEditing(true)
textField2.text = word2
}
###メソッド部
viewController.swift
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
textField.endEditing(true)
textField2.endEditing(true)
//テキスト入力画面の外側をタップしたら編集が終了
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
//候補の数
if pickerView == pickerView1{
return data1.count
}else {
if textField.text == data1[0]{
return data2.count
}else if textField.text == data1[1]{
return data3.count
}else{
return data4.count
}
}
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//選択肢の内容
if pickerView == pickerView1{
return data1[row]
}else {
if textField.text == data1[0]{
return data2[row]
}else if textField.text == data1[1]{
return data3[row]
}else if textField.text == data1[2]{
return data4[row]
}else{
return ""
}
}
}
viewController.swift
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if textField.text == "" {
word1 = data1[row]
}
if textField.text != "" && textField2.text == ""{
if textField.text == data1[0]{
word2 = data2[row]
}else if textField.text == data1[1]{
word2 = data3[row]
}else if textField.text == data1[2]{
word2 = data4[row]
}else{
}
}
if textField.text != "" && textField2.text != ""{
if pickerView == pickerView1{
word1 = data1[row]
}else{
if textField.text == data1[0]{
word2 = data2[row]
}else if textField.text == data1[1]{
word2 = data3[row]
}else if textField.text == data1[2]{
word2 = data4[row]
}else{
}
}
}
}
#完成
コードは以上になりますが、最後のPickerViewのdidSelectRow部でのコードが冗長になってしまっているのが気にかかっています。他にいい方法があればご教授願います。