AutoLayoutを使って 画面レイアウトを作成してみよう

2016/03/12 (土)

About Me….

・ 高橋 一騎（たかはし いっき） Twitter: @ikkitang ・ 会社員です。 iOS・Android用アプリの開発(HTML/JS) サーバーサイドの開発、アプリ用のインフラ管理 一人しかいません。誰か助けてくだしあ。

iPhone用アプリで 画面を作ってみよう

コードで書く！

書けるけど。。。

プロパティ覚えないといけないし パット見だとUIがどんなものか

わからない。

Interface builder「チラッ」

Interface Builderって？

Interface Builderって？

部品を組み合わせて、 画面のレイアウトを作る事ができる。

※写真はいらすと屋より拝借しました。

Interface Builderって？

画面遷移が定義できる。

つまり、どういう事だってばよ？

Interface Builderを 使う事で・・・

画面のレイアウトがパッと見て理解できる。

画面の遷移がパッと見て分かる。

おし、じゃあアプリ作っていこう。

僕「こんな感じで 登録フォームを 作ってみた」

iPhone4s勢「あの・・・」

iPhone6Plus勢「あの・・・」

画面レイアウトどうやるの？

AutoLayout「任せろ」

AutoLayoutって？

AutoLayoutって？

画面レイアウトのルール作りをする事で、そのルールに則って、画面レイアウトを調整する仕組み。

いまいち、ピンと来ないっす。

例示してみます。

僕「画面のど真ん中に これぐらいのサイズでボタン置いてくれる？」

AutoLayout「おｋ」

AutoLayout「へい、どうぞ」

僕「この画像を横幅いっぱいに 表示してほしいねんけど。。

縦は同じ比率で調整してくれる？ 後、上に説明文置いときたいわ。」

AutoLayout「へい、どうぞ」

まとめると・・・

iOS用アプリの画面レイアウトは

Interface Builderで配置する部品を決めて

AutoLayoutで部品を配置するルールを決めて作り上げていく。

じゃあ、実際、 どんなレイアウトをしているか。

サンプルプロジェクト 作ってみます。

「画面の大きさに関係なく 画面の真ん中にボタンが ある画面レイアウト」

画面が一つある サンプルアプリができました。

少しややこしくなるので、 Size Class はオフにします。。

ボタン追加してみます。

ドラッグして ドロップします

ボタンできた。 次は制約を追加していきます。

AutoLayoutには、 右下のボタンを使います。

制約を設定したい部品を選んで 右下のボタンを押して、制約を追加します。

画面の横幅の中央に配置する。

部品に何か出ました。 StoryBoard上のレイアウトが

制約を守っていませんよ。って警告です。

右下のボタンを押して、 Update Framesを押します。

制約に従って、 レイアウトが構築されました。

次に縦方向の真ん中に配置する 制約を追加します。

UpdateFrames！

できました！

各端末を並べてみました。

「画像を横幅いっぱいに 拡大して表示する画面レイアウト」

表示する画像を用意しておきます。

画像を表示する部品を配置します。

表示する画像を指定。

画像が表示されました。

縦横の比を指定します。

左幅いっぱいまで表示するように指定します。

右端まで表示するように指定します。

UpdateFlames. 縦位置が自動で決まってしまいました。

上から20ぐらいの位置に 配置してみます。

できた

端末を並べてみました。

さっきの登録フォームも 制約を追加すると・・・

まとめ

Interface Builderを使うと、アプリの画面レイアウトをビルドする事無く、確認できる。

画面レイアウトにルールを作る事でAutoLayoutにより、端末間でのレイアウトを調整できる。

ご清聴ありがとうございました。 m(_ _)m