Auto Layout ドリル

このページはAutoLayoutのレイアウトを実際にやってみる演習問題を集めたページです 動作環境はXcode6.1 を想定しています。 回答の詳細はサンプルプロジェクト(SampleProjects/AutoLayout/AutoLayoutDrill)をご覧ください

中央に配置

問題

下の図のように、200px四方のViewを画面中央に配置してください。 その際、違うサイズのシミュレータや回転しても正しく中央に配置されるようにしてください。 (シミュレータの回転は コマンド+矢印キー です)

回答

• 適当なViewを配置し、widthとheightのconstraintをそれぞれ200pxで設定します
• Horizontal Center in Container と Vertical Center in Container の制約を追加します

画面サイズに合わせる

問題

下の図のように、親Viewとのマージンが４方向全てで70pxになるようにViewを配置してください。

回答

• 何か適当なViewを配置して Leading Space, Trailing Space, Top Space, Bottom Spaceの４つの制約を設定します。

四隅に配置

問題

下の図のように画面の四隅に40ピクセル四方のViewを配置してください。 その際、画面の上から40px, それ以外の縁からは20px離すようにしてください

回答

• 四隅に配置するViewそれぞれにwidthとheightを40pxに固定する制約を付けます
• それぞれのViewにLeading Space, Trailing Space, Top Space, Bottom Spaceの制約を付けます
  • この際、それぞれの箇所に必要な制約だけを付けます。例えば左上の場合は、左(Leading Space) と上(Top Space)のみの制約を付けます

階層構造

問題

以下の図のように、画面下部にグレーの帯のViewを配置し、その上に60px四方の青いViewとラベルを配置してください。 その際、以下条件を満たすようにしてください。

• グレーの帯は親Viewいっぱいに広がるようにする
• 青いViewはグレーのViewから上と左について8pxのマージンを取る
• ラベルは青いViewから8pxのマージンと上から8pxのマージンを取る

回答

• まずベースとなるグレーのViewを画面下部に配置します
  • Leading, Trailing, Bottom Spaceの制約を0で設定
  • 高さを76pxで制約を設定
• 次にそのグレーのViewの上に青いViewとUILabelを配置します
  • 青いViewは幅と高さを60pxで設定、Leading Space, Top Spaceを8pで設定します
  • Labelは　Leading Space, Top Spaceを8pで設定します