Swiftワンポイント学習 Auto Layout②Alignメニューの使い方その1

この記事は2015年9月10日に書かれたものです。内容が古い可能性がありますのでご注意ください。


1、Auto Layoutの制約を設ける3つのメニュー

今回もAuto Layoutについて学んでいきたいと思います。

Auto Layoutの各種制約は、storyboardの下部にあるボタンで設定できることは
前回学びました。
2_1
また、同じ設定を画面上部のメニューバーの「Editor」からも設定することができます。
2_2

各メニューの使い方を簡単にまとめます。

【Align】

各オブジェクトのアライメントに関する制約を追加することができます。
アライメントは「揃え」と訳されます。複数のオブジェクトの位置を揃えたり、
画面の中心に揃えたりすることができます。

【Pin】

各オブジェクトのサイズや位置に関する制約を追加することができます。
隣接するオブジェクトとの間に必ず30pxの間隔を設けたり、サイズを100px固定にしたり、
オブジェクトの幅を揃えたりすることができます。

【Issues】

Editorメニューを見ると、「Resolve Auto Layout Issues」が正式な名前のようですが、
長いのでこれからも「Issues」と省略して表記します。
このメニューでは設定した制約をクリアしたり、storyboard上のオブジェクトを設定した制約
の位置に配置を移動させたり、調整を行うことができます。

Alignメニュー項目の使い方

今回はAlignメニュー内にある各項目の使用方法を紹介します。

では、下のAlignメニューのアイコンをクリックしてみましょう。
2_3
たくさん項目がありますね。ひとつずつ確認していきます。
アシスタントエディタにプレビュー画面を表示して確認します。
各制約を説明するためにその他の制約をあらかじめ設定していますが、気にせずに各制約の
役を確認していきましょう。

・Leading Edges

複数のオブジェクトを選択している際に設定できます。
各オブジェクトの先頭の水平方向の位置を揃えます。日本語や英語などの環境では左端が揃えられます。
右から左に文字を書くアラビア語などの環境においては先頭は右端となり、右端が揃えられます。
(言語の設定はプロジェクトごとに変更することができます。)
2_4
このように位置が異なるオブジェクト同士の左端を…
2_5
揃えることができます。
※数値は「0」を指定すると左端が揃えられ、任意の値を指定すると
そのピクセル分2つのオブジェクトの左端の位置をずらすことができます。

・Trailing Edges

複数のオブジェクトを選択している際に設定できます。
各オブジェクトの末尾の水平方向の位置を揃えます。「Leading Edge」と同様に言語圏によって左端と右端
が異なります。
2_6
このように位置が異なるオブジェクト同士の右端を…
2_7
揃えることができます。
※数値は「0」を指定すると右端が揃えられ、任意の値を指定すると
そのピクセル分2つのオブジェクトの右端の位置をずらすことができます。

・Top Edges

複数のオブジェクトを選択している際に設定できます。
各オブジェクトの上端の垂直方向の位置を揃えます。この制約は言語圏は無関係です。
2_8
このように位置が異なるオブジェクト同士の上端を…
2_9
揃えることができます。
※数値は「0」を指定すると上端が揃えられ、任意の値を指定すると
そのピクセル分2つのオブジェクトの上端の位置をずらすことができます。

・Bottom Edges

複数のオブジェクトを選択している際に設定できます。
各オブジェクトの下端の垂直方向の位置を揃えます。この制約は言語圏は無関係です。
2_8
このように位置が異なるオブジェクト同士の下端を…
2_10
揃えることができます。
※数値は「0」を指定すると下端が揃えられ、任意の値を指定すると
そのピクセル分2つのオブジェクトの下端の位置をずらすことができます。

以下の残りの項目は次回説明していきたいと思います。

・Horizontal Centers

・Vertical Centers

・Baselines

・Horizontal Center in Container

・Vertical Center in Container

  • このエントリーをはてなブックマークに追加

PAGE TOP