スイッチの状態の変化をイベントとして検出

　次に、配置したスイッチをユーザーが操作した際に、それをイベントとして受け取る方法を確認します。これは、実は前回のスライダーとほとんど同じです。UIControlEventsのvalueChanged（値が変化した）というイベントをターゲットに設定したメソッドで受けることになります。ただし、スライダーの場合は、変化する値は連続した「量」として受け取ることができたのに対し、スイッチの値はオンかオフかの2とおりだけです。それは、isOnというプロパティの値がtrueかfalseかで判断します。コードは画面で確認してください。

スイッチの「値」の変化は、valueではなく、isOnというプロパティで知ることができます。それがtrueならオン、falseならオフです

　このプログラムを動かしてスイッチを操作してみましょう。スイッチにタップしてオンの状態にすると画面のビューの背景色が黒に変化します。そこからまたスイッチをタップしてオフにすると、ビューの背景色は元の薄い灰色に戻ります。

スイッチが配置された親のビューの背景色を、スイッチオンなら黒、オフなら薄いグレーになるように設定してプログラムを起動し、スイッチを操作してみました

3つの要素を持つセグメントコントロールを作成して配置

　次にセグメントコントロール（UISegmentedControl）を配置して、実際に使ってみましょう。このコントロールには、これまでに登場したものとちょっと異なる特徴があります。それは、「初期状態では中身が何もない」ということです。セグメントコントロールは、複数のセグメントから構成されますが、初期状態ではセグメントは1つもないのです。従ってサイズもゼロです。作成した時点では空の容器のようなもので、そこに必要なセグメンントを1つずつ追加していきます。

　そのために用意されているのがinsertSegmentというメソッドです。このメソッドは、セグメントに表示するタイトル、追加する位置、その際にアニメーションを表示するかどうか、という3つの引数を取ります。「First」「Second」「Third」という3つのタイトルを持ったセグメントを作成して表示する例を示しましょう。

セグメントコントロールにセグメントを1つずつ追加するinsertSegmentメソッドを使って、3つのセグメントを追加しています

　この例では、3つのセグメントをすべて0の位置に追加しています。そうすると、もとにあったものは1つずつ右にずれるので、新しいものが左端に追加されることになります。そのため、最初に追加したセグメントが右端に、最後に追加したものが左端に配置されるのです。

　この例では、ユーザーがセグメントコントロールを操作した場合の処理も含んでいます。セグメントコントロールの操作も、やはりvalueChangedというイベントを発生させます。それを受けて、ここではオンになったセグメントの位置（インデックス）を調べているだけです。位置は数値として取得できていることがわかります。

セグメントコントロールの操作も、valueChanedというイベントとして検出できます。変化した値は、selectedSegmentIndexとして新たにオンになったセグメントの位置として知ることができます

セグメントコントロールを使ってマップビューのマップモードを切り替え

　セグメントコントロールの応用として、マップビューのマップモードを切り替える例を示しましょう。マップビューについては以前に取り上げました。またその際に地図の表示内容を、通常の地図、衛星写真、フライオーバー、それらのハイブリッドのように切り替えるmapTypeというプロパティについても説明しました。今回は、マップビューにオーバーレイ表示したセグメントコントロールによって、そのプロパティを切り替えて直ちに表示内容を変更できるようにしてみます。

　まずセグメントコントロールには「ハイブリッド」「フライオーバー」「スタンダード」という3つのセグメントを付加します。

マップビューの上に、さらに3つのセグメントを持つセグメントコントロールを重ねて配置しています

　このセグメントコントロールの操作によって発生するイベント処理では、選択されたセグメントのインデックスを調べ、mapTypeを変更します。その際に、セグメントコントロール自身のティントカラーも変更しています。これはマップビューの表示内容によって、セグメントコントロールが見えにくくなってしまうのを防ぐためです。セグメントコントロールは、マップビューの下辺に近い位置に配置しています。

ユーザーがセグメントコントロールを操作すると、それによって選ばれたセグメントに対応してマップビューのmapTypeを変更し、ついでにセグメントコントロール自身のtintColorも変更します

　このプログラムを動かすと、最初は日本地図が表示され、それに重なってセグメントコントロールも表示されます。

セグメントコントロールは、枠と文字以外の部分は透明なので、マップビューに重ねて配置しても、まったく違和感がありません

　初期状態では何も選ばれていませんが、マップタイプとしてはスタンダードに設定されているので、実際のアプリでは「スタンダード」が選ばれた状態で表示したほうがいいでしょう。そのためにはsetEnableというメソッドを使います。完璧を目指す人は、このメソッドの使い方を調べてプログラムに追加してみてください。とりあえず「スタンダード」のセグメントをタップすればそこが反転して選択状態になりますが、マップタイプは変化がないので表示内容は変更されません。

「スタンダード」のセグメントが選ばれた状態では標準的な地図を表示します。セグメントコントロール自体の色は黒です

　「フライオーバー」をタップすると地図の内容はフライオーバーに切り替わります。この際のセグメントコントロールは黄色で表示しています。

「フライオーバー」のセグメントを選ぶと、地図の表示は3D的な航空写真、フライオーバーに変わります。セグメントコントロール自体の色は黄です

　「ハイブリッド」をタップすると、地図の内容はハイブリッドに切り替わります。セグメントコントロールのティントカラーは緑色に設定してみました。それでは見にくいと思われる場合には、もっと適切な色を設定してみましょう。

「ハイブリッド」では、航空写真に地図の道路や目標物がオーバーレイした表示になります。セグメントコントロール自体の色は緑にしています

次回の予定

　iOSのUIKitには、まだ取り上げていないコントロールがいくつか残っています。次回にはもう1回だけ、そうしたコントロールを取り上げることにします。話としてはどうしても地味になってしまいますが、狙ったとおりのユーザーインターフェースを構築するうえでは、そうした基本的な要素が重要です。この機会にしっかりとマスターしておいてください。