ConstraintLayout でレスポンシブ UI を作成する   Android Jetpack の一部

制約がない場合、コンパイル エラーは発生しませんが、Layout Editor のツールバーには、制約が欠落しているエラーとして表示されます。エラーやその他の警告を表示するには、[Show Warnings and errors] をクリックします。制約の欠落を回避するために、Layout Editor の自動接続と制約の推測機能を使用して、制約が自動的に追加されます。

ConstraintLayout をプロジェクトに追加する

プロジェクトで ConstraintLayout を使用する手順は次のとおりです。

1. maven.google.com リポジトリが settings.gradle ファイル内に宣言されていることを確認します。

   Groovy

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. 次の例に示すように、モジュール レベルの build.gradle ファイルにライブラリを依存関係として追加します。最新バージョンは、例に示されているバージョンとは異なる場合があります。

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
   }
   

3. ツールバーまたは同期の通知内で、[Sync Project with Gradle Files] をクリックします。

これで、ConstraintLayout を使ってレイアウトを作成する準備が整いました。

レイアウトを変換する

既存のレイアウトを制約レイアウトに変換する手順は次のとおりです。

1. Android Studio でレイアウトを開き、エディタ ウィンドウの下部にある [Design] タブをクリックします。
2. [Component Tree] ウィンドウで、レイアウトを右クリックして [Convert LinearLayout to ConstraintLayout] をクリックします。

新しいレイアウトを作成する

新しい制約レイアウト ファイルを作成する手順は次のとおりです。

1. [Project] ウィンドウでモジュールのフォルダをクリックし、[File] > [New] > [XML] > [Layout XML] を選択します。
2. レイアウト ファイルの名前を入力し、[Root Tag] に「androidx.constraintlayout.widget.ConstraintLayout」と入力します。
3. [Finish] をクリックします。

制約を追加または削除する

制約を追加する手順は次のとおりです。

1. ビューを [Palette] ウィンドウからエディタにドラッグします。

   ConstraintLayout 内にビューを追加すると、境界ボックスが表示され、4 つの隅に正方形のサイズ変更ハンドル、4 つの辺に円形の制約ハンドルが表示されます。

2. ビューをクリックして選択します。
3. 次のいずれかの操作を行います。
   • 制約ハンドルをクリックし、利用できるアンカー ポイントまでドラッグします。アンカー ポイントとは、別のビューの外辺、レイアウトの外辺、またはガイドラインです。Layout Editor で制約ハンドルをドラッグしていると、利用できる接続アンカーと青色のオーバーレイが表示されます。

   • 図 4 に示すように、[Attributes] ウィンドウの [Layout] セクションで [Create a connection] ボタンのいずれかをクリックします。

     

     図 4. [Attributes] ウィンドウの [Layout] セクションで接続を作成

制約を設定すると、エディタでデフォルトのマージンが設定され、2 つのビューが分離されます。

制約を設定する際は、以下のルールを念頭に置いてください。

• ビューごとに、水平方向と垂直方向の制約が 1 つずつ必要です。
• 同じ平面を共有する制約ハンドルとアンカー ポイントの間でのみ制約を設定できます。ビューの垂直面（左側と右側）は別の垂直面にのみ制約でき、ベースラインは他のベースラインにのみ制約できます。
• 各制約ハンドルは 1 つの制約にしか使用できませんが、異なるビューから同じアンカー ポイントに複数の制約を作成できます。

制約を削除するには、次のいずれかを行います。

• 制約をクリックして選択し、[削除] をクリックします。

• 制約アンカーを Ctrl キーを押しながらクリック（macOS では Command キーを押しながらクリック）します。図 5 に示すように、制約が赤色になると、クリックして削除できます。

  

  図 5. 赤色の制約はクリックして削除できる

• 図 6 に示すように、[Attributes] ウィンドウの [Layout] セクションで制約アンカーをクリックします。

  

  図 6. 削除するには、制約アンカーをクリックします。

動画 2 に示すように、ビュー上に相反する複数の制約を追加すると、制約の線がバネのように巻き付き、相反する力を表します。ビューのサイズを「固定」または「コンテンツをラップ」に設定すると、その様子がはっきりわかります。その場合、ビューは制約間の中央に配置されます。あるいは、制約に合わせてビューのサイズを拡大する場合は、サイズを「制約に合致」に切り替えます。現在のサイズのままビューを中央以外に動かすには、制約のバイアスを調整します。

次のセクションで説明するように、制約を使ってさまざまなタイプのレイアウト動作を設定できます。

親の位置

順序

位置揃え

ベースラインの位置揃え

ガイドラインに対する制約を設定する

バリアに対して制約を設定する

制約バイアスを調整する

ビューの両側に制約を追加する（かつ、対応するビューサイズを「固定」または「コンテンツをラップ」に設定する）場合、ビューは 2 つの制約の中央に位置し、バイアスがデフォルトで 50% に設定されます。このバイアスを調整するには、動画 3 に示すように、[Attributes] ウィンドウ内でバイアス スライダをドラッグするか、ビューそのものをドラッグします。

あるいは、制約に合わせてビューのサイズを拡大する場合は、サイズを「制約に合致」に切り替えます。

ビューのサイズを調整する

隅のハンドルを使ってビューのサイズを変更できますが、それによってサイズがハードコードされるので、コンテンツや画面のサイズに応じてビューのサイズが変更されることはなくなります。別のサイズ設定モードを選択するには、ビューをクリックしてエディタの右側に [Attributes] ウィンドウを開きます。

図 14 に示すように、[Attributes] ウィンドウの上部にはビューのインスペクタがあり、レイアウト属性のコントロールがいくつか利用できます。これは、制約付きレイアウト内のビューでのみ使用できます。

図 14 の 3 の吹き出しが示す記号をクリックすると、高さと幅の計算方法を変更できます。この記号は、次のようなサイズモードを表します。記号をクリックすると、次の設定が切り替わります。

• 固定: 次のテキスト ボックスに特定のサイズを指定するか、エディタ内でビューのサイズを変更します。
• コンテンツをラップ: ビューはコンテンツを収めるのに必要なだけ拡大します。
• layout_restrictedWidth

制約を尊重するように水平方向のディメンションを変更するには、これを true に設定します。デフォルトでは、WRAP_CONTENT に設定されたウィジェットは制約によって制限されません。

• 制約に合致: ビューは各辺の制約を満たす範囲内で（ビューのマージンを考慮して）可能な限り大きく拡大します。ただし、この動作は以下の属性と値で変更できます。これらの属性は、ビューの幅を [match constraints] に設定した場合のみ有効になります。
  • layout_constraintWidth_min

    ビューの最小幅の dp サイズを指定します。

  • layout_constraintWidth_max

    ビューの最大幅の dp サイズを指定します。

  ただし、指定した高さまたは幅に制約が 1 つしか設定されていない場合、ビューはそのコンテンツが収まるように拡大されます。このモードを高さまたは幅に使用すると、サイズ比率を設定できます。

サイズを比として設定する

少なくとも 1 つのビュー ディメンションが「制約に一致」（0dp）に設定されている場合、ビューサイズを 16:9 などの比率に設定できます。この比率を有効にするには、[Toggle Aspect Ratio Constraint]（図 14 の図番号 1）をクリックして、表示される入力に width:height の比率を入力します。

幅と高さの両方が「制約に合わせる」に設定されている場合、[アスペクト比の制約を切り替え] をクリックすると、一方のアスペクト比に基づいてどちらの寸法を使用するかを選択できます。ビュー インスペクタでは、比として設定されている外辺を実線で接続します。

たとえば、両方を「制約に合致」に設定した場合は、[Toggle Aspect Ratio Constraint] を 2 回クリックして、幅を高さの比として設定します。全体のサイズはビューの高さによって決まります。ビューの高さは自由に定義できます（図 15 を参照）。

ビューのマージンを調整する

ビューの間隔を均等にするには、ツールバーのマージン アイコン をクリックして、レイアウトに追加する各ビューにデフォルトのマージンを選択します。デフォルトのマージンを変更する場合、その後で追加したビューにのみ変更が適用されます。

[Attributes] ウィンドウ内の各ビューのマージンをコントロールするには、各制約を表す線の上の数字をクリックします。図 14 のコールアウト 4 は、下余白が 16 dp に設定されていることを示しています。

図 16. ツールバーのマージン アイコン

このツールで提供されるマージンはすべて 8 dp の係数であり、ビューをマテリアル デザインの 8 dp 正方形のグリッドの推奨事項に合わせて調整します。

チェーンを使って線形グループを管理する

チェーンとは、双方向の位置制約を設定して、相互にリンクさせたビューのグループです。チェーン内のビューは、垂直方向または水平方向に分散させることができます。

チェーンには、次のいずれかの方法でスタイルを設定できます。

1. Spread: ビューはマージンを考慮した後、均等に配置されます。これがデフォルトです。
2. Spread inside: 最初のビューと最後のビューは、チェーンの両端の制約に固定され、残りのビューは均等に配置されます。
3. 重み付け: チェーンが spread または spread inside に設定されている場合、1 つ以上のビューを「制約を一致」に設定（0dp）することで、残りのスペースを埋めることができます。デフォルトでは、スペースは「制約を一致」に設定された各ビューに均等に分散されますが、layout_constraintHorizontal_weight 属性と layout_constraintVertical_weight 属性を使用して、各ビューに重要度の重み付けを割り当てることができます。これは、リニア レイアウトの layout_weight と同じように機能します。ウェイト値が最も高いビューが最も多くのスペースを占め、ウェイトが同じビューは占めるスペースも同じになります。
4. Packed: ビューは（マージンを考慮して）連続して配置されます。チェーンの「ヘッド」ビューのバイアスを変更することで、チェーン全体のバイアス（左右または上下）を調整できます。

チェーンのヘッドビュー（水平チェーン（左から右レイアウト）の左端のビューと垂直チェーンの最上部のビュー）は、XML でチェーンのスタイルを定義します。ただし、チェーン内のビューを選択し、ビューの下に表示されるチェーンボタン をクリックすることで、展開、内部展開、パックを切り替えることができます。

チェーンを作成するには、動画 4 に示すように次の操作を行います。

1. チェーンに含めるすべてのビューを選択します。
2. いずれかのビューを右クリックします。
3. [チェーン] を選択します。
4. [水平方向の中央] または [垂直方向の中央] を選択します。

チェーンを使用する際には、以下の点も検討してください。

• 同じビューを水平方向と垂直方向の 2 つのチェーンに含めて、柔軟なグリッド レイアウトを作成できます。
• チェーンの両端で同じ軸上のそれぞれ別のオブジェクトに対して、図 14 に示すように、制約が設定されている場合のみ、チェーンは正しく機能します。
• チェーンの向きは垂直か水平かのいずれかですが、チェーンを 1 つ設定しても、各ビューのその方向の位置を揃えることはできません。チェーン内の各ビューを適切に配置するには、位置揃えの制約などの他の制約も含めてください。

制約を自動的に設定する

レイアウトに配置する際、すべてのビューに制約を追加するのではなく、各ビューを Layout Editor で目的の位置に移動してから、制約の推測アイコン をクリックすると、制約を自動的に設定できます。

制約の推測機能は、レイアウトをスキャンして、すべてのビューについて最も効果的な制約セットを判断します。柔軟性を持たせながら、現在の位置にビューを配置する制約を設定します。想定するさまざまな画面のサイズや向きにレイアウトが正しく応じるようにするには、デベロッパーによる調整が多少必要になることもあります。

親への自動接続は、デベロッパーが有効にできる独立した機能です。有効にして子ビューを親に追加すると、この機能により、レイアウトに追加した各ビューに 2 つ以上の制約が自動的に作成されます。ただしこれは、親のレイアウトに対して制約が適切に設定できるときのみです。自動接続では、レイアウト内の他のビューに対する制約が設定されることはありません。

自動接続はデフォルトで無効です。有効にするには、Layout Editor のツールバーで親への自動接続を有効にするアイコン をクリックします。

キーフレーム アニメーション

ConstraintLayout 内では、要素のサイズや位置の変更を、ConstraintSet と TransitionManager を使ってアニメーションにすることができます。

ConstraintSet は、ConstraintLayout 内のすべての子要素の制約、マージン、パディングを表す軽量のオブジェクトです。表示する ConstraintLayout に ConstraintSet を適用すると、レイアウトはそのすべての子要素の制約を更新します。

ConstraintSet を使用してアニメーションを作成するには、アニメーションの開始と終了のキーフレームとして機能する 2 つのレイアウト ファイルを指定します。これで、2 番目のキーフレーム ファイルから ConstraintSet を読み込み、表示する ConstraintLayout に適用することができます。

次のコード例で、画面下部にボタン 1 個を移動する場合のアニメーション化の方法を示します。

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

参考情報

ConstraintLayout は Sunflower デモアプリで使用されています。