CodeIQ MAGAZINECodeIQ MAGAZINE

iOSで柔軟に対応可能なレイアウトを作成できるAuto Layout入門 #ios7yahoo

2014.02.21 Category:勉強会・イベント Tag: , ,

  • 36
  • このエントリーをはてなブックマークに追加
image1

iOS6から導入された画面サイズや向きの違いにも、柔軟にレイアウトを作成することができる「Auto Layout」。

今回はこのAuto Layoutの使い方についてヤフーiOS 7エンジニア勉強会・運営チームの山口恭兵さんに解説いただきました。
by 馬場美由紀 (CodeIQ中の人)

Auto Layout入門

今回はiOS6から導入されたAuto Layoutについて解説を行います。Auto Layoutを使うことで画面サイズや向きの違いにも、柔軟に対応できるレイアウトを作成することができます。今後発売されるiOS端末は画面サイズの拡大などが予想されており、Auto Layoutを使ったUI設計の重要さが増してくると考えられます。

制約(Constraint)ベースのレイアウト

Auto Layoutの基本的な考えとなるのが、制約(Constraint)です。画面上に配置されたView要素に対して、「ある要素から右に10pt離す」、「ある要素の中心に揃える」などの制約を追加することでレイアウトを決定していきます。InterfaceBuilderを利用することで、直感的に制約を追加することができます。

Interface Builderによる操作

Auto Layoutを有効にする

以下の手順でAutoLayoutを有効にします。
※iOS5以前では使用できませんので注意してください。

  • StoryboardまたはNibファイルを選択
  • 「File Inspecter」の「Use AutoLayout」をチェック

Auto Layoutメニューから制約を追加する

オブジェクトライブラリからView要素を画面に配置した状態では、まだ制約は設定されていません。制約を追加したいView要素を選択して、Auto Layoutメニューから制約を追加することができます。

Pinメニュー

View要素自身の幅・高さ、他のView要素との距離などの制約を追加することができます。

①隣接するView要素との距離に関する制約

  • 設定したい方向の赤い点線を選択する
  • 設定したい距離を入力する
  • 数値右側の▼で隣接しなていないViewも選択可能

②選択中のView要素自身の幅・高さに関する制約

③複数選択中のView要素の幅・高さを等しくする制約

④複数選択中のView要素の揃えに関する制約

⑤設定した制約を満たすためにViewのframeを更新するかどうかを設定

Alignメニュー

他のView要素との揃えに関する制約を追加することができます。基本的にAlignメニューからは、複数View要素を選択してから制約を追加します。

①複数選択中のView要素を各辺で揃える制約

  • 英語や日本語のように左から右に書く言語ではLeading=Left、Trailing=Right
  • アラビア語のように右から左に書く言語ではLeading=Right、Trailing=Left

②複数選択中のView要素を水平、垂直方向に中心を揃える制約。BaselinesはUILabel等の場合に、文字のBaselineを揃える制約
③選択中のView要素を包括するSuperViewの中心に揃える制約

Issuesメニュー

設定中の制約に不整合がある場合に正しい制約を追加したり、制約をまとめて消すなど行うことができます。上5つのメニューは選択中のView要素のみに対して、下5つはViewController内のすべてのView要素に対しての制約の操作を行います。

  • Update Frames:設定中の制約を満たすようにViewのFrameを変更します
  • Update Constraints:設定中の制約を満たすように制約の値を変更します
  • Add Missing Constraints:制約が足りていない場合、自動的に制約を追加します
  • Reset to Suggested Coustraints:設定中の制約を全て消して、自動的に新たな制約を設定します
  • Clear Constraints:設定中の制約をすべて消します

Resizingメニュー

選択中のView要素の大きさが変化した場合、設定中の制約を適用させるView用を設定できます。

  • Siblings and Ancestors:親・同階層のView要素に適用する
  • Descendants:小階層のView要素に適用する

チュートリアル

ここでは簡単な例をもとに、制約を追加してレイアウトを作成する流れを説明します。画面のサイズ・向きに関わらず、画面下部に横いっぱい広がるようなViewを実現する制約を追加していきます。

親Viewからの距離を設定

画面上に配置した緑Viewを選択し、Pinメニューを表示させます。親Viewからの左・右・下の距離を20ptと設定し、制約を追加しましょう。

制約の不足・矛盾を解決

InterfaceBuilderのドキュメントアウトラインを見ると、赤い矢印が表示されていることが確認できます。設定されている制約が足りない・制約同士に矛盾が生じていることにより、最終的なレイアウトが不確定な場合は赤い矢印が表示されます。また、制約は満たしているが制約の値とViewのFrameに矛盾があるなどの場合は黄色い矢印が表示されます。

矢印をクリックすることで、問題点を確認することができます。今回の場合は、緑Viewのy座標または高さを決定するための制約が足りていません。赤いエラーシンボルをクリックすることで、問題を解決する制約を自動的に追加できますが、本来設定したい制約と異なることが多いため、あまりおすすめは出来ません。

再びPinメニューから、緑Viewの高さの制約を追加しましょう。エラーが消えるはずです。制約の設定に慣れてくると、どの制約が足りていないかすぐに判断できるようになってきます。


add_height

最後に

Auto Layoutをうまく使うことで、画面サイズや端末の向きに応じてコード内でレイアウトを調整するといった処理を削ることができます。学習コストは高いですが、将来的なメリットも大きいのでぜひ使用することをおすすめします。

Yahoo! JAPAN Tech BlogではiOS 7勉強会に関する様々な資料を公開しています。ぜひご覧ください。

寄稿者プロフィール 山口恭兵
ヤフー株式会社 iOS Developer。
iPhoneやネット上にある写真をまとめて管理できるアプリ「Pict Garage from Yahoo!ボックス」の開発を行う。

iOS6から導入されたAuto Layout問題に挑戦してみない?

ヤフー山口恭兵さんからのiOSの問題が出題中です。iOSならお任せ!というエンジニアの皆さん、ぜひ挑戦してみてくださいね。

Autolayoutを設定して画面のサイズ・向きの変化に対応できるレイアウトを作成する問題です。

  • 締切4月14日(月)AM10:00まで
  • 問題挑戦はこちらから

CodeIQコード銀行にあなたのコードを預けてみませんか?

  • CodeIQコード銀行ではあなたのコードを財産と考えます。
  • お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
  • 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
  • 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
  • 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを!

  • 36
  • このエントリーをはてなブックマークに追加

■関連記事

ヤフーがAndroidアプリに関する技術や開発事例を共有する「CAMPFIRE Android」を開... Yahoo!知恵袋をRxJavaでフルリニューアル ヤフーのAndroidにおける技術情報を共有するMeetup「CAMPFIRE Android #1」が、4月19日にヤフーのコワーキングスペース「LODGE」で開催された。 「Yahoo! Japanでの取り組みや開発のコツを知ることができる...
聖夜のアイデアソン -Pepper Loves LINE BOT-... LINE BOT AWARDSとは 「LINE BOT AWARDS」とは、LINEのchatbot開発促進及びユーザーへの普及を目的に開催するAwards。個人・法人問わず誰でも参加可能なAwardsで、応募〆切は2月22日です。 ▲▲LINE株式会社 ビジネスプラットフォーム事業室 戦略企画...
最高賞金1000万円!LINE・砂金信一郎氏に聞いた「LINE BOT AWARDS」の全容と狙い─... LINE・砂金信一郎氏がプロデュースするビッグイベント これまでサービスを提供する企業がユーザーと密接な関係を結ぶためには、スマホアプリを提供してユーザーに使ってもらうというのが一つの方法だった。 しかし、アプリ開発には手間がかかるだけでなく、一度はダウンロードしてみたユーザーも、毎日それを使う...
マルチプラットフォームで動く「Electron」は本当に使える技術なのか?... Electronはどこがすごいのか? 最初に登壇したのは、Node.js日本ユーザーグループ代表の古川陽介氏。「Electronアプリの作り方」というタイトルでセッションを行った古川氏は、会社でも「Electronを使ってアプリを開発している」と語る。 ▲Node.js 日本ユーザーグループ代表...
実数論、微分方程式、代数、離散数学、トポロジー「プログラマのための数学勉強会」第4回レポート... 今回のテーマと目次 「プログラマのための数学勉強会」第4回からは、各セッションの難易度を星3つで示すようになった。 何もないところから数を作る(集合論、実数論) 難易度★☆☆ 今日からはじめる微分方程式(微分方程式、ラプラス変換) 難易度★★☆ 忙しい人のための楕円曲線入門(代数...
物理における『微分方程式』の活用─プログラマのための数学勉強会6... 物理における微分方程式の活用 久徳浩太郎氏が所属している理化学研究所 iTHES(理論科学連携研究推進グループ)は、理論化学を研究しているグループ。また同グループでは産学連携も積極的に推進しているという。 そんな中で久徳氏は宇宙物理や理論物理を研究している。つまり今回唯一の物理屋。しかし「物理屋...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ