【swift】ツールバー付きピッカービュー（pickerview）、ドラムロールの使い方

　前回、pickerviewの基本の使い方をご紹介しました（下記リンクをご参照下さい）。今回は、テキスト入力蘭をタップすると、キーボードが開き、なおかつキーボードの内容をピッカービュー（ドラムロール）に変換して表示する方法をご紹介します。また、キーボード入力蘭にツールバーを追加することで、決定とキャンセルが選択できるようになっています。

【swift】ピッカービュー（pickerview）、ドラムロールの使い方

　iphoneやiPadで、決められた内容から選択して、入力する際、クルクル回転するピッカービュー（ドラムロール）は便利ですよね。今回は、ピッカービューのプログラムの使い方をご紹介したいと思います。 […]

1 完成形のイメージ
2 1. ストーリーボードにパーツを準備
3 2. ピッカーのリストの準備
4 3. キーボード内に表示するピッカーの設定
5 4. アクションの指定
6 5. ピッカーの初期設定
7 全コード

完成形のイメージ

　まず最初に、今回ご紹介するコードで出来上がった完成形を動画にしました。また、全コードは、ページの最後に載せています。

1. ストーリーボードにパーツを準備

　まず、ストーリーボードに【UITextField】を配置して下さい。そして、それをコードにつなぎます。

import UIKit

class ViewController: UIViewController {
    
    // ストーリーボード上のテキストフィールドとつなげる
    @IBOutlet weak var textField: UITextField!

2. ピッカーのリストの準備

pickerViewをUIPickerView型として宣言し、UIPickerViewを使用出来るようにします。
pickerViewに表示したい内容を、list内に配列として記述します。
viewDidLoad内に、ピッカーの表示設定を反映させます。（pickerはファンクションとして作成し、viewDidLoad内で実行します。）

    var pickerView: UIPickerView = UIPickerView()
    let list: [String] = ["0.2", "0.4", "0.6", "0.8", "1.0", "1.2", "1.4", "1.6", "1.8", "2.0"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        picker()
        

    }

3. キーボード内に表示するピッカーの設定

デリゲートとデータソースをselfで指定します。
【showsSelectionIndicator】で、選択行をハイライト。
ツールバーの生成
- ツールバーのサイズを指定
- 左にキャンセルボタン、右にdoneボタンをつけたいので、その間にはスペースが必要となります。そのため【.flexibleSpace】を作成します。
- doneボタンとcancelボタンを作成します。ボタンが押された時のアクションは、後で指定します。（ツールバーに表示できるボタンは、doneやcancel以外にも多数用意されています。）
- ツールバーに表示するアイテムが準備できたら、ツールバーにセットします。[cancelItem, spaceItem, doneItem]の順にセット。
テキストフィールドのインプットビューを設定
テキストフィールドをタップした際にピッカービューに最初に表示される文字列を指定します。カウントは0から始まるため4を指定した場合、listの５番目の文字列が表示されます。そのため、今回用意したlistでは1.0が最初に表示されます。

    //キーボード内に表示するピッカーの設定
    func picker(){
        // 1. ピッカー設定
        pickerView.delegate = self
        pickerView.dataSource = self
        // 2. 選択行をハイライト
        pickerView.showsSelectionIndicator = true
        
        
        // 3. 決定・キャンセル用ツールバーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spaceItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        let cancelItem = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancel))
        toolbar.setItems([cancelItem, spaceItem, doneItem], animated: true)
        
        // 4. インプットビュー設定
        textField.inputView = pickerView
        textField.inputAccessoryView = toolbar
        
        // 5. デフォルト設定
        pickerView.selectRow(4, inComponent: 0, animated: false)
        
        
    }

4. アクションの指定

決定ボタンのアクションを指定
- 【endEditing(true)】でキーボード入力を終了させます。
- 選択された行の文字列をテキストフィールドのテキストへ反映します。
キャンセルボタンのアクションを指定
- 【endEditing(true)】でキーボード入力を終了させます。
画面タップでテキストフィールドを閉じるように設定
- 【endEditing(true)】でキーボード入力を終了させます。

    // 1. 決定ボタンのアクション指定
    @objc func done() {
        textField.endEditing(true)
        textField.text = "\(list[pickerView.selectedRow(inComponent: 0)])"
    }
    // 2. キャンセルボタンのアクション指定
    @objc func cancel(){
        textField.endEditing(true)
    }
    // 3. 画面タップでテキストフィールドを閉じる
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        textField.endEditing(true)
    }
} //classの終了

5. ピッカーの初期設定

ピッカービュー（ドラムロール）に1列を指定しています。
ピッカービュー（ドラムロール）の行数は、listの個数分欲しいので、listのcount分を指定しています。
titleForRowで表示する内容を指定。

// ピッカーの初期設定
extension ViewController : UIPickerViewDelegate, UIPickerViewDataSource {
    
    // 1. ピッカービューの列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    // 2. ピッカービューの行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return list.count
    }
    
    // 3. ピッカービューに表示する内容
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return list[row]
    }
}

ジンさん

今回は、class ViewControllerを閉じてから、extension ViewControllerとしてデリゲートとデータソースを指定しています。しかし、extensionの内容をclass内で作成しても問題ありません。

全コード

import UIKit

class ViewController: UIViewController {
    
    // ストーリーボード上のテキストフィールドとつなげる
    @IBOutlet weak var textField: UITextField!
    
    
    var pickerView: UIPickerView = UIPickerView()
    let list: [String] = ["0.2", "0.4", "0.6", "0.8", "1.0", "1.2", "1.4", "1.6", "1.8", "2.0"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        picker()
        

    }
    
    //キーボード内に表示するピッカーの設定
    func picker(){
        // ピッカー設定
        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 spaceItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        let cancelItem = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancel))
        toolbar.setItems([cancelItem, spaceItem, doneItem], animated: true)
        
        // インプットビュー設定
        textField.inputView = pickerView
        textField.inputAccessoryView = toolbar
        
        // デフォルト設定
        pickerView.selectRow(4, inComponent: 0, animated: false)
        
        
    }
    
    // 決定ボタンのアクション指定
    @objc func done() {
        textField.endEditing(true)
        textField.text = "\(list[pickerView.selectedRow(inComponent: 0)])"
    }
    // キャンセルボタンのアクション指定
    @objc func cancel(){
        textField.endEditing(true)
    }
    // 画面タップでテキストフィールドを閉じる
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        textField.endEditing(true)
    }
}

// ピッカーの初期設定
extension ViewController : UIPickerViewDelegate, UIPickerViewDataSource {
    
    // ピッカービューの列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    // ピッカービューの行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return list.count
    }
    
    // ピッカービューに表示する内容
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return list[row]
    }
}

最新情報をチェックしよう！

【swift】ツールバー付きピッカービュー（pickerview）、ドラムロールの使い方

完成形のイメージ

1. ストーリーボードにパーツを準備

2. ピッカーのリストの準備

3. キーボード内に表示するピッカーの設定

4. アクションの指定

5. ピッカーの初期設定

全コード

【swift】ピッカービュー（pickerview）、ドラムロールの使い方

【swift】画面遷移の基本＜performSegueの使い方＞遷移先に値を渡す方法

パソコンの最新記事4件

【python】streamlitで文字を上書きして表示する方法

【ラズパイ】Raspberry Piと人感センサーを使い、検知すると音声を出力する仕組みを作る。

【ラズパイ】Raspberry Piで音声出力~パイソン(python)で音声再生~

【swift】画面遷移時に、配列を渡し、テーブルビューに反映させる。