Skip to content

Latest commit

 

History

History
37 lines (31 loc) · 2.03 KB

AutoLayout.md

File metadata and controls

37 lines (31 loc) · 2.03 KB

AutoLayout

Viewのレイアウトを決定する仕組みのひとつにAuto Layoutがあります。
制約(NSLayoutConstraint)を組み合わせてViewのレイアウトを解決します。
制約とは例えばこのViewの上辺は親のViewの上辺からXポイントあけるこのViewとこのViewの幅は同じにする のようなものです。

執筆から時間が経過していますが、概要を掴むには良い記事
Hatena-Textbook

AppleのDocument
NSLayoutConstraint
Auto Layout Guide

InterfaceBuilderで制約を与える方法、NSLayoutConstraintオブジェクトを使用してコードで制約を与える方法のほか、サードパーティのライブラリでコードから直感的に制約を与えられるものもあります。
SnapKit
Cartography

天気予報アプリの画面レイアウトを構成する

課題

以下の条件の画面レイアウトを作ってみましょう

  • UIImageViewの幅はUIViewControllerの幅の半分
  • 青字のUILabelと赤字のUILabelの幅はUIImageViewの半分 img1
  • UIImageViewの高さと幅は同じ
  • UIImageViewとUILabelの隙間はあけない img2
  • UIImageViewの水平中央はUIViewControllerの中央と同じ
  • UIImageViewとUILabelを合わせた矩形の垂直中央はUIViewControllerの中央と同じ img3
  • UIButtonとUILabelの隙間は80pt img4
  • UIButtonとUILabelの水平中央は同じ img5

附録

関連ワード・動画索引(熊谷さんのやさしい Swift 勉強会)