Xcode6で僕たちはAutoLayoutを無視できなくなった。荒井雄治朗Xcode6で僕たちはAutoLayoutを無視できなくなった。ツイートシェアはてブLINEPocket私、iOSのUIを作るとき、AutoLayoutっていうのがあることは前から何となく知ってたけど、何となくパーツを配置すれば何となく配置できてたから、無視したんです。先日Xcode6が出ましたよね。はりきって「Swift勉強しよう!」って思いついて、アプリを作り始めてすぐ挫折したんです。前みたく、なんとなくUIを作っても全然だめ!!全然だめなんです!!!この記事は、ログイン画面を作りながらAutoLayoutの作り方覚えよう!っていう記事です。適当に配置したらどうなるか見てみましょう。この真っ白なキャンバスにこうやって、パーツを並べてログイン画面作ったらはみでますそれでは、AutoLayoutを使ってきれいに配置しましょう。プレビューが見えるようにするまずは、設定したAutoLayoutがちゃんとできてるかを見やすくする為にPreviewを出します。↓この画像を参考に右側にプレビューが出る用に設定してください。プレビュー画面の左下の+から、確認する端末を増やせますPreviewを見ると、さっき確認したのと同じのが表示されてますね!左端からの距離と上端からの距離で制約をつけるまずは「ユーザ名」っていうラベルにAutoLayoutの制約を適用します!(AutoLayoutはパーツに制約を与えて、レイアウトを作っていきます)制約をつけたいパーツを選択し、右下のPINアイコンをクリックします。PINアイコンを押すと出てくるポップアップの上のところで、近くのパーツからどれくらいの位置に置くのかという制約をつけることができます。デフォルトでは、現在近くのパーツからどれくらいの距離にあるかが入力されています。画面の左端から5ポイント、上端からは今の位置の制約をつけたいので、↓こうします。続いて、パスワードのラベルにも制約をつけましょう。パスワードラベルには、左端から5ポイント、ユーザ名のラベルから40ポイントの距離の制約をつけます。パスワードのラベルもきれいに配置されました。縦の位置を合わせる次にユーザ名のテキストフィールドをユーザ名ラベルの高さにあわせます。そんなときは、テキストフィールドを選択した後、Ctrlボタンを押しながら、ドラッグしてユーザ名ラベルでドロップします。すると、制約のポップアップが出るので、Baselineを選択します。パスワードのテキストも同じようにします。横位置の制約と横幅の制約が無いので、左側によってしまってますね。次にユーザ名のテキストフィールドに左側のパーツとの距離と右端との距離の制約をつけます。ユーザ名テキストフィールドがちょうど良い感じになりましたね!左端をそろえる次に、パスワードのテキストフィールドも制約をつけます。ユーザ名のテキストフィールドに左端をあわせるという制約をつけましょう。ユーザ名のテキストフィールドを選択したあと、Shiftを押しながらパスワードテキストフィールドを選択します。その状態で右下のAlignアイコンをクリックしてください。Alignアイコンをクリックして出てきたポップアップでは、他の要素と位置を揃える為の制約をつけることができます。Edges」を選択します。Edgesは先頭を揃えるという意味で、右から左へ読む言語の場合、右端が先頭になります。Edges」を選択することで揃えられます。次に横幅もユーザ名のテキストフィールドにあわせましょう!パスワードを選択した状態で、Ctrl押しながらドラッグして、ユーザ名のテキストフィールドのとこでドロップします。Container」にチェックを入れましょう。縦位置の制約が無いので、Pinですぐ上のパーツとの距離の制約もつけてあげましょう。するとこうなります!全部のデバイスで、まあ使える感じになった!おわりこうして僕たちは、AutoLayoutを使うことができるようになりました。iPhone6だってプラスだってもう大丈夫!もっと勉強したくなったら、こちらのAppleのドキュメント見ると良いです!https://developer.apple.com/jp/devcenter/ios/library/documentation/AutolayoutPG.pdfGeneraliOSアプリデザインこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。動的ページでApplicationCacheを利用するRECOMMENDこちらの記事も人気です。WEBサイトやスマホアプリの構築に従事。新たな技術を積極に取り入れ、プロジェクトに貢献。テック系の情報などにも精通しており、世界で通用するスーパーハッカーを目指している。2009年、株式会社ヘッドウォータース新卒入社。[ソリューション編]General2014.10.16Xcode6で僕たちはAutoLayoutを無視できなくなった。General2014.6.3Dartの良いとこ調べたよGeneral2014.4.17この春、"Dart"をはじめよう。