概要

2週間ぶりです。

今回は Autolayout を使った画面レイアウトの応用編です。

同一の課題に取り組んだ生徒数は2名でした。

やったこと(1.5時間)

AutoLayout を使って色々な画面を作り様々な画面サイズ、デバイスの向き(縦横)を変えても正しく表示されるようにレイアウトできるようになるテクニックを幾つか習得することを目標とする。

画面を3つの領域に分ける。

画面サイズに応じて、中央の緑の領域の高さは変わらず上下のピンクと水色の高さが変わる。

UIView
 |- UIView ピンク
 |- UIView 緑
 |- UIView 水色

画面を4つの領域に分ける。画面サイズが変わってもそれぞれ同じ面積を保つ。

UIView
 |- UIView ピンク
 |- UIView 緑
 |- UIView 水色
 |- UIView 薄赤

画面全体を覆う緑色の View の中央に半分のサイズのピンクの View がある。

UIView
 |- UIView 緑
     |- UIView ピンク

※ Multiplier を 0.5 にすると親に対して半分のサイズになる

応用編。

UIView
 |- UIView ピンク
 |- UIView 水色
 |- UIView 緑
     |- UIView 薄赤

Swift を使って自分で考えたアプリを作りたいという要望が出てきたので良い方向に向かっていると思います。

解答例のソースコードを github に公開しています。

開催場所: TENTO さいたま