iphoneやiPadで、決められた内容から選択して、入力する際、クルクル回転するピッカービュー（ドラムロール）は便利ですよね。今回は、ピッカービューのプログラムの使い方をご紹介したいと思います。
目次
完成形のイメージ
今回ご紹介するコードで出来上がった完成形を動画にしました。また、全コードは、ページの最後に載せています。
1. ストーリーボードにパーツを準備
まず、ストーリーボードに【UILabel】【UIPickerView】【Button】を配置して下さい。そして、それぞれをコードにつなぎます。
【Button】をタップすると、pickerViewが表示されるだけのコードを記述しています。
@IBOutlet weak var label: UILabel!
@IBOutlet weak var pickerView: UIPickerView!
@IBAction func button(_ sender: Any) {
pickerView.isHidden = false
}
2. デリゲートとデータソース
- classにデリゲート（UIPickerViewDelegate）とデータソース（UIPickerViewDataSource）を記述し、vewDidLoadにselfで指定して下さい。
- pickerViewに表示したい内容を、dateList内に配列として記述します。
- label.text = “1.0” で、Labelの初期値を1.0と指定しています。
- buttonをタップするとpickerVIewが表示されるようにしたいので、最初はpickerView.isHidden = true として、非表示にします。
import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
@IBOutlet weak var label: UILabel!
@IBOutlet weak var pickerView: UIPickerView!
let dataList = [
"0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1.0"
]
override func viewDidLoad() {
super.viewDidLoad()
pickerView.delegate = self
pickerView.dataSource = self
label.layer.zPosition = 1
label.text = "1.0"
pickerView.isHidden = true
}
3. PickerViewの列の数を指定
1列を指定しています。
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}4. PickerViewの行数を指定
行数は、dataListの個数分欲しいので、dateListのcount分を指定しています。
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return dataList.count
}
5. 表示する内容を指定
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return dataList[row]
}
6. 処理の指定
PickerViewによって行を選択すると、呼び出されるメソッド。dataListのrow番目の値をlabel.textに反映し、その後、pickerViewを非表示にしています。
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
label.text = dataList[row]
pickerView.isHidden = true
}
7. 画面タップでピッカービューを閉じる。
touchesBeganは便利なメソッドです。画面をタップすると、{ }カッコ内のコードが実行されます。今回は、画面をタップすると、pickerViewを非表示にするコードを記述しています。
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
pickerView.isHidden = true
}
全コード
import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
@IBOutlet weak var label: UILabel!
@IBOutlet weak var pickerView: UIPickerView!
let dataList = [
"0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1.0"
]
override func viewDidLoad() {
super.viewDidLoad()
pickerView.delegate = self
pickerView.dataSource = self
label.layer.zPosition = 1
label.text = "1.0"
pickerView.isHidden = true
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return dataList.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return dataList[row]
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
label.text = dataList[row]
pickerView.isHidden = true
}
@IBAction func button(_ sender: Any) {
pickerView.isHidden = false
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
pickerView.isHidden = true
}
}
【swift】
ツールバー付きピッカービュー（pickerview）、ドラムロールの使い方