※この記事はAutoLayoutを使う上で役に立つ小技を紹介してます。AutoLayoutを少し触ったことがある方向けです。

小技1 画面サイズに応じて拡縮する
小技2 画面サイズに応じてマージンを取る
小技3 画面サイズに応じてフォントサイズ・行間を変更する
小技4 特定のViewを基準として配置する（この記事）

第４弾は第１弾の時にもEqual Width制約を付ける時に説明した、Controlを押しながらドラッグ&ドロップすることで制約を付けれるもので便利なものをいくつか紹介します。

Storyboardの右下にある下記部分で制約を付けることができるのですが、これだけだと上手いこと出来無い事が良く有ります。

例えばこんな配置

青色Viewの真ん中に、灰色のViewを置く感じです。UITableViewCellとかなら、基本は全部真ん中なので、簡単なんですが
画面に対して真ん中っていう制約だけでは、出来ないです。

なので、Controlを使って青色Viewを基準として中央配置します。

やり方は、まずControlキーを押しながら、灰色のViewから、青色のViewまでドラッグ＆ドロップします。

そうすると、メニューが出てきますので、「Center Vertically」を選択します。

これだけです。こうすることで、青色Viewの真ん中に灰色Viewを配置することができます。

続いて、こんな配置の時

緑と赤のViewの左側が同じ位置です。画面の左端から何pxとやっても良いのですが、緑のx位置に合わせて赤を置く方が直す時も楽ちんです。

一つ目と同じように、制約を付けたいViewから基準とするViewにControlキーを使ってメニューを出します。
この場合は「Leading」を選択します。

これで、View同士の左端を合わせる事ができます。

次は応用で、こういう配置の場合、これだけ見るとどうやったら良いんだってなるのですが、上記二つを組み合わせればそんな大変でもないです。

この３つのViewの他に更に基準とするViewを３つ配置したのがこちらです。

こうなったら作れる気がしてきますでしょうか。

水色を基準として、黄色と同じWidthの緑のViewを置き、更に黄色の位置を決めるという形で作成できます。
※制約を付け終わったら、基準にしたいだけの水色と緑は透明にします。

さらっとした紹介ですが、以上になります。

■最後に

このControlを使った方法、あるのは知ってたのですが、私は恥ずかしながら今年度になるまで存在を知らなかったです。知ってると幅が広がるだけではなく、単純にAutoLayout制約をつけていく作業も早く出来ますので是非覚えてみてください。