ピッカービューで項目の選択が容易に

地名を選んで天気予報を表示するプログラム

2017年09月04日 17時00分更新

文● 柴田文彦　編集●吉田ヒロ

　前々回から、インターネット上で無償公開されている天気情報のAPIを使って、簡単な天気予報を表示するプログラムに取り組んでいます。前回までで、天気予報を知りたい地域のコードを数字で入力すると、その地域の天気概況と、明日の天気予報をアイコン付きで表示するところまでのプログラムができました。

　しかし、前回の最後にも述べたように、そのプログラムには、6桁の数字で表された地域コードを知らないと、天気情報を引き出せないという欠陥がありました。そのままでは実験レベルでしか使えないプログラムです。

　そこで今回は、iOSの標準的なユーザーインターフェースであるピッカー（UIPickerView）を使って、ユーザーが地域の名前を選択するだけで自動的に地域コードが入力されるようにしてみます。ただし、ピッカーはテーブルビューとよく似た、ちょっと複雑な仕組みを持つインターフェースです。単に配置して選択肢をセットすれば終わりというものではありません。今回は、このピッカーの使いこなしに注力して、地域名の選択によって地域コードを入力する部分だけを作ります。天気予報プログラムとの結合は、次回に持ち越します。

ピッカーの使い方を知る

　ピッカーを利用するには、UIPickerViewクラスのオブジェクトを画面に張り付ける、つまりビューコントローラーのビューのサブビューとして追加することがまず必要となります。そかし、それだけでは何も表示されません。とりあえず、ピッカーの選択肢となるデータを与えてやる必要があるのは明らかでしょう。

　しかしそのデータは、固定的な配列などをピッカーオブジェクトのプロパティにセットするなどして直接与えればいいというわけではありません。ピッカーの「データソース」として登録したオブジェクトに対してピッカーがいろいろと情報を問い合わせてくるので、それに対して答えることでピッカーは内容を表示できるようになります。例えば「選択肢は全部でいくつ？」とか、「n番目の選択肢の値は何？」といった問いに答えます。データソースでは、あらかじめ選択肢を配列として用意しておくのが普通ですが、プログラムの実行中にダイナミックに選択肢が変化する状況に対応したり、場合によっては、プログラムでその都度選択肢を生成するといった使い方も可能となります。

　また、ピッカーはユーザーが選択肢の中からどれかの項目を選んだことをプログラムに知らせるために「デリゲート」という仕組みも使います。これはピッカーを利用する側のオブジェクト（それがデリゲートになる）が、あらかじめ用意しておいた既定の名前のメソッドを、ピッカー側から呼び出すことによって通知してくるのです。このようなピッカーのデータソースとデリゲートの仕組みは、テーブルビューとまったくと言っていいほど同じです。

　とりあえず必要最小限の構成で、ピッカーを動かしてみましょう。

基本的なピッカーのプログラミング方法を確認するため、ビューコントローラーをピッカーのデリゲートとデータソースに指定し、7つの都市名の文字列からなる配列を用意しました

　このプログラムでは、用意したビューコントローラーに対して、UIPickerViewDelegateとUIPickerViewDataSourceという2つのプロトコルを指定して、ピッカーのデリゲートとデータソースに設定しています。ビューコントローラーの中ではピッカーのオブジェクト（aPicker）を作成し、ピッカーに選択肢として表示する文字列として、7つの都市名を表す文字列の配列（areas）も定義しています。

　viewDidLoadメソッドの中では、ビューの背景色を白に設定したあと、ピッカーのデータソースとデリゲートとして、このビューコントローラー自身（self）を指定しています。その後、ピッカーのフレームを適当に設定してピッカーをビューコントローラーのビューに張り付けます。

　ピッカーがこのビューコントローラーの中で機能するために必要なメソッドとしては、指定されたコンポーネント（ピッカーの1つのダイヤル）に要素がいくつあるか、ピッカーにはいくつのコンポーネントがあるのか、そして、指定された行に表示すべき値（文字列）は何か、の問い合わせに答える3つを実装しています。