Xcode6で僕たちはAutoLayoutを無視できなくなった。

私、iOSのUIを作るとき、AutoLayoutっていうのがあることは前から何となく知ってたけど、何となくパーツを配置すれば何となく配置できてたから、無視したんです。

 

でも、先日Xcode6が出ましたよね。はりきって「Swift勉強しよう!」って思いついて、アプリを作り始めてすぐ挫折したんです。

 

前みたく、なんとなくUIを作っても全然だめ!!全然だめなんです!!!

 

この記事は、ログイン画面を作りながらAutoLayoutの作り方覚えよう!っていう記事です。
まずは適当に配置したらどうなるか見てみましょう。

 

この真っ白なキャンバスに
1まっしろ
こうやって、パーツを並べてログイン画面作ったら
2配置
はみでます
3はみだしてる
それでは、AutoLayoutを使ってきれいに配置しましょう。

 

プレビューが見えるようにする

まずは、設定したAutoLayoutがちゃんとできてるかを見やすくする為にPreviewを出します。
↓この画像を参考に右側にプレビューが出る用に設定してください。
5preview
プレビュー画面の左下の+から、確認する端末を増やせます
6端末追加
Previewを見ると、さっき確認したのと同じのが表示されてますね!
7はじめのプレビュー

 

左端からの距離と上端からの距離で制約をつける

まずは「ユーザ名」っていうラベルにAutoLayoutの制約を適用します!
(AutoLayoutはパーツに制約を与えて、レイアウトを作っていきます)
制約をつけたいパーツを選択し、右下のPINアイコンをクリックします。
8アイコンの説明
PINアイコンを押すと出てくるポップアップの上のところで、近くのパーツからどれくらいの位置に置くのかという制約をつけることができます。
デフォルトでは、現在近くのパーツからどれくらいの距離にあるかが入力されています。画面の左端から5ポイント、上端からは今の位置の制約をつけたいので、↓こうします。
9はじめての制約
結果こうなります。
10はじめての制約結果
続いて、パスワードのラベルにも制約をつけましょう。パスワードラベルには、左端から5ポイント、ユーザ名のラベルから40ポイントの距離の制約をつけます。
11パスワードラベルに制約
パスワードのラベルもきれいに配置されました。
12パスワードラベルに制約結果

縦の位置を合わせる

次にユーザ名のテキストフィールドをユーザ名ラベルの高さにあわせます。そんなときは、テキストフィールドを選択した後、Ctrlボタンを押しながら、ドラッグしてユーザ名ラベルでドロップします。
13縦位置あわせる
すると、制約のポップアップが出るので、Baselineを選択します。
14縦位置あわせる
パスワードのテキストも同じようにします。するとこうなります。
15baseline
横位置の制約と横幅の制約が無いので、左側によってしまってますね。では次にユーザ名のテキストフィールドに左側のパーツとの距離と右端との距離の制約をつけます。
16ユーザ名テキストフィールド
ユーザ名テキストフィールドがちょうど良い感じになりましたね!
17ユーザ名テキストフィールドのびた

左端をそろえる

次に、パスワードのテキストフィールドも制約をつけます。ユーザ名のテキストフィールドに左端をあわせるという制約をつけましょう。
ユーザ名のテキストフィールドを選択したあと、Shiftを押しながらパスワードテキストフィールドを選択します。その状態で右下のAlignアイコンをクリックしてください。
Alignアイコンをクリックして出てきたポップアップでは、他の要素と位置を揃える為の制約をつけることができます。
ユーザ名に左端を揃えるので、「Leading Edges」を選択します。Leading Edgesは先頭を揃えるという意味で、右から左へ読む言語の場合、右端が先頭になります。
末尾を揃える場合、「Trailing Edges」を選択することで揃えられます。
18揃える
19先頭そろえた
先頭が揃いました。次に横幅もユーザ名のテキストフィールドにあわせましょう!
パスワードを選択した状態で、Ctrl押しながらドラッグして、ユーザ名のテキストフィールドのとこでドロップします。
20テキストフィールド横幅
Equal widthsを選択
21Equalwidth
横幅そろった!
22よこはば揃った

真ん中に配置する

最後にログインボタンを、横の真ん中に配置します!
ログインボタンを選択した状態で、Alignアイコンをクリックし、「Horizontal Center in Container」にチェックを入れましょう。
23中央寄せ
縦位置の制約が無いので、Pinですぐ上のパーツとの距離の制約もつけてあげましょう。
24中央寄せ
するとこうなります!
25完成
全部のデバイスで、まあ使える感じになった!
26完成全部のデバイス

おわり

こうして僕たちは、AutoLayoutを使うことができるようになりました。iPhone6だってプラスだってもう大丈夫!
もっと勉強したくなったら、こちらのAppleのドキュメント見ると良いです!

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

アバター

主に、WEBサイトやスマホアプリの構築に従事。新たな技術を積極に取り入れ、プロジェクトに貢献。テック系の情報などにも精通しており、世界で通用するスーパーハッカーを目指している。2009年、株式会社ヘッドウォータース新卒入社。 twitter: @yujiroarai qiita: @yujiroarai