3
2

More than 3 years have passed since last update.

PickerViewの実装までの流れ

Posted at

はじめに

pickerviewの実装について記事を書いていこうと思います。
駆け出しエンジニアということもあるのでご指摘などございましたらご教授よろしくお願いします。
(swift5.4.2)
まずPickerの実装をするまでの工程を紹介します。
1.UIPickerViewDelegate UIPickerViewDateSourceの定義と設定
2.UIPickerViewの列と行とデータ要素の数の設定
3.UIPickerViewの標示する配列の設定

ゴール地点!

AnyConv.com__画面収録 2020-08-04 22.20.16.gif

1.UIPickerViewDelegate UIPickerViewDateSourceの定義と設定について

まず
Delegateとは?
移譲や任せるなどという意味らしく、他にはデザインパターンなどという記述がありとても解釈が難しいところ。
なので私の抽象的な解釈を述べますと
「他のクラスに処理をお任せし、移譲する処理の流れのことをデザインパターンと言いたいのでは?」
とりあえずPickerの実装にDelegateが必要要素と覚えておきましょう!

Datesourceとは?
「テーブル(ここでいうpicker)の具体的な表示内容を決める」
以上です。ww

filename.rb
let datalist = ["item1","item2","item3","item4"]

これでpickerのドラムロールに入れたい値をかく!

filename.rb
import UIKit

class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource

これでclassにプロトコルであるUIPickerViewDelegate, UIPickerViewDataSource
の定義は完成しました

filename.rb
  pickerView.delegate = self delegateの設定
        pickerView.dataSource = self datesourceの設定

ここでは、delegateやdatesourceはどれを指しているのか?
self=自分自身
つまり、selfの自身とは、ViewControllerのことを指している。

以上

2.UIPickerViewの列と行とデータ要素の数の設定

filename.rb
//列数の設定
 func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
//行とデータ要素数の設定
func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return dataList.count
    }

このメソッドはpicker実装には必須要素になる。
列数の設定
メソッドの処理部分(return n)のnの部分を希望列数にする
行とデータ要素の数の設定
複数行にしたい場合、

filename.rb

case 0:
            return datelist1.count            
case 1:     return datelist2.count
default:
            return 0 

caseN N=行数
countは要素数を表すので要素数の変更したい場合は、datalistの処理を変更してあげるとcountが合わせてくれる!

3.UIPickerViewの標示する配列の設定

filename.rb
func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {

        return dataList[row]
    }

このメソッドが無いとpickerのデータが反映されずに?の値が帰ってきます。
なので必須で書いてください

Rowとは?
おそらく、ViewControllerの行番号を指しますので
datalistの行番号を表示して!
という解釈でよろしいかと思います

終わりに

これでpickerの実装はされたと思います!
ゴール地点
では、pickerのデータがlabelに反映されていますが、そちらの方法は
また今度記事で書いていこうかと思います!

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2