お天気プログラムの集大成

ピッカービューで選んだ地域の天気情報を表示するプログラム

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

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

　このところ、公開されている天気情報のAPIを使って、指定した地域の天気予報を表示するプログラムを作り込んでいます。その中で、前回は地域の名前をピッカーで選択すると、それに対応する地域コードを自動入力できるユーザーインターフェースを作成しました。その際、得られた地域コードを使って実際に天気情報そのものにアクセスするところまでは届きませんでした。

　そこで今回は、その続きとして選んだ地域のコードに対する天気予報を表示する部分を加えて完成させます。

　とはいえ、APIにコードを与えて特定の地域の天気情報を取得し、表示するプログラムは、前々回まででひととおり動いていました。というわけで今回は、特に新しい要素は導入せずにこれまでに実証してきたものを組み合わせて、アプリとしての動作をまとめ上げることになります。その際には、UIKitに含まれる各コンポーネントの動作の特徴を生かして、最適なものを最適な使い方で利用するようにしましょう。

前々回と前回のプログラムを合体させる

　まずは前回に作成したピッカーによる地域選択プログラムをベースとして、そこに前々回の天気情報表示プログラムを追加して合体させます。前回のプログラムは、「地域コードを入力」というラベルと地域コードが表示されるテキストフィールドを最上部に並べ、その下にピッカーを配置したレイアウトになっていました。今回はその下に、天気情報のタイトル（「〇〇県　××　の天気」）を表示するラベル、複数行の概況を表示するテキストビュー、天気予報を表示するラベル、予報の画像を表示するイメージビューを追加していくことになります。

前回のピッカーのユーザーインターフェースに、前々回の天気予報表示プログラムの要素を加えていきます。まずは、ビューコントローラーの先頭でtitleLabel以下、必要なコンポーネントを定義していきます

　それぞれのコンポーネントの初期化設定も、viewDidLoadメソッドの中に書いていきます。内容は前々回のものと同じにします。

viewDidLoadメソッドの中では、空の状態で定義したコンポーネントに、必要な初期設定を加えていきます。レイアウト（フレーム設定）については別途指定するので、ここでは触りません

　前々回と異なるのは、各コンポーネントのレイアウトの位置です。具体的にはピッカーを配置したぶんだけ下に下げることになります。これは例によって、viewWillLayoutSubviewsメソッドの中で設定しています。

レイアウトについては、viewWillLayoutSubviewsメソッドの中で設定します。titleLabel以下、今回加えたコンポーネントについては、ピッカーの高さを考慮して、その下に配置されるようにします

　ここまでできたら、とりあえず動かして、レイアウトなどを確認しましょう。まだ実際の天気情報を読み取って表示する部分は加えていないので、地域を選んでも天気予報は表示されません。

天気情報を取得する部分を記述する前に、とりあえず全体のレイアウトを確認してみましょう。各コンポーネントの背景色をビューとは微妙に変えているので、配置、大きさがひと目でわかります

　レイアウトが確認できたら、実際に天気情報を読み込んで表示するためのプログラムを書き加えます。それをどのタイミングで動かすのがもっとも適しているのか考えてみましょう。答えは1つではありませんが、いちばんストレートなのは、ピッカーによって地域がが選択されたタイミングでしょう。メソッドで言えば、ピッカービューのデリゲートのdidSelectRowですね。前回は、選ばれた地域のコードをテキストフィールドに書き込んでいた部分です（図5）。