Swift

Swift:UIPickerViewでセレクト入力!


今回は、UIPickerViewについてです。

作るものは、
f:id:jumprails3303:20161122225640p:plain

これです!

pickerViewで選択したものが、
上のUILabelに反映される。

というものです。

UIPickerViewについて

UIPickerViewとは、

くるくる回るアレです!

IOSっぽくてカッコ良いです。

まずは、新しいプロジェクトを作成して、

StoryBoardを開いてください。

そして、こんな感じに配置してください。

f:id:jumprails3303:20161122230124p:plain

一番上にあるのがUILabel

真ん中にあるのが、UIPickerViewです。

そして、コードと紐付けましょう!

名前はそれぞれ、

UILabel:label

UIPickerView:pickerView

としましょう。

import UIKit

class ViewController: UIViewController{

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var pickerView: UIPickerView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
    
    
    
   
}

となっていれば成功です。

しかし、まだこれでは
pickerViewにデータが入っていません。

あとは

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var pickerView: UIPickerView!
    
    let texts = ["swift","ralis","ruby","php","html"]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        pickerView.delegate = self
        pickerView.dataSource = self
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
    
    // pickerの列の数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 4
    }
    
    // pickerに表示する値の数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return texts.count
    }
    
    
     //pickerに表示する値を返すデリゲートメソッド.
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return texts[row]
    }
    
    
    // pickerが選択された際に呼ばれるデリゲートメソッド.
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        label.text = texts[row]
    }

 
    
   
}

このように編集しましょう。

textsという配列の中に
データを入れ、
そのデータがpickerViewに反映されます。


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1