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の基礎知識を身につけることでうまく対応ができるようになります。

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

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次