Help us understand the problem. What is going on with this article?

プログラミング教室で iOS アプリの作り方を説明しました. その5

More than 3 years have passed since last update.

前回


概要

2週間ぶりです。

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

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

やったこと(1.5時間)

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

その 1 (基本)

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

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

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

image

その 2 (レイアウト用の見えない View を置く)

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

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

image

  • 画面中央にサイズゼロの見えない View を置いてそれを起点にするのがミソ
  • Multiplier を使った方法も教えました

その 3 (Multiplier を使う)

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

UIView
 |- UIView 緑
     |- UIView ピンク

image

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

その 4

応用編。

  • 左上のピンクの View は画面の横幅に対して 1/3 の幅を持つ。 縦横比は 1:1
  • 余った領域に水色の View が表示される。 高さはピンクと同じ。
  • ピンクと水色の View の下には緑の View がある。
  • 緑の View の中央に半分の高さと幅を持つ 淡赤 のView がある
UIView
 |- UIView ピンク
 |- UIView 水色
 |- UIView 緑
     |- UIView 薄赤

image

まとめ

  • Autolayout を使用した iOS アプリのレイアウト方法を学びました
  • デバイスの画面サイズや画面の向きに応じて柔軟にレイアウトする方法を学びました
  • 想定した課題を時間内に終えることができたので課題のレベル感もちょうどよかったと思われます

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

ソースコード

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

https://github.com/mironal/AutoLayoutSample

授業風景

IMG_8850.jpg

開催場所: TENTO さいたま

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away