第２回・Android Studio2の新Layout EditorとConstraint Layout

本記事は Android Studio2.2 preview2 時点での記事となります。
ダウンロードはこちらのページから可能です。

はじめに

Android Studio 2.2で新しいLayout Editorと共に新しいレイアウトとしてConstraintLayoutが追加されました。iOSでいえば、XcodeのInterface BuilderとAutoLayoutに相当するものといえば解りやすいでしょうか？
今回はこの新しいLayout EditorとConstraint Layoutについて紹介したいと思います。

Constraint Layout

Android 2.3 (Gingerbread)以上でConstraintLayoutを使用できます。実際にはConstraint(制約)をViewに対して設定することによってレイアウトを決定します。これによってネスト構造を減らし、よりフラットなxmlを生成することができます。ただし、新しいLayout EditorはAndroid Studio 2.2以上でないと使用することはできません。

1. 導入

Android Studio 2.2で作成した新規プロジェクトはConstraintLayoutが最初から使えるように設定されています。

既存のプロジェクトに対する導入は以下の手順で行います。

• SDK ManagerでAndroid Support Repository(バージョン32以上)をインストールする。
• build.gradle内のdependencies内にConstraintLayoutライブラリを追加する。

  dependencies {
      compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
  }
  

2. 使用方法

レイアウトを新規で追加するときはlayoutディレクトリを右クリック、New > XML > Layout XMLを選択し、ファイル名を入力後にRoot Tagとしてandroid.support.constraint.ConstraintLayoutを入力します。

既存のレイアウトをConstraintLayoutにしたい場合はAndroid Studioでファイルを開き、Designタブを選択、Component Treeウインドウに表示されているLayoutを右クリックし、Convert <layout> to ConstraintLayoutでConstraintLayoutに変換することが可能です。

3. AutoConnect

AutoConnectが有効な場合はViewを追加した際に自動的にConstraintを作成し、最適な距離と位置関係を作ってくれます。ただし部分的な設定のみであったり、思っていたものとは違う設定がなされることもあります。

もしAutoConnectが不要であれば、Layout Editor上部にあるAutoConnectアイコン( )をクリックすることで無効にすることができます。

4. Infer constraints

Layout Editor上部にあるInfer constraintsボタン( )をクリックすることでレイアウト内の各Viewに対して一気にConstraintを設定してくれます。

5. Constraint(制約)の追加

Layout上に置かれたViewを選択し、4辺に表示される丸いアンカーのいずれかをLayoutや他のViewに対してドラッグします。設定が可能な状態になるとアンカーの色が緑色になるので、そこでアンカーを離すとConstraintを設定することができます。

テキストのベースラインについての制約も設定することができます。テキストの下にある細長いアンカーにマウスを乗せ、アンカーが光り始めたら他のViewに対して同様にドラッグして制約を設定します。

制約の設定につかえる機能としてVertical/Horizontal Guidelineがあります。これは制約の設定には使えるがユーザには見えないLayoutの端のようなものを追加することができます。
追加する場合はレイアウトの適当な場所で右クリックし、表示されたメニューからAdd Vertical GuidelineもしくはAdd Horizontal Guidelineを選択することで追加することができます。

設定した制約の調整や各種プロパティはLayout Editorの右側にあるPropertiesの欄で様々な値の設定を行うことができます。
Propertiesの上部ではマージンの設定、制約の縦と横のバイアスの調整、内寸の設定、制約の削除等を行うことができます。下部ではその他の基本的な設定を行うことができます。

さらに右上に表示されているShow expert propertiesボタン()を押すことでより詳細な設定画面を表示することができます。

6. Constraint(制約)の削除

Constraintの削除にはいくつか方法があります。

• 個別に削除
  • 削除したいConstraintが設定されているアンカーを再度クリックすることで削除することができます。
  • propertiesの欄でも削除が可能です。
• 特定のViewのConstraintをすべて削除
  • Constraintを削除したいViewを選択すると左下にDelete all Constraintsボタンが表示されるので、このボタンを押すことで削除することができます。
    

    

• レイアウト内のすべてのConstraintを削除
  • LayoutEditor上部にあるClear all constraintsボタンを押すことで削除することができます。
    

    

7. その他

• 左寄せと右寄せというような真反対なConstraintを追加した場合は、デフォルトでセンタリングされます。
• Viewに対してConstraintが設定されていない場合は左上に表示されます。もし上下のConstraintのみの場合は左寄りに、左右のConstraintのみの場合は上寄りに表示されます。
  Constraintをきちんと設定しない場合、Layout EditorのDesignタブで表示される配置と実際の実行結果では異なることがあるので注意が必要です。
  
  仮に以下の画像のようにTextViewを真ん中に配置した状態でも、Constraintが設定されていないため、
  

  

  
  以下の画像のようにTextViewが左上に表示されてしまいます。
  

  

まとめ

xmlをほとんど直接弄らずに直感的にレイアウトを作成できるので、開発スピードの向上が期待できそうです。 ただまだpreview版のためにバグも多く、挙動のおかしいところも多いのでこれからに期待したいと思います。

Tweet