[SWIFT] Linking multiple TextFields and PickerView

I summarized how to display TextField using PickerView. I also wrote about the process of changing the PickerView candidate of the other TextField according to the text of the TextField.

Placement of parts

Prepare two TextFields. Here, they are TextField and TextField2, respectively. スクリーンショット 2020-12-17 1.44.14.png

Code example

Declaration part

To use pickerView, use a delegate or data source (UIPickerViewDelegate, UIPickerViewDataSource). In this example, the array of data1 is assigned to pickerView1, and data2 ~ 4 are assigned to pickerView2 according to the value of textField selected from the array of data1 and displayed.

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 = ["Meiji","Taisho","Showa","Heisei","Reiwa"]
    var data3 = ["January","February","March","April","May","June","July","August","September","October","1January","1February"]
    var data4 = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
    var word1 = String()
    var word2 = String()

ViewDidLoad PickerView and toolBar settings.

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
    }

Method part

viewController.swift


 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        textField.endEditing(true)
        textField2.endEditing(true)
        //Tap the outside of the text input screen to finish editing
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1

    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        //Number of candidates
        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? {
        //Contents of choice
        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{
                    
                }
            }
        }
        
    }

Complete

That's all the code, but I'm worried that the code in the didSelectRow part of the last PickerView has become redundant. Please teach if there is another good method.

Recommended Posts

Linking multiple TextFields and PickerView
Save and display multiple images