1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

複数のTextFieldとPickerViewの連動

Posted at

TextFieldをPickerViewを用いて表示させていく方法についてまとめてみました。また、TextFieldのテキストによって他方のTextFieldのPickerViewの候補を変更する処理についても自分なりに書いてみました。
#部品の配置
TextFieldを2つ用意します。ここではそれぞれTextFieldとTextField2としています。
スクリーンショット 2020-12-17 1.44.14.png

#コード例
###宣言部

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部でのコードが冗長になってしまっているのが気にかかっています。他にいい方法があればご教授願います。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?