ミネルヴァの梟は黄昏とともに飛び始める

Interface Builderで特定の条件下において、Autosizingの変更ができなくなる事がある。

ネットで調べるとどうやら、下記の２つの条件を満たしたときにAutosizingの変更ができなくなるようだ。

・対象のビューがxibのトップレベルオブジェクトの１つである

・対象のビューにSimulated Interface Elementsが１つでも設定されている

この２つの条件を満たしたときというのが重要で、どちらかの条件を削ってやればAutosizingを変更する事ができる。この場合だと、下の条件は簡単に変更できるので、InspectorでSimulated Interface Elementsの下図の項目がすべてUnspecifiedになっていればAutosizingの変更が可能だ。

iOSは、端末の傾きによって画面の表示を上下左右に変更する事ができる。

上下左右に対してそれぞれ４つのビューを用意する事ができるが、通常は縦方向と横方向の２種類のデザインを利用する。ビュー内のボタンやラベルは、プログラムで配置しなおすか、ビューを２枚用意して張り替えると画面領域に合わせて最適なデザインをユーザに提供できるので良い。

しかし、ボタンなどのUIコンポーネントが少ない場合、自動レイアウトを利用するとOSが自動的にUIコンポーネントの再配置をしてくれるので非常に楽である。

UIコンポーネントが回転時にどこに配置されるかは、Interface Builderで配置した時の座標とAutosizingによって決定される。

Interface Builderでは回転時のUIを確認するための仕組みが用意されている。UIコントロールを貼付けるウィンドウの右上を見ると、以下のような矢印マークがあるのが分かると思う。これをクリックすると、回転時のデザインを確認する事ができる。最初はAutosizingの設定が適当になっていると思うので、UIが崩れて見えていると思う。

注意：回転した状態でUIをDnDでデザインしなおすと、最初の状態が崩れることに注意しよう！

Autosizingは以下のように四角の上下左右にあるIマークと、四角の内側にある矢印で構成されている。

上下左右にあるIマークはその方向からの座標を固定するという意味で、矢印は領域に余裕がある限り引き延ばすという意味だ。（と思うw）

回転させながら、このアイコンのチェックをオンオフしながら、縦方向／横方向ともに良い感じに表示されるように調整すればokだ。

注意：Autosizingを変更する時は必ず元の回転位置に戻してから変更するようにしよう。回転させた状態で変更すると、元に戻した時のデザインが変わってしまう。

これで、一切のコーディングなしにUIの縦表示／横表示のデザインができてしまう。

パスワード用のテキストフィールドはInterface Builderから簡単に設定する事ができる。具体的には、以下のようにInspectorのText Input TraitsにあるSecureにチェックを入れるだけでパスワード用の●で文字が潰されるUIになる。