Swift学習者必見!アプリ開発の基礎AutoLayoutの使い方

どうも!インストラクターの佐野です。

プログラミングを学習されているみなさんの中には、Swiftを使ってiOSアプリの開発を行っている方もいらっしゃるでしょう。

iOSアプリ開発で一番最初に立ちはだかる壁は「AutoLayout」ではないでしょうか?

どの端末での綺麗にメニューやボタンなどのパーツを表示させるためには、欠かせない機能です。

でも、最初はなかなか難しくてうまくレイアウトできないことが多いでしょう。

そこで今回は、「AutoLayout」の基礎やコツをご紹介します。

この記事を読んでいただければ、AutoLayoutの基礎がつかめるでしょう!

Autolayoutとは

screenshot-2016-09-25-21-55-13

どの端末での同じ綺麗にパーツを配置する機能

iOSには、「iPhone5S」「iPhone6」「iPhone6S Plus」「iPad Air」「iPad mini 3」「iPad Pro」などなど、画面の大きさが違うさまざまな端末があります。

また、横向き、縦向きなどの状態による画面の変化も起こります。

ボタンやラベルなどのパーツは、位置を指定して配置することができるのですが、端末や状態が変わると表示がくずれてしまいます。

AutoLayoutは、このような画面の大きさや状態の違いに対応させるための機能です。

この機能を使いこなすことができれば、iPhone5s, iPhone6, iPhone6 Plusなどはもちろん、iPadまで、さまざまなサイズの端末でのレイアウトを一発で設定することができます。

Auto LayoutとSize Classesの違い

Auto Layoutを使うと、「Auto Layout」「Size Classes」という2つの用語がでてくることに気づくのではないでしょうか。

実は、これらは違う機能で別々の役割を果たしています。

AutoLayoutは、各部品に設定した「制約」に従って部品の位置を変更する機能です。

一方、SizeClassesは端末の種類や向きの組み合わせで部品のレイアウト方法を決める機能です。

いろんな端末に対応するためには、この2つの機能を組み合わせることがほとんどなので、2つ合わせて「Auto Layout」と呼ばれています。

紛らわしい部分もありますが、違いをしっかり認識しておく必要があります。

それでは概要や基本用語がわかったところで、Auto Layoutの基礎を見ていきましょう。

Autolayoutの基礎

screenshot-2016-09-25-21-56-43

部品に対してどんな制約をつけられるのか?

Stack(スタック)

screenshot-2016-09-25-20-31-07
複数の部品を整列配置させるメニューです。

垂直方向、水平方向が設定でき、自動的に整列するよう調整してくれます。

同じボタンやラベルを複数配置する場合に使います。

Align(アライン)

screenshot-2016-09-25-20-31-23
Stackと同じく複数の部品を整列させるメニューです。

Stackとの違いは、Alignは左揃え、真ん中、右下などの配置や特定の位置からの距離を指定できるなど、細かな配置設定ができる点です。
(※StackはUIStackViewへ整列配置する機能ですが、やや複雑なので簡潔化のために省略しています)

Pin(ピン)

screenshot-2016-09-25-20-31-42
部品のサイズや、部品ごとの距離を指定できるメニューです。

最終的な位置調整や微調整を行う場合に使うので、頻繁に使う機能になるでしょう。

Resolve Auto Layout Issues(制約の解決)

screenshot-2016-09-25-20-31-51
追加した制約を解決するメニューです。

実際に制約を適用させる場合や、間違えたので制約を解除したい場合などに使います。

何か制約を追加したら、このメニューから適用させることを忘れないようにしましょう。

AutoLayoutを使ってみよう

では実際にAutoLayoutを使ってみましょう。

今回は、例として簡単なレイアウトを組んでみて、AutoLayoutを使うことでどう変化するのか見ていきます。

2つのViewを上の青い部分は可変、下の赤い部分は下に固定したいとします。
Screenshot 2016-08-20 03.43.08

右下に4つのメニューがありますが、これらを使って自動的にレイアウトが最適化されるように設定することができます。
Screenshot 2016-08-20 03.52.19
2つの部品にそれぞれ、制約を追加することで意図した通りにレイアウトができます。
Screenshot 2016-08-20 03.42.28

下記の図では、オートレイアウトを使うことで、4インチのiPhoneと9.6インチのiPadAirの両方で上手にレイアウトされています。
Screenshot 2016-08-20 03.41.55

なお、詳しい使い方の手順は、ドットインストールの「iOSレイアウト入門 (全12回)」を参考にしてください。(※プレミアム会員登録が必要です)

また、AutoLayoutの概要や詳しい使い方はこちらのAppleDeveloper公式サイトをごらんください。
Auto Layout Guide

Autolayoutのコツ

AutoLayoutで失敗しないためのコツをいくつかご紹介します。

あらかじめレイアウトを作っておく

レイアウトをあらかじめ作っておくことで混乱せずに済みます。

各要素の余白(マージン、パディング)、各要素の幅と高さ、フォントの大きさ、余白や幅・高さなどをあらかじめ決めておくといいでしょう。

各要素の比率や、テキストが長い場合に優先して表示させたい部品などを決めておくとなお良いです。

「各要素の比率」「優先順位」の2つは、複雑なレイアウトや画面サイズに対応させるために必要になります。

できるだけ細かい部分まで決めておくようにするといいでしょう。

左上から順番に制約をつける

XcodeのStoryBoardは、左上を基点として画面を管理しています。

そのため、左上に近い部品から制約を追加していくとうまくいきやすいでしょう。

左上、左右、真ん中左、真ん中右、左下、右下といった順番で決めていくとレイアウトしやすいです。

また、ひとつずつ制約をつけていくようにすればエラーも起こらずに済みます。

最後に

いかがでしたでしょうか?

AutoLayoutは、どんな端末でも複レイアウトを綺麗に実現する便利な機能です。

複雑になると難しくなってしまいますが、AutoLayoutの基礎知識を身につけることでうまく対応ができるようになります。

ぜひ使いこなして、綺麗なレイアウトのアプリを作ってみてください!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

佐野裕史

佐野裕史

侍エンジニア塾インストラクター。
主に技術担当をしています。

【経歴】
力仕事、接客業、営業職など様々な業界を経てIT業界に参入。
IT未経験からスタートし、1ヶ月で仕事獲得に奇跡的に成功。
1年半後にフリーランスに転身。

Web開発を主に行っており、得意とするのはRails、Ruby。
【技術スキル】
Rails、Ruby、Swift、Java(Android)、JavaScript

【趣味、趣向】
麻雀
MTG(マジックザギャザリング)
ダーツ、卓球、野球、ボウリングなどの球技

【Facebookページ】
https://www.facebook.com/hiroshi.sano.7
【Twitter】
プログラミング講師@佐野裕史
自分でプログラミングができない人のために情報を発信しています。
お気軽にフォローください。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説