XcodeのAutoLayout機能を使ってみる

Xcode記事３つ目。AutoLayout機能について。

AutoLayoutっていうのは読んで字のごとく、自動でレイアウトする機能のことです。
使用する機会としては、縦画面にも横画面にも対応するアプリを作る時に使います。

環境はXcode7になります。
過去のバージョンとかだと微妙に違ったりするかもしれないですね。
今回はスクショももりもり使っていこうかと。

とりあえず新しくSingle Viewのプロダクト作りましょう。

Test01って名前のプロダクトを作成。
伏せてる部分は会社名とか入ってる場所なのでお気になさらず。
そしたら左側のMain.storyboardをクリック

前回はこのViewControllerに合わせてソースコードを表示していましたが、
今回はソースコードには触れません。

代わりにPreview画面ってのを表示しておきましょう。

まずはソースコードを表示する時と同じように五輪マークの片割れみたいなボタンをクリック。

何事もなければこんな感じにソースコードが表示されるかと思います。
次にAutomaticをクリックし、Preview(1)からMain.storyboard (Preview)をクリック。

これでこんな感じに画面が出てくれます。
Previewの見た目がiPhone 4-inchになっているのでView Controllerもこれに合わせましょう。

View Controllerの上部にある赤枠のアイコンをクリックし、右側上部の青枠の部分のアイコンをクリック。
その内容の一番上ににあるSizeをiPhone 4-inchにしましょう。

こんな状態になれば準備OKです。
そしたらLabelなりButtonなりを配置します。

少しゲームっぽい配置をイメージしてこんな感じに配置してみました。
そしたら右側に表示しているPreviewを横向きにしてみましょう。

右側のPreviewにオンマウスすると表示されるこのクリックしたら回転しそうなアイコンをクリックします。

するとこうなります。
Labelは真ん中に配置したはずなのに左上寄りですし、Button達は消え去ってしまいました。
まぁ、単純な話、描画できる範囲が変わってしまったために
見えなくなっているだけです。
イメージ的には縦長のレイヤーをそのままに、
キャンバスサイズだけ横長に再調整したらこんな感じ？

このように、ただ配置しただけだと縦置きと横置きでレイアウトに差が出ます。
できれば横起きの時にもLabelは左右のスペースが同じ位置、Buttonは左下に2つ、右下に1つ配置したいところ。
それをやってくれるのがAutoLayoutです。

まずはLabelから設定しましょう。
まずはView Controller画面のLabelをクリックして選択状態にします。
そしたらView Controller下部にある赤枠のアイコンをクリック。

するとなにやら出て来ました。
この項目は選択しているオブジェクトの位置、横幅縦幅のサイズを固定する項目です。
そしたら次の画像の赤枠３カ所をクリックし、有効な状態にします。

この３つを入れると、画面上端からの位置と横幅と縦幅のサイズを
固定するようになります。
設定したら一番下のAdd 3 Constraintsをクリックして確定します。
これだけだとまだ横の配置が済んでいません。
次に先ほどクリックしたアイコンの左隣にあるアイコンをクリック。

するとなにやら出て来ました。
この項目は選択しているオブジェクトの配置を決めます。
HTML的に言ったらalignとかverticalとかその辺の項目を決めるようなものです。
Horizontally in ContainerのコンボボックスをクリックしてUse Current Canvas Valueを選択します。
左側のチェック入れるだけでもOKです。
設定したら一番下のAdd 1 Constraintをクリックして確定します。

するとPreview画面のLabelの位置が横長のものでも真ん中に配置されるようになりました。
次に右下のButtonを調整します。

こんな感じで右下からの位置と縦幅横幅を固定します。
同じように左下のButton二つは左下からの位置と縦幅横幅を固定します。

これで横長の配置でもButtonが全て表示されるようになりました。
これで終わり・・・と行きたいところですが気になった点が。
この時点でButton3つには警告が出ています。

内容を簡単に言うと予想されるXの位置と実際のXの位置がずれてますよって感じですね。
そのままビルドしても問題なく動きはするのですが、
警告が出ている以上どうにかして修正したいところです。

ちょこっと警告内容について調べたらこんな記事が。

これに合わせて、何かButtonを選択し、
EditorのResolve Auto Layout IssuesのClear Constraints
をクリックしたら警告は無くなりました。