【swift】UIPickerViewを作ってみる（ドラムロール）

どうもこんにちは。iOSをメインに開発しているロッキーカナイです。

今日は、ユーザに複数項目から選択させたい場合に使うことが多いUIPickerViewを紹介します。

ドラムロールで選択するやつですね。

環境

Xcode:9.3

Swift:4.0

コード

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var textField: UITextField!
    
    var pickerView: UIPickerView = UIPickerView()
    let list: [String] = ["メインクーン", "シャム", "ロシアンブルー", "アメリカンショートヘア", "ネベロング", "ビクシーボブ", "ラガマフィン", "ラパーマ"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ピッカー設定
        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.showsSelectionIndicator = true
        
        // 決定バーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        toolbar.setItems([spacelItem, doneItem], animated: true)
        
        // インプットビュー設定
        textField.inputView = pickerView
        textField.inputAccessoryView = toolbar
    }
    
    // 決定ボタン押下
    @objc func done() {
        textField.endEditing(true)
        textField.text = "\(list[pickerView.selectedRow(inComponent: 0)])"
    }
}

extension ViewController : UIPickerViewDelegate, UIPickerViewDataSource {

    // ドラムロールの列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    // ドラムロールの行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        /*
         列が複数ある場合は
         if component == 0 {
         } else {
         ...
         }
         こんな感じで分岐が可能
         */
        return list.count
    }
    
    // ドラムロールの各タイトル
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        /*
         列が複数ある場合は
         if component == 0 {
         } else {
         ...
         }
         こんな感じで分岐が可能
         */
        return list[row]
    }
    
    /*
    // ドラムロール選択時
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        self.textField.text = list[row]
    }
     */
}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var textField: UITextField!

var pickerView: UIPickerView = UIPickerView()

let list: [String] = ["メインクーン", "シャム", "ロシアンブルー", "アメリカンショートヘア", "ネベロング", "ビクシーボブ", "ラガマフィン", "ラパーマ"]

override func viewDidLoad() {

super.viewDidLoad()

// ピッカー設定

pickerView.delegate = self

pickerView.dataSource = self

pickerView.showsSelectionIndicator = true

// 決定バーの生成

let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))

let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)

let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))

toolbar.setItems([spacelItem, doneItem], animated: true)

// インプットビュー設定

textField.inputView = pickerView

textField.inputAccessoryView = toolbar

}

// 決定ボタン押下

@objc func done() {

textField.endEditing(true)

textField.text = "\(list[pickerView.selectedRow(inComponent: 0)])"

}

extension ViewController : UIPickerViewDelegate, UIPickerViewDataSource {

// ドラムロールの列数

func numberOfComponents(in pickerView: UIPickerView) -> Int {

return 1

}

// ドラムロールの行数

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

列が複数ある場合は

if component == 0 {

} else {

...

}

こんな感じで分岐が可能

return list.count

}

// ドラムロールの各タイトル

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

列が複数ある場合は

if component == 0 {

} else {

...

}

こんな感じで分岐が可能

return list[row]

}

// ドラムロール選択時

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

self.textField.text = list[row]

}

このサンプルでは、ドラムロールの選択を行なってもTextFieldに反映されず、Doneボタンを押して決定するようにしてます。

もしドラムロール選択で即反映したい場合は、コメントアウトしているpickerView:didSelectRow:inComponentメソッドを用いることで可能になります。

また、今回は一列のみですが、複数列にすることも可能です。

ちなみに、デフォルト設定も可能です。

override func viewDidLoad() {
        super.viewDidLoad()
        
        // ピッカー設定
        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.showsSelectionIndicator = true
        
        // 決定バーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        toolbar.setItems([spacelItem, doneItem], animated: true)
        
        // インプットビュー設定
        textField.inputView = pickerView
        textField.inputAccessoryView = toolbar
        
        // デフォルト設定
        pickerView.selectRow(2, inComponent: 0, animated: false)
    }