セグメントコントロールでモードを切り替える

マップアプリの表示モードを切り替えるプログラム

2017年06月28日 17時00分更新

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

　このところ、iOSのユーザーインターフェースを司るUIKitを中心とした基本的な内容に戻って話を進めています。前回は、スライダーを利用して簡単なカラーピッカーを作ってみました。今回は、やはり基本的なユーザーインターフェース要素を2つ取り上げます。それはスイッチとセグメントコントロールです。

　スイッチは、その名の通り何らかのオン／オフを設定するためのものです。これはPCやウェブのインターフェースでは、チェックボックスに相当するものです。形は全然似ていませんが、機能を考えると対応関係が理解できるでしょう。

　一方のセグメントコントロールは、複数の選択肢の中から1つだけを選ばせるものです。2つ以上を同時に選ぶことはできず、いわば排他的な選択を実現します。これはPCやウェブのインターフェースで言えば、ラジオボタンに相当します。ラジオボタンは縦に重ねて並べることが多いのですが、セグメントコントロールはもっぱら水平方向に並び、必ず1行で完結します。

　実際のセグメントコントロールの適用例として、以前に紹介したマップキットのマップタイプを選択する例も、今回のまとめとして示しましょう。

スイッチを画面のど真ん中に配置する

　まず、画面上のサイズも小さく機能も単純なスイッチ（UISwitch）から見ていきましょう。スイッチが単純だと言っても、ボタンよりは若干複雑な機能を持っています。というのは、ボタンはタップした指を離すと元の状態に戻ってしまうのに対し、スイッチは1回タップするごとにオンとオフの状態が入れ替わり、次に触るまでその状態を維持しているからです。

　iOSアプリのユーザーなら、必ずスイッチを見たことがあるはずです。そして、その大きさが固定されたものであることにも気付いているでしょう。ボタンは縦横どちらのサイズも可変でした。スライダーは縦は固定でしたが、横方向には伸ばすことができました。このスイッチは、縦も横も少なくとも見た目は常に一定のサイズで配置されます。そのサイズがどれくらいなのか、簡単なプログラムで調べてみましょう。

スイッチのデフォルトのサイズを調べるために、ビューの上に配置したスイッチのboundsプロパティの値を表示させてみました

　これは、スイッチのオブジェクトを作成し、座標や大きさは何も指定しないで、画面のビューのサブビューとして張り付けるものです。表示した後にそのboundsプロパティを調べてみると、幅が51、高さが31ポイントになっていることがわかります。これが固定のサイズです。もちろん枠の大きさを変えることは可能ですが、余白が付くだけで目に見えるスイッチの大きさは変わりません。

　このサイズは、ふだんあまり意識する必要はありませんが、例えばスイッチを画面の中央に配置したいという場合には憶えておく必要があります。画面の中央の座標から、x軸方向に25.5、y軸方向に15.5ポイントだけ差し引いた点に配置すると、ちょうど真ん中に置かれたように見えます。