“UIPickerView” を実装する流れを視覚的に解説!|[Swift超絶初心者]

Swift

今回は、自作アプリを作るにあたって、ぶち当たった壁”UIPickerView”について解説します!

解説はおなじみ、Swift超絶初心者ことはっち〜です🍯 お手柔らかに笑

超初心者だからこそ、同じ悩みを抱える初心者さん仲間に向けて発信しております^^ 一緒に頑張りましょう

今回の解説では、図を使って視覚的に説明するので、UIPickerViewにおいて私のつまづきポイントである

コンポーネント(Component)の概念を理解しやすいと思います

スポンサーリンク

UIPickerViewとは

UIPickerViewクラスは、ホイールを利用して選択を行うピッカーを管理します

この参考書の説明だけだと、ぴんと私は来なかったので、具体例をあげますね🍯

iPhoneのタイマーを想像してください^^

これですこれ! タイマーみたいに画面を上下にスワイプして、目的の値にピッタリ止めたりするものがピッカーです🍯

はっち〜
はっち〜

簡単そうだし、自作アプリに取り入れよ!

と思ったんですけど、Componentという概念を理解していなかっため、壁にぶち当たりました笑

ではcomponentの説明に移ります^^

Componentとは

ググってみると

構成要素。部品。
・コンピュータ機器やソフトウェアの部品。
・ステレオで、チューナー・アンプ・プレイヤー・スピーカなどの単独の機器

と出てきます

読者さん
読者さん

はにゃ?

そうなるよね笑 私も調べてて、納得する意味に出会わなかったのでとりあえず

ピッカーを構成する要素の一つ

というふうに考えてください^^

続いて図で説明していきます

図解でComponentを理解しよう

私は参考書の図を見て、ようやく理解できたので、私も図を用意しました🍯

ただ、その参考書の図が少しわかりにくいので、アレンジをだいぶ加えて説明します

まず、コンポーネントに当たる部分は枠で囲まれた部分になります 

今回の例で言うと2つあります

青枠のコンポーネントでは要素として、一組から三組を要素として持ちます

続いて、黄枠のコンポーネントでは要素として、田中さんから上田さんまでの10人分の要素を持っています

(注意:黄枠のコンポーネントの場合、要素が多いので全ては表示されていないです)

そして、このコンポーネントを含めた全体像がピッカーというわけです⌚️

PickerViewを作成する流れ

PickerViewを制作する流れ、つまり工程の順番が、とても重要なのできっちり抑えましょう🍯

はっち〜
はっち〜

私の場合は、流れを意識する事で、納得度合いが全然違ったよ🍯

では、流れですが

  1. UIPickerViewのコンポーネントの数(列の数)を指定
  2. UIPickerViewの各コンポーネントにおける行数の指定
  3. UIPickerViewのコンポーネントで表示するタイトルを指定
  4. UIPickerViewの要素(Row)が選択された時の処理

の順番でコードを書いていきます🧑‍💻

また、デリケードを宣言する必要があるので、注意してください

(最後にコードの全体像を載せておくので、確認してみてください^^)

では今回の例をもとに局所的なコードを見ていきましょう

1.コンポーネントの数を指定

コンポーネントを指定するメソッドは以下のようになります

 //1.コンポーネントの数を指定する
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }

returnでコンポーネントの数(今回は2こ)を返してます

returnの数を増やすと、コンポーネントが増え、選択する要素ではなく、項目が増えていきます🍯

2.コンポーネントの行数を指定

コンポーネントの行数、つまりは各コンポーネントでいくつ要素を表示するのかを指定するメソッドとなります

コードは以下のようになります

    //2.コンポーネントの行数を指定
    //→コンポーネント単位のデータ数を指定
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        
        switch component {
        case 0:
            //一番左のコンポーネントの行数
            return classArray.count
        
        case 1:
            //左から2番目のコンポーネントの行数
            return nameArray.count
        default:
            return 0
        }
    }

メソッド名はpicerViewとなっていますが、numberOfRowsInComponentと入力すると、予測変換でこの形が出てきます🍯

はっち〜
はっち〜

デリゲードメソッドに限ってはこの書き方なのかな??

ここでは、引数として入力されるcomponent(今回は上で指定した数=2が入ります)をもとに条件分岐を行います

実行結果を見ると分かるのですが、componentは、左から0,1,2…と順番が紐付けられていくようです🍯

なので、一番左に組を表す(一組から三組)コンポーネントを置きたいため

caseが0の場合は、classArray配列の要素分をreturnして

caseが1の場合はnameArray配列の要素分をreturnします🍯

UIPickerViewのコンポーネントで表示するタイトルを指定

いよいよ後半戦!

各コンポーネントの各行(各要素)にタイトルをtitleForRowメソッドによって指定します🍯

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        switch component {
        case 0:
            return classArray[row]
        
        case 1:
            return nameArray[row]
        default:
            return "error"
        }
      
    }

先程の同じ要領で、各コンポーネントの場合で指定を行いたいので、Switch文で条件分岐します

そして、それぞれのコンポーネントで表示したい文字を、配列のrow番目から取り出します🍯

つまり、classArrayとnameArrayに入力した順番で、コンポーネントに表示させます

UIPickerViewの要素(Row)が選択された時の処理

最後に、コンポーネントの要素が選択された場合の処理を、didSelectRowメソッド行います🍯

    //UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        //選択された時の処理を書く
        
    }

ただ、今回はUIPickerViewのコンポーネントの概念を、理解したかっただけなので、処理は書きませんでした

このメソッドも2つ目・3つ目のメソッドと同じく、デリゲードメソッドなので、didSelectRowと入力することで予測変換を行いましょう🍯

コードの全体像

nameArrayやclassArrayなど、何が入っているか説明がまだだったので、最後に全体像を確認していきましょう!

//
//  ViewController.swift
//  PickerPractice
//
//  Created by 8mitsuBoy on 2021/05/27.
//

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    
    
    @IBOutlet weak var nextButton: UIButton!
    
    var classArray = ["一組","二組","三組"]
    var nameArray = ["田中","鈴木","山本","山田","五十嵐","豊田","川上","杉山","増田","上田"]
    
    @IBOutlet weak var pickerView: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
//        pickerView.showsSelectionIndicator = false
        pickerView.dataSource = self
        pickerView.delegate = self
        nextButton.layer.cornerRadius = 20.0
        
    }

    //1.コンポーネントの数を指定する
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        
        return 2
    }
   
    //2.コンポーネントの行数を指定
    //コンポーネント単位のデータ数を指定
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        
        switch component {
        case 0:
            //一番左のコンポーネントの行数
            return classArray.count
        
        case 1:
            //左から2番目のコンポーネントの行数
            return nameArray.count
        default:
            return 0
        }
    }
    
    //3.コンポーネントと、各行のタイトルを設定
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        switch component {
        case 0:
            return classArray[row]
        
        case 1:
            return nameArray[row]
        default:
            return "error"
        }
      
    }
    
    //UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        //選択された時の処理を書く
        
    }
    
    
    @IBAction func next(_ sender: Any) {
        
        performSegue(withIdentifier: "next", sender: nil)
        
    }

}

はっち〜
はっち〜

スマホで見ると、ちょっと大変かも笑

シュミレーターで確認

では、今回のコードでシュミレーターを立ち上げて確認しましょう🍯

おーちゃんとできてますね^^

ボタンの部分は、今回関係ないので気にしないでください笑

また、このサイトや他のサイトを見てもまだ納得できない場合や勉強方法で悩んでいる場合、こちらの記事を参考程度にどうぞ🍯

Udemyでは、学習から質問まで対応してくれるコースがあるのでおすすめです🍯

はっち〜
はっち〜

私もUdemyで学習してるよ〜

プログラミングスクールだと、もっと気軽に質問できますし、いいのかもしれませんね🤔 

質問できる環境があるありがたさが今身に染みて感じてます笑

最後に

みなさんお疲れ様です🍯

プログラミングって疑問点を解決するまで結構時間かかりますよね笑

ただ、一度完全に理解すると結構定着するので、粘り強く頑張りましょう!

プログラミング超初心者はっち〜も日々、プログラミングの悩みをかかえてばかりです笑

それでは次回ブーン🐝

コメント

タイトルとURLをコピーしました