More than 1 year has passed since last update.

AutoLayoutには悩まされた

アプリ開発で、凄く苦戦したAutoLayoutですが
全て、ピクセル指定してたからたまに隙間がでたりして
わけがわからない。
そもそも、AutoLayoutなのにAutoじゃなくね?って思ったりもした。
先日やっと、画面との割合で指定する方法がわかったのでTipsします。

実際にやってみる

とりあえず、Testプロジェクトとか作って、Storyboardを開く

スクリーンショット 2015-05-17 0.31.45.png

大本のViewの上に適当にUI配置
ボタンでやってみます
で、Viewとボタンを一緒に選択した状態で

スクリーンショット 2015-05-17 0.32.07.png

Equal Widths と Equal Heights を選択してAdd

スクリーンショット 2015-05-17 0.32.50.png

Constraintsが追加されてるので、選択してみる

スクリーンショット 2015-05-17 0.33.51.png

詳細が表示されるので
First Item を 配置したUI
Second Item を 大本のViewに設定

なってない場合は

スクリーンショット 2015-05-17 0.34.24.png

Reverse First And Second Itemを選択すると逆になる

スクリーンショット 2015-05-17 0.34.53.png

Multiplierが1の状態で最大なので、0.5に設定すると
大本のViewのサイズの50%でボタンが表示されます
横幅が設定できたので縦も同じように設定してください

スクリーンショット 2015-05-17 0.37.41.png

ボタンを選択して
綺麗に中央揃えにしてみると

スクリーンショット 2015-05-17 0.35.05.png

で、Update Framesをおして

スクリーンショット 2015-05-17 0.35.47.png

ジャーン!!

やったね、これで各画面でビルドした時にボタンの範囲がViewの50%で表示されます。