Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > UIPickerViewで複数リストから選択

UIPickerViewでリストから選択

サンプル画像

ドラム缶みたいなリストから一行選択するコントロールです。

UIPickerViewのクラス階層

NSObject

UIResponder

UIView

UIPickerView


参考:011 UIPickerViewで値の選択
参考:[Swift]UITextFieldの入力にUIPickerViewを使う方法
参考:Swift - Show UIPickerView text field is selected, then hide after selected
参考:UIPickerView, UITableView, and UICollectionView
参考:UIKit Framework Reference UIPickerView Class Reference

やってみた

サンプル画像

まず簡単に宣言して追加してみます。


        var myUIPicker: UIPickerView = UIPickerView()
        myUIPicker.frame = CGRectMake(0,0,self.view.bounds.width, 250.0)
        self.view.addSubview(myUIPicker)
        

これだけではうんともすんとも動作しません、UIViewにdelegateする必要があります


        var myUIPicker: UIPickerView = UIPickerView()
        myUIPicker.frame = CGRectMake(0,0,self.view.bounds.width, 250.0)
        myUIPicker.delegate = self
        myUIPicker.dataSource = self
        self.view.addSubview(myUIPicker)
        

delegateをつけると、'ViewController' does not conform to protocol 'UIPickerViewDelegate' というエラーが発生します。これはUIViewにDelegateをセットしていないのでDelegateを追加+必要な関数をそれぞれ追加します。 これら関数は無条件で必ず追加するようにしてください。(追加しないとコンパイルできません)


import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    var myUIPicker: UIPickerView = UIPickerView()
    var salarymanArr: NSArray = ["Swiftサラリーマン","漫画サラリーマン","英会話サラリーマン","デザインサラリーマン"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myUIPicker.frame = CGRectMake(0,0,self.view.bounds.width, 250.0)
        myUIPicker.delegate = self
        myUIPicker.dataSource = self
        self.view.addSubview(myUIPicker)
    }
    
    //表示列
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
    
    //表示個数
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return salarymanArr.count
    }
    
    //表示内容
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String {
        return salarymanArr[row] as String
    }
    
    //選択時
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        println("列: \(row)")
        println("値: \(salarymanArr[row])")
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

複数行にしたい場合

サンプル画像

こんな感じにするには以下の様に記載します。一例ですが配列を複数用意してnumberOfComponentsInPickerViewに表示したい列数を追加します


import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    var myUIPicker: UIPickerView = UIPickerView()
    var salarymanArr: NSArray = ["Swiftサラリーマン","漫画サラリーマン","英会話サラリーマン","デザインサラリーマン"]
    var yakushokuArr: NSArray = ["平社員","課長","部長","社長"]
    var kinmuchiArr: NSArray = ["東京","大阪","博多","名古屋"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myUIPicker.frame = CGRectMake(0,0,self.view.bounds.width, 180.0)
        myUIPicker.delegate = self
        myUIPicker.dataSource = self
        self.view.addSubview(myUIPicker)
    }
    
    //表示列
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 3
    }
   
    //表示個数
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            
        if (component == 0){
            return salarymanArr.count
        }else if (component == 1){
            return yakushokuArr.count
        }else if (component == 2){
            return kinmuchiArr.count
        }
        return 0;
    }
    
     //表示内容
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String {
        
        if (component == 0){
            return salarymanArr[row] as String
        }else if (component == 1){
            return yakushokuArr[row] as String
        }else if (component == 2){
            return kinmuchiArr[row] as String
        }
        return "";
    }
    
    //選択時
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

        if (component == 0){
            println("列: \(row)")
            println("値: \(salarymanArr[row])")
        }else if (component == 1){
            println("列: \(row)")
            println("値: \(yakushokuArr[row])")
        }else if (component == 2){
            println("列: \(row)")
            println("値: \(kinmuchiArr[row])")
        }
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

TextFieldの入力時に下からビョーンとPickerViewを表示させたい場合

サンプル画像

ToolBar、TextField, PickerViewをそれぞれ利用して作成します。


import UIKit

class ViewController: UIViewController,UIPickerViewDelegate,UIToolbarDelegate {
    
    var salarymanArr: NSArray = ["Swiftサラリーマン","漫画サラリーマン","英会話サラリーマン","デザインサラリーマン"]
    var myToolBar: UIToolbar!
    var myTextField: UITextField!
    var myPickerView: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //PickerView作成
        myPickerView = UIPickerView()
        myPickerView.showsSelectionIndicator = true
        myPickerView.delegate = self
        
        //TextField作成
        myTextField = UITextField(frame: CGRectMake(50, 350, 320, 50))
        myTextField.placeholder = salarymanArr[0] as? String;
        self.view.addSubview(myTextField)
        
        //ToolBar作成。ニョキ担当
        myToolBar = UIToolbar(frame: CGRectMake(0, self.view.frame.size.height/6, self.view.frame.size.width, 40.0))
        myToolBar.layer.position = CGPoint(x: self.view.frame.size.width/2, y: self.view.frame.size.height-20.0)
        myToolBar.backgroundColor = UIColor.blackColor()
        myToolBar.barStyle = UIBarStyle.Black
        myToolBar.tintColor = UIColor.whiteColor()
        
        //ToolBarを閉じるボタンを追加
        let myToolBarButton = UIBarButtonItem(title: "Close", style: .Bordered, target: self, action: "onClick:")
        myToolBarButton.tag = 1
        myToolBar.items = [myToolBarButton]
        
        //TextFieldをpickerViewとToolVerに関連づけ
        myTextField.inputView = myPickerView
        myTextField.inputAccessoryView = myToolBar
    }
    
    func numberOfComponentsInPickerView(pickerView: UIPickerView!) -> Int {
        return 1
    }
    
    func pickerView(pickerView: UIPickerView!, numberOfRowsInComponent component: Int) -> Int {
        return salarymanArr.count
    }
    
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
        return salarymanArr[row] as? String;
    }
    
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        myTextField.text = salarymanArr[row] as? String;
    }
    
    //閉じる
    func onClick(sender: UIBarButtonItem) {
        myTextField.resignFirstResponder()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

おまけ

初期値の設定方法(2015/3/28)


        var myUIPicker: UIPickerView = UIPickerView()
        myUIPicker.frame = CGRectMake(0,0,self.view.bounds.width, 250.0)
        myUIPicker.delegate = self
        myUIPicker.dataSource = self
         myUIPicker.selectRow(17, inComponent: 0, animated: false);
        self.view.addSubview(myUIPicker)

17番目を選択した状態をこれで実行できます

↓こんな記事もありますよ!

GはGoogle他のアルファベットを勝手に妄想してみる

さて昨日はGoogleが衝撃的な発表でAlphabetという親会社をつくって、Googleはアルファベットの中のGがGoogleとの 位置づけで今後展開していくとの事。ネーミングもですが、今後の期待を大きく感じる、またわかりやすく好印象だったのか株価も 大きく上がったとのことでした。さて、その他残りのアルファベットはどんな風になるのかなぁと勝手に歩きながら妄想してみました。

UIStepper

さて今回は基本のコンポーネントの一つStepper(メモリを少しずつ+とーで上下させるコントロール)を説明します。 単純なコントロールですのが、初期設定で、+と-が表示される優れものです。ただ、単調な為に記事にするのが面白くないので、 何度も申し訳ありませんが「ヒゲ」にフォーカスして、ヒゲを剃るStepper(ヒゲの量を調整する)を作成して説明してみます。

WWDC2015で面白い発表があるのかワクワクしてみる。

OS9の発表だったり、 iPadでアプリを分割して複数表示できたり、Apple Payがカナダに対応したり(それはどうでもいいですかね、、、)、 盛りだくさん。Appleファンには たまらない色んな新情報が色々でてきていますのでその中で私がきになる情報をフォーカスして少し調査してみます。 Swift関連もあるようですので共有してまいります。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!