ConstraintLayout を使用してレスポンシブ UI を作成する Android Jetpack の一部。

図 1. エディタでは A の下にビュー C が表示されていますが、 制約はありません。

図 2. ビュー C が垂直方向に制約されました ビュー A の下に表示されます。

制約があってもコンパイル エラーは発生しませんが、 制約の欠落がエラーとしてツールバーに表示されます。内容を確認するには、 [警告とエラーを表示] をクリックします。 。 制約が欠落しないように、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] をクリックします。 ファイルをご覧ください。

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

レイアウトを変換する

図 3. レイアウトの変換先のメニュー ConstraintLayout。

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

1. Android Studio でレイアウトを開き、右側の [Design] タブをクリックします。 クリックします。
2. [Component Tree] ウィンドウで、レイアウトを右クリックして LinearLayout を ConstraintLayout に変換します。

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

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

1. [Project] ウィンドウで、モジュール フォルダをクリックし、 [ファイル] >新規 >XML >レイアウト XML。
2. レイアウト ファイルの名前を入力し、 androidx.constraintlayout.widget.ConstraintLayout（ルート タグ。
3. [Finish] をクリックします。

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

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

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

   ConstraintLayout にビューを追加すると、 各隅に正方形のサイズ変更ハンドルがあり、円形の境界ボックス 各側に制約ハンドルがあります

2. ビューをクリックして選択します。
3. 次のいずれかを行います。 <ph type="x-smartling-placeholder">
   </ph>
   • 制約ハンドルをクリックし、使用可能なアンカー ポイントにドラッグします。 このポイントは、別のビューの端、レイアウトの端、または 確認してください。制約ハンドルをドラッグすると、 エディタに、接続可能なアンカーと青いオーバーレイが表示されています。

   • [接続を作成] ボタンのいずれかをクリックします。 [Attributes] ウィンドウの [Layout] セクションにあるボタン 図 4 をご覧ください

     

     図 4. レイアウト [Attributes] ウィンドウの 接続します

制約が作成されると、エディタは制約を指定します。 デフォルトのマージンを使用して 2 つのビューを区切るようにします。

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

• どのビューにも少なくとも 2 つの制約（水平方向と 1 つは水平方向）が必要 あります
• 制約を作成できるのは、制約ハンドルとアンカーの間でのみです 配置されます。垂直面（左右） 別の垂直面にのみ制約できます。 他のベースラインにのみ制約できます。
• 各制約ハンドルは 1 つの制約にしか使用できませんが、 異なるビューから同じアンカー ポイントに複数の制約を作成できます。

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

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

• Ctrl キーを押しながらクリック（macOS では command キーを押しながらクリック） 制約アンカーです。制約が赤色に変わり、クリックして 削除します。

  

  図 5. 赤色の制約は クリックすると削除できます。

• [属性] ウィンドウの [レイアウト] セクションで、 制約アンカーが表示されます（図 6 を参照）。

  

  図 6. 制約をクリックする アンカーアイコンをクリックして削除します。

ビューに相反する制約を追加すると、制約ラインは バネのようにコイル状に巻き付けられ、反力を示します（動画 2 を参照）。「 ビューサイズを「固定」に設定すると効果が最も顕著にコンテンツをラップするなどの ビューは制約の中央に配置されます。別の方法で 制約を満たすようにビューを拡大します。 サイズを [match constraints] に切り替えます。条件 現在のサイズを維持したまま、ビューが中央に配置されないように移動します。 制約バイアスを調整します。

制約を使用すると、次のようなさまざまなタイプのレイアウト動作を実現できます。 以下で説明します。

親の位置

ビューの側面を、レイアウトの対応する端に制限します。

図 7 では、ビューの左側が Google Cloud コンソールの あります。マージンを使って端からの距離を定義できます。

図 7. 水平方向の制約は、 できます。

順序

2 つのビューの表示順序を垂直方向または あります。

図 8 では、B は常に A の右側になるように制約され、C は 制約あり。ただし、これらの制約はアライメントを意味しないため、B は 上下に動きます

図 8. 横向きと縦向き あります。

位置揃え

ビューの外辺を別のビューの同じ側の外辺と揃えます。

図 9 では、B の左側が A の左側に揃えられています。目標 ビューの中心を揃えるには、両側に制約を作成します。

ビューを制約から内側にドラッグすると、配置をオフセットできます。 たとえば、図 10 は 24 dp のオフセット アライメントの B を示しています。オフセットは 制約されたビューのマージンによって定義されます。

配置するビューをすべて選択して、クリックして 配置 をクリックして配置タイプを選択します。

図 9. 水平方向の配置 あります。

図 10. 水平オフセット 調整できます。

ベースラインの位置揃え

ビューのテキストのベースラインを別のビューのテキストのベースラインと揃えます。

図 11 では、B の 1 行目と A のテキストの位置を揃えています。

ベースライン制約を作成するには、作成するテキストビューを右クリックします。 [Show Baseline] をクリックします。テキストをクリックします。 基準線を選択し、線を別の基準線にドラッグします。

図 11. ベースライン調整 あります。

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

垂直方向または水平方向のガイドラインを追加して、 アプリのユーザーには表示されません。ルールの位置付けと dp 単位、または dp 単位または 配置する必要があります

ガイドラインを作成するには、[Guidelines]（ガイドライン）をクリックします。 をクリックし、[垂直ガイドラインを追加] または [追加] をクリックします。 業種共通ガイドライン。

点線をドラッグして位置を変更し、 ガイドラインに沿って測定モードを切り替えます。

図 12. 特定のプロパティに制約されたビューは、 確認してください。

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

ガイドラインと同様に、バリアとは目に見えない線で、制限できる バリア自身の位置は定義されません。むしろ障壁が position は、そこに含まれるビューの位置に基づいて移動します。これは、 ビューを、1 つのビューではなく複数のビューのセットに制限する場合に できます。

たとえば、図 13 では、ビュー C は、図の右側に制約されています。 障壁となります。バリアは「終了」に設定されています（右側は、左から右に ビュー A とビュー B の両方があります。障壁は、インフラストラクチャが ビュー A とビュー B の右端が一番右になります。

バリアを作成する手順は次のとおりです。

1. [ガイドライン] をクリックします。 をクリックし、[Add Vertical Barrier]（垂直バリアを追加）をクリックします。 水平バリアを追加する。
2. [Component Tree] ウィンドウで、 バリアコンポーネントまでドラッグします
3. [Component Tree] からバリアを選択し、 属性 barrierDirection を設定します。

これで、別のビューからそのバリアに対して制約を設定できます。

境界内に収まっているビューを制約することもできます。 障壁となります。このようにすることで、バリア内のすべてのビューを互いに整列させることができます。 どのビューが一番長いかわからなくても大丈夫です。

「最低限」の最低基準を確保するために、バリア内にガイドラインを含めることもできます。 バリアの位置を決定します

図 13. ビュー C はバリアに制約されています。 ビュー A とビュー B の位置とサイズに応じて移動します。

制約バイアスを調整する

ビューの両側に制約を追加すると、ビューの 同じ次元が「固定」か「コンテンツをラップ」すると、ビューは中央に配置されます。 デフォルトで 50% のバイアスが与えられます。[ [Attributes] ウィンドウ内で [バイアス] スライダーをドラッグするか、ドラッグしてバイアスを設定します。 ビューに表示されます。

制約を満たすためにビューのサイズを拡大する場合は、 サイズを [match constraints] に切り替えます。

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

図 14. ビューを選択すると [Attributes] ウィンドウには、以下のコントロールが表示されます。 1 のサイズ比率、 2 制約の削除 3 高さまたは幅モード 余白 4 5 制約バイアス。また、 Layout Editor で個々の制約をクリックして、 6 制約リスト。

コーナーハンドルを使用してビューのサイズを変更することもできますが、 異なるコンテンツや画面サイズに合わせてビューがサイズ変更されることはありません。宛先 別のサイズモードを選択し、ビューをクリックして [Attributes] クリックします。

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

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

• 固定: 次のテキスト ボックスまたは エディタでビューのサイズを変更できます。
• Wrap Content: ビューは、ビューのサイズに合わせて できます。
• layout_restrictedWidth

これを true に設定すると、横方向の寸法が次のように変更されます。 制約を考慮します。デフォルトでは、ウィジェットは WRAP_CONTENT に設定されています。 制約に縛られることはありません。

• Match Constraints: ビューは、制約を満たすために可能な限り拡大されます。 ビューのマージンを考慮した後、両側に制約を適用します。ただし、 次の属性と値を使用して、この動作を変更できます。これらの 属性は、ビューの幅を「match constraints」に設定した場合のみ有効になります。 <ph type="x-smartling-placeholder">
  </ph>
  • layout_constraintWidth_min

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

  • layout_constraintWidth_max

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

  ただし、特定のディメンションに制約が 1 つしかない場合、ビューには その内容に合わせて拡張されます。高さまたは幅にもこのモードを使用すると、 サイズ比率を設定できます。

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

図 15. ビューは 16:9 のアスペクト比に設定されており、 高さの比率に基づいて幅が調整されます

少なくとも 1 つのサイズがあれば、ビューサイズを 16:9 などの比率に設定できます。 ビューのディメンションが [制約に一致] に設定されている（0dp）。有効にするには、 [アスペクト比の制約を切り替え] アイコン（図 図 14 の 1）をクリックし、 表示された入力の比率が width:height になります。

幅と高さの両方が [制約に合わせる] に設定されている場合は、[ アスペクト比の制約を切り替えて、どのディメンションが基準になるかを選択します。 比率になりますビュー インスペクタでは、どのディメンションが 対応するエッジを実線で結んでください。

たとえば、両側を「制約に合わせる」に設定すると、[切り替えボタン アスペクト比の制約を 2 回押して、幅を高さの比率に設定します。 全体のサイズはビューの高さによって決まります。ビューの高さは 内部 IP アドレスを使用して相互に通信できます

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

ビューを均等に配置するには、[マージン] をクリックします。 をクリックし、 できます。デフォルトの余白に加えた変更は、変更したビューにのみ適用されます。 追加していきます。

[Attributes] ウィンドウの各ビューのマージンは、次の方法で制御できます。 各制約を表す線上の番号をクリックします図 14 では 吹き出し 4 は、下余白が 16 dp。

図 16. ツールバーのマージン ] ボタンを離します。

ツールで提供されるすべてのマージンは、ビューを揃えるための 8 dp の要素である マテリアル デザインの 8 dp 正方形のグリッドの推奨事項に対応しました。

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

図 17. 横長のチェーンと 2 つのビューがあります

チェーンは、双方向で互いにリンクされたビューのグループです。 使用できます。チェーン内のビューは、次のいずれかの方法で分散できます。 調整できます

図 18. 各チェーンの例 。

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

1. Spread: ビューは、余白の後に均等に配置されます。 あります。これがデフォルトです。
2. 内部にスプレッド: 最初と最後のビューが、 残りは均等に分散され、残りは 分散されています。
3. 重み: チェーンが spread または スペースに広げる: スペースを 1 つ以上設定することで、 「制約に合わせる」ことができる（0dp）。デフォルトでは、スペースは [制約に一致] に設定されている各ビューに均等に分散されます。 各ビューに重要度の重みを割り当てることができます。 layout_constraintHorizontal_weight、 layout_constraintVertical_weight 属性。 これは Java SDK の layout_weight と同じように 線形レイアウト: 重み値が最も高いビューが最も広いスペースをとり、 同じ重みを持つビューには、同じスペースが与えられます。
4. パック: 余白を考慮したうえでビューをまとめます。 できます。チェーン全体のバイアスを左右に調整したり、上下に調整したりできます。 チェーンの「head」をバイアスがあります。

チェーンの「頭」view - 水平方向のチェーンの左端のビュー （左から右のレイアウトで）表示され、 垂直チェーンの一番上のビュー。XML でチェーンのスタイルを定義します。 ただし、[展開]、[内部に広げ]、[ チェーン内のビューを選択して [Chain] ボタンをクリックすると、pack されます。 ビューの下に表示されています

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

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

チェーンを使用する際は、以下の点を考慮してください。

• ビューは水平方向と垂直方向のチェーンの一部にできるため、 柔軟なグリッド レイアウトを作成します。
• チェーンの両端が制約されている場合にのみ、チェーンは正しく機能します。 図 14 のように、同じ軸上にある別のオブジェクトを作成できます。
• チェーンの向きは垂直または水平ですが、いずれか 1 つを使用すると、 その方向にビューが配置されることはありません適切な役職に就くために チェーンの各ビューに、他の制約 アライメント制約。

制約を自動的に設定する

すべてのビューをレイアウト内に配置する際に制約を追加する代わりに、 各ビューを Layout Editor 内の必要な位置に移動でき、 [制約を推測] をクリックします。 制約を自動的に作成できます。

制約の推測: レイアウトをスキャンして最も効果的な制約のセットを判定 すべてのビューに適用されます。ビューを現在の位置に制限する 柔軟性も兼ね備えていますコンバージョン アクションを レイアウトを意図したとおりに調整できます。

[Autoconnect to Parent]（親への自動接続）は、有効にできる別の機能です。日時 子ビューを親ビューに追加すると ビューにビューを追加すると、ビューごとに 2 つ以上の制約が作成されます。 ただし、ビューを親に制約するのが適切な場合にのみ使用できます。 できます。Autoconnect は、レイアウト内の他のビューに対する制約を作成しません。

自動接続はデフォルトで無効です。[有効にする 親への自動接続 をクリックします。

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

ConstraintLayout 内で、サイズの変更をアニメーション化できます。 要素の位置と配置を ConstraintSet および TransitionManager。

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

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 は以下で使用されます。 ヒマワリ デモアプリ