オートレイアウト対応した画面を作ろう
見出し画像

オートレイアウト対応した画面を作ろう

J.J. / Manhattan Code Inc.

TUBの企画用に書いたものです。

[座学] オートレイアウト(AutoLayout)とは

様々なサイズの端末で見ても、いい感じに画面を表示してくれる仕組みです。iPhoneを縦や横に回転させた時にアプリが勝手に画面回転し、表示している画面構成を切り替えているのをご存知ですか?また、iPhoneSEでみてもiPhoneXでみても綺麗に画面構成がされるアプリのをご存知ですか?

オートレイアウト対応している画面とは、画面の傾きや画面サイズが可変であることを前提として作られている画面のことです。

画面回転に対応したアプリ
- Twitter
- Safari
- Trello
画面回転に対応していないアプリ
- App Store
- Facebook
- Discord
- TikTok
- Amazon

画面回転に対応していなくても流行りには影響ないみたい✌︎('ω'✌︎ )

どうやってそのようなルールをつけるのか
画面回転有無の制約はここで付けます

画面よりも小さい単位のパーツ・部品は、StoryboardやXib上に直接制約を付けます。もちろん、Codeでも付けられます。

独学者に多いのですが、もし Add missing Constraints で自動制約をつけているのであれば、今すぐやめましょう!これはView Asで表示している端末サイズに適応した制約を推奨をしているだけなので、正直イケてないです。現場でも使うことはほぼありません。

[座学] なぜオートレイアウト対応させるのか

- レイアウトが崩れていると単純に使いづらいアプリになる
- 画面が崩れてるとAppleからリジェクトされる

アプリをストアに公開するためには対象のアプリをAppleの審査に通す必要があります。Appleの審査に合格させるためにはAppleが認める基準を満たす必要があります。
クールなApple社はレイアウト崩れを発見すると審査不合格としてリジェクトしてきます。(しょうがない、彼らはの世界を守りたいんだ)
※Apple側はiPadでアプリを動かして審査をしているらしい

[座学] 端末の多様化

近年においては端末の多様化が進み、iPhoneがどんどん大きくなっていくのかと思いきや、SE2ならぬ小さいサイズの端末がリリースすると話題になっています。4インチの端末とおさらばできると思ったんですが。。
レイアウト崩れはリジェクトの原因になるので、現場では複数の端末サイズで動作確認をします
近年では、iPhoneX対応必須化となったので iOSエンジニアとしてはオートレイアウトの実装は必須と言えます。

現場で確認する端末サイズ
- iPhoneSE
- iPhone8
- iPhone8 Plus
- iPhoneX (iOS11~)
- iPhoneXS (iOS12~)
- iPhoneXR
- iPhone XS Max
-----
- iPad
- iPad Pro
- iPad Air

端末の解像度については詳しくこちらに書かれてます

[座学] オートレイアウトの良い例と悪い例の紹介

アプリの仕様
- 縦固定のアプリケーション
- TUBの画像を画面の中央にいい感じに表示する

[座学] 悪い例:画像のサイズを固定値にする

使用するパーツ:ImageView
- 画面の上下左右の中央に配置
- 高さと幅を固定

[座学] 悪い例:左右のマージンのみ指定

使用するパーツ:ImageView
- 画面の上下左右の中央に配置
- 高さのみ指定
- 左右のマージン固定
※ピンクはImageViewの背景色です

[座学] 良い例:オートレイアウト対応

使用するパーツ:ImageView
- 画面の上下左右の中央に配置
- アスペクト比を維持
- 左右のマージン固定

[座学] まとめ

- Appleには審査基準があり、審査が通らないとストア公開できない
- 作るアプリが画面回転に対応するのか否かを把握する
- 動作確認をする際は複数サイズの端末で確認する
- オートレイアウトをマスターするには、まずは練習すべし

さぁ、練習だ!

[TRY] TUBの画像を画面の中央にいい感じに表示する画面を作ろう

上記で出した「良い例」を実際に作ってみましょう!

- Main.storyboardを使ってください
- 画像は下記画像を右クリックでゲット

完成形(Labelはなくて大丈夫)

[TRY] どの端末で見ても画像の左下に名前を表示しよう

制約事項
- 名前の表示にはUILabelを使う
仕様
- フォントはシステムフォント
- フォントサイズは17.0
- フォントカラーは白
- 改行なし
- 文字列が長い場合は「...」と表示する

[TRY] Twitterアプリを縦横に動かした時のレイアウト

冗談です、これは時間がかかるのでやりません✌︎('ω'✌︎ )
やりたい人がいたら個別にw
もし物足りない人がいたら、iPhoneの電卓アプリを模写してみましょう。勉強になります。

[余談] 勉強方法

世の中に出ているアプリをいっぱい触って真似て作っていくと「作る力」が身に付いていきます。
ですが、自分ルールだけで覚えていくと無駄に制約をつけてしまっていることに気が付けません。実際、私も現場のエンジニアにレビューをしてもらい、効率の良いクールな制約の付け方を教わったりしていました。(今でも教わることある)

なので、未経験や独学の方は作ったものをGithubにPushし、現場でがっつり開発をしているエンジニアにレビューをしてもらえると良いです!
そうやって、自分で作るための力をブラッシュアップしていくとスキルがグイグイと伸びます✌︎('ω'✌︎ )

おすすめ模写アプリ
- iPhone標準アプリ(設定、目覚まし、電卓、App Store)
- アプリユーザの多いアプリ
- 流行っているアプリ

おすすめの本もあります。
新しい本ではありませんが、逆引き的な感じで使えます。タブレットで持ち運べるようにして管理できるととても便利です。

さいごに

今、自社の取り組みで6月末までに300人の方から「ありがとう」のメッセージを集めて自社HPで公開しよう!という取り組みを行なっています。

趣旨概要

Objective(目標)
- 世の中全ての人に「各分野のスペシャリストとしてメリット」を与え
 ファンを増やす!
KeyResult(成果)
- ファンカードを300人から集めて公開する
 ※集めたファンカードは自社HPにて公開予定٩( 'ω' )و!
 https://www.mht-code.com/

公開される情報

必須
- 名前、ニックネーム可
- 役職または業種(エンジニア、デザイナー、PM、PL等)
- メッセージ(200文字以内)
任意
- image

直接口頭でも良いですし、TwitterのDMでもOKです。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
J.J. / Manhattan Code Inc.
I belong to Manhattan Code Inc. The role is an executive officer. Nickname is J.J. I cherish to live happily and positively.