定期的にpickerViewのこんな記事を書いている気がします。(^_^;)
pickerViewはよく使うけどアプリをたまにしか作らないのでその間にSwiftのバージョンも上がるし作り方も忘れるよね。
同じViewContorollerに2つ以上のPickerViewを設置し、datePickerも使って、しかも普通のキーボードのように下から出るようにしたい。
それに少し前の記事を参考に閉じるボタンも付けます。それは下記参照。
【Swift5】textFieldのキーボードに閉じるボタンを付ける。 | iPhoneアプリ備忘録
ではまず、3つのtextfieldを作成します。
autoLayoutは適当に。
textfieldはそれぞれあうとれっとせつぞくします。
pickerViewのプロパティを2つと、datePickerのプロパティを作り、pickerViewに表示する配列も作成します。
UIPickerViewDelegate, UIPickerViewDataSourceを設定するとプロトコルに従いメソッドが作成されます。
UITextFieldDelegateも書いておきましょう。
とりあえずここまでのコード。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import UIKit class ViewController: UIViewController,UITextFieldDelegate,UIPickerViewDelegate, UIPickerViewDataSource { //textFieldとのアウトレット接続 @IBOutlet weak var kanaTextField: UITextField! @IBOutlet weak var numberTextField: UITextField! @IBOutlet weak var dateTextField: UITextField! //pickerViewのプロパティを作る var kanaPickerView : UIPickerView = UIPickerView() var numberPickerView : UIPickerView = UIPickerView() //datePickerのプロパティを作る var datePickerView :UIDatePicker = UIDatePicker() //pickerViewに表示する配列を作成 let list1:[String] = ["いち","に","さん","よん","ご",] let list2:[String] = ["1","2","3","4","5","6","7"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } func numberOfComponents(in pickerView: UIPickerView) -> Int { <#code#> } func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { <#code#> } } |
そして、プロトコルは置いといてキーボードをpickerViewに置き換える辺りの設定します。
基本的にはPickerViewにtagを設定し、textfieldのinputViewに設定します。
datePickerも同様に。
viewDidLoadから呼びます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. makePickerKeybord() } //キーボードの設定 func makePickerKeybord(){ //かな数字のPickerviewをキーボードにする設定 kanaPickerView.tag = 1 kanaPickerView.delegate = self kanaTextField.inputView = kanaPickerView kanaTextField.delegate = self //numberのPickerviewをキーボードにする設定 numberPickerView.tag = 2 numberPickerView.delegate = self kanaTextField.inputView = numberPickerView kanaTextField.delegate = self // 日付ピッカーをキーボードにする設定 datePickerView.datePickerMode = UIDatePicker.Mode.dateAndTime datePickerView.timeZone = TimeZone(identifier: "Asia/Tokyo") datePickerView.locale = Locale(identifier: "ja_JP") datePickerView.minuteInterval = 15 datePickerView.addTarget(self, action: Selector(("dateChange")), for: .valueChanged) dateTextField.inputView = datePickerView dateTextField.delegate = self } |
pickerViewのプロトコルの設定。
コンポーネントの数は1でコンポーネントに入る配列の数はtagで切り分けます。
コンポーネントの中身、配列もtagで切り分け。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
func numberOfComponents(in pickerView: UIPickerView) -> Int { return 1 } func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { switch pickerView.tag { case 1: return list1.count case 2: return list2.count default: return 0 } } func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { print("たぐ",pickerView.tag) switch pickerView.tag { case 1: return list1[row] case 2: return list2[row] default: return "error" } } |
pickerViewとdatePickerViewに変更があった時に呼ばれてtextFieldのテキストが書き換えられるメソッド。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//pickerが選択された際に呼ばれるデリゲートメソッド. func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { switch pickerView.tag { case 1: return kanaTextField.text = list1[row] case 2: return numberTextField.text = list2[row] default: return } } //datePickerが変化すると呼ばれる @objc func dateChange(){ let formatter = DateFormatter() formatter.dateFormat = "yyyy年MM月dd日 HH:mm" dateTextField.text = "\(formatter.string(from: datePickerView.date))" } } |
一応全コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
import UIKit class ViewController: UIViewController,UITextFieldDelegate,UIPickerViewDelegate, UIPickerViewDataSource { //textFieldとのアウトレット接続 @IBOutlet weak var kanaTextField: UITextField! @IBOutlet weak var numberTextField: UITextField! @IBOutlet weak var dateTextField: UITextField! //pickerViewのプロパティを作る var kanaPickerView : UIPickerView = UIPickerView() var numberPickerView : UIPickerView = UIPickerView() //datePickerのプロパティを作る var datePickerView :UIDatePicker = UIDatePicker() //pickerViewに表示する配列を作成 let list1:[String] = ["いち","に","さん","よん","ご",] let list2:[String] = ["1","2","3","4","5","6","7"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. makePickerKeybord() } //キーボードの設定 func makePickerKeybord(){ //かな数字のPickerviewをキーボードにする設定 kanaPickerView.tag = 1 kanaPickerView.delegate = self kanaTextField.inputView = kanaPickerView kanaTextField.delegate = self //numberのPickerviewをキーボードにする設定 numberPickerView.tag = 2 numberPickerView.delegate = self numberTextField.inputView = numberPickerView numberTextField.delegate = self // 日付ピッカーをキーボードにする設定 datePickerView.datePickerMode = UIDatePicker.Mode.dateAndTime datePickerView.timeZone = TimeZone(identifier: "Asia/Tokyo") datePickerView.locale = Locale(identifier: "ja_JP") datePickerView.minuteInterval = 15 datePickerView.addTarget(self, action: Selector(("dateChange")), for: .valueChanged) dateTextField.inputView = datePickerView dateTextField.delegate = self } func numberOfComponents(in pickerView: UIPickerView) -> Int { return 1 } func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { switch pickerView.tag { case 1: return list1.count case 2: return list2.count default: return 0 } } func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { switch pickerView.tag { case 1: return list1[row] case 2: return list2[row] default: return "error" } } //pickerが選択された際に呼ばれるデリゲートメソッド. func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { switch pickerView.tag { case 1: return kanaTextField.text = list1[row] case 2: return numberTextField.text = list2[row] default: return } } //datePickerが変化すると呼ばれる @objc func dateChange(){ let formatter = DateFormatter() formatter.dateFormat = "yyyy年MM月dd日 HH:mm" dateTextField.text = "\(formatter.string(from: datePickerView.date))" } } // MARK: - キーボードにと閉じるボタンを付ける //storybordで該当テキストフィールドを選択し、identity Inspectorでclassを DoneTextFierdに切り替える class DoneTextFierd: UITextField{ override init(frame: CGRect) { super.init(frame: frame) commonInit() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) commonInit() } private func commonInit(){ let tools = UIToolbar() tools.frame = CGRect(x: 0, y: 0, width: frame.width, height: 40) let spacer = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil) let closeButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(self.closeButtonTapped)) tools.items = [spacer, closeButton] self.inputAccessoryView = tools } @objc func closeButtonTapped(){ self.endEditing(true) self.resignFirstResponder() } } |