PickerViewを使ってみよう [ swift4, Xcode9, PickerView ]

Blog

 

今回は、PickerViewの使い方を説明します。

PickerViewに似ているものではDatePickerがあります。

こちらは日付などに使うものになります。

今回は、一般的なPickerViewを使っていきます。

 

 

 

 

 

UIの設定

 

  • PickerViewとLabelを配置。

 

 

 

 

DelegateとDataSourceの設定

 

  • PickerViewを選択し、「controlキー」を押しながら黄色のアイコンまでドラッグ&ドロップ。
  • datasourceとdelegateに白丸のチェックを入れる。

 

 

 

 

Outlet接続

 

  • LabelをOutlet接続。Nameを「label」。

 

 

 

 

コードの記入

 

  • pickerViewに表示したいデータを格納。

 

 

let dataList = [["ラーメン","チャーハン","天津飯","餃子"],["並盛り","大盛り","特盛り"],["一人前","二人前","三人前"]]

 

  • subclassにdelegateとdatasourceを追加。

 

 

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
   
}

 

  • 必要なメソッドを記入。

 

   // UIPickerViewの列の数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return dataList.count
    }
    
    // UIPickerViewの行数、要素の全数
    func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return dataList[component].count
    }
    
    // UIPickerViewに表示する配列
    func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {
        
        return dataList[component][row]
        
    }
    
    // UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView,
                    didSelectRow row: Int,
                    inComponent component: Int) {
        
        //コンポーネントごとに現在選択されているデータを取得する。
        let data1 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 0), forComponent: 0)
        let data2 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 1), forComponent: 1)
        let data3 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 2), forComponent: 2)
        
        label.text = "\(data1!) \(data2!) \(data3!)"
        
    }

 

 

全コード

 

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    let dataList = [["ラーメン","チャーハン","天津飯","餃子"],["並盛り","大盛り","特盛り"],["一人前","二人前","三人前"]]
    
    
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    
    // UIPickerViewの列の数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return dataList.count
    }
    
    // UIPickerViewの行数、要素の全数
    func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return dataList[component].count
    }
    
    // UIPickerViewに表示する配列
    func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {
        
        return dataList[component][row]
        
    }
    
    // UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView,
                    didSelectRow row: Int,
                    inComponent component: Int) {
        
        //コンポーネントごとに現在選択されているデータを取得する。
        let data1 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 0), forComponent: 0)
        let data2 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 1), forComponent: 1)
        let data3 = self.pickerView(pickerView, titleForRow: pickerView.selectedRow(inComponent: 2), forComponent: 2)
        
        label.text = "\(data1!) \(data2!) \(data3!)"
        
    }

}

 

 

実行結果

 

 

 

 

いかがでしたか?

 

以上で「PickerViewを使ってみよう [ swift4, Xcode9, PickerView ]」の説明を終わります。

 

 

🤗

 

 

コメント