【SwiftUI】ピッカー(Picker)の使用方法

本記事では、SwiftUIでピッカーを実装する方法とピッカーの表示デザインを変更する方法について解説していきます。

1. ピッカーとは
2. ピッカーの設置方法
3. ピッカーの設定
4. ピッカーの種類
5. ピッカーのラベルを表示する
- 5.1. メニュー型
- 5.2. インライン型
6. 選択肢を連想配列(Dictionary型)で指定する
7. まとめ

ピッカーとは

ピッカーとはあらかじめ用意している複数のデータを選択肢として表示し、その内の1つをユーザが選択する機能です。

任意の選択肢を選ぶことで、画面の表示を切り替えたり指定したデータを登録したりするような機能を実装することができます。

ピッカーの設置方法

ピッカーは、viewsライブラリからPicker()をソースコードにドラッグ&ドロップすることで設置できます。

以下のようなソースコードが追加されたら設置完了です。以降で詳細な値の設定を行っていきます。

Picker(selection: .constant(1), label: Text("Picker")) {
                Text("1").tag(1)
                Text("2").tag(2)
            }

ピッカーの設定

まずは配置したピッカーに各設定値を入れた場合のソースと画面表示を紹介します。

struct ContentView: View {
    @State var value = 0
    var body: some View {
            VStack {
                Picker(selection: $value, label: Text("ピッカー")) {
                    Text("データ1").tag(1)
                    Text("データ2").tag(2)
                    Text("データ3").tag(3)
                }
            }
            .padding()
    }
}

表示結果

ピッカーの実装に必要な設定値はselection,label,text,tagの4種類です。

textはピッカーの選択肢として表示されるテキストを設定します。ユーザがこのテキストをみて任意の選択肢を選びます。

Text("データ1").tag(1)

tagはピッカーの各選択肢を識別するための番号を振ります。tagを設定しないと画面上に表示される選択肢を識別できないので重要な役割になります。

一般的にはint型で0から始まる番号が振られます。他にも文字列型のデータや色を指定するColor型の値を設定することでもできます。

また、タグは選択肢を識別するために使用するので、一意の値を設定する必要がある点に注意しましょう。

Text("データ1").tag(1)

selectionはピッカーで現在選択されているタグの値が格納されます。タグで選択されている値を保持するための@State変数を指定します。デフォルトでは@State変数に格納されている初期値が入ります。

Picker()はselectionのパラメータにバインディング型のデータを要求しているため、変数の値を監視してviewを再描画できる@State変数を定義し、その変数に「$」をつける形でパラメータを渡します。

@State var value = 0
...
Picker(selection: $value, label: Text("ピッカー")) {
...

labelはピッカーのラベルを表します。ピッカーそのもののタイトルのような存在です。Textデータを渡します。普通にPicker()を使用する際には画面上に表示されませんがPicker()をListの中に入れるとラベルを表示することができます。

ラベルを表示する方法は後述します。

Picker(selection: $value, label: Text("ピッカー")) {

ピッカーの種類

ピッカーには、主にメニュー型/ホイール型/セグメント型という3つの表示スタイルがあります。

メニュー型

本記事で紹介してきたスタイルです。web上のアンケートで選択肢の設問に回答する場面などで目にしたことがあるデザインかと思います。スタイルを指定しない場合はデフォルトでメニュー型のスタイルとなります。

誰もが目にしたことのあるデザインですので、アプリに組み込んだ場合はユーザがすんなりと扱えそうです。

ホイール型

縦スクロールによって選択肢を選び取るスタイルです。

ホイール型のスタイルを選択するメリットとして、現在の選択肢の前後の値が表示されるため、選択肢の数が膨大になってしまっても、幅を取ったり想定していないスタイル崩れが発生することもありません。

Pickerの後ろに「pickerStyle()」を設定し、wheelをスタイルに指定することでピッカーの表示を切り替えることができます。

Picker(selection: $value, label: Text("ピッカー")) {
                    Text("データ1").tag(1)
                    Text("データ2").tag(3)
                    Text("データ3").tag(2)
                }.pickerStyle(.wheel)

実行結果

セグメント型

選択肢が横に並んだスタイルです。タブのようの選択することで、表示の切り替えなどを行うことができます。

各選択肢を横に並べて表示しているため、選択肢が多い場合にはあまり向いていません。

Pickerの後ろに「pickerStyle()」を設定し、segmentedをスタイルに指定することでピッカーの表示を切り替えることができます。

ピッカーのラベルを表示する

先述した通り、ピッカーに設定しているlabelのテキストを表示するにはpickerをList{}やformの要素の中に入れてあげる必要があります。

Listの中にpickerを格納してラベルの要素を表示することができるpickerスタイルは主に以下の2つになります。

メニュー型

Listの中にPickerを入れた後にPickerに対して、「.pickerStyle(,menu)」を指定することで左側にラベルが表示されたメニュー型のピッカーを用意することができました。

ラベルがない場合より、何を選択するためのピッカーであるかを一目で判断できるようになります。

List{
　　Picker(selection: $value, label: Text("ピッカー")) {
　　　　Text("データ1").tag(1)
　　　　Text("データ2").tag(3)
　　　　Text("データ3").tag(2)
　　}.pickerStyle(.menu)
}

表示結果

インライン型

インライン型はList内に配置した場合特有の表示デザインになります。

各選択肢のテキストがリスト状に表示されて選択した値にチェックが表示されるようになります。Pickerに対して、「.pickerStyle(,inline)」を指定します。

List{
  Picker(selection: $value, label: Text("ピッカー")) {
    Text("データ1").tag(1)
    Text("データ2").tag(3)
    Text("データ3").tag(2)
  }.pickerStyle(.inline)
}

表示結果

選択肢を連想配列(Dictionary型)で指定する

実際のアプリケーションで運用を行う場合には、固定のデータで選択肢を用意するだけになるとは限りません。例えば、データベースから取得した値をピッカーに設定したり、ユーザが自分で定義した値をピッカーの選択肢として設定したい場合もあるかもしれません。

このような場面に備えるために、あらかじめ表示するデータを連想配列に入れておいて、Picker()部分のソースコードを変えなくても連想配列のデータを変更するだけで好きにPickerの選択肢を変更できる例をご紹介します。

struct ContentView: View {
    @State var value = 0
    var pickData:[Int:String]=[0:"データ1",1:"データ2",2:"データ3"]
    var body: some View {
            VStack {
                List{
                    Picker(selection: $value, label: Text("ピッカー")) {
                        ForEach(pickData.keys.sorted(), id: \.self) { key in
                            Text(pickData[key] ?? "").tag(key)
                        }
                    }.pickerStyle(.inline)
                }
            }
            .padding()
    }
}

ここまで紹介してきたデータと同じデータを作成するため[Int:String]型のデータを作成し、Picker内でForEachを使用してループすることでデータを作成することができます。