序文

ConstraintLayout を使用すると、フラットなビュー階層 (ネストされたビューグループなし) を持つ複雑で大規模なレイアウトを作成できます。すべてのビューが兄弟ビューと親レイアウトの間の関係に従ってレイアウトされるという点で RelativeLayout に似ていますが、RelativeLayout よりも柔軟性があり、Android Studio のレイアウトエディターでの使用が簡単です。

レイアウト API とレイアウトエディターは相互に専用に構築されているため、ConstraintLayout のすべての機能は、レイアウトエディターのビジュアルツールを通じて直接利用できます。したがって、XML を変更する代わりに、ConstraintLayout を使用してドラッグアンドドロップによってレイアウトを構築できます。

1. ConstraintLayoutプロパティの説明

次の表に示すように、ConstraintLayout を使用するときに使用する必要がある基本的な方向属性のいくつかを簡単に理解しましょう。

属性	説明
アプリ:layout_constraintLeft_toLeftOf	A の左側を B の左側に配置します (左揃え)
アプリ:layout_constraintLeft_toRightOf	A の左側を B の右側に配置します (右側に対して左側に揃えます)。
アプリ:layout_constraintRight_toLeftOf	Aの右側をBの左側に置きます（左側に対して右側を揃えます）
アプリ:layout_constraintRight_toRightOf	A の右側を B の右側に配置します (右揃え)
アプリ:layout_constraintTop_toTopOf	A の上側を B の上側に置きます（上揃え）
アプリ:layout_constraintTop_toBottomOf	A の上辺を B の下辺に置きます（上辺を下辺に対して揃えます）
アプリ:layout_constraintBottom_toTopOf	A の下側を B の上側に置きます（上側に対して下側を揃えます）。
アプリ:layout_constraintBottom_toBottomOf	Aの下側をBの下側に重ねます（下揃え）
アプリ:layout_constraintStart_toEndOf	Aの開始位置をBの終了位置に置きます(開始位置と終了位置を揃えます)。
アプリ:layout_constraintStart_toStartOf	Aの開始位置をBの開始位置に重ねます(開始位置は揃います)
アプリ:layout_constraintEnd_toStartOf	Aの終了位置をBの開始位置に重ねます(終了位置は開始位置に合わせます)
アプリ:layout_constraintEnd_toEndOf	Aの終了位置をBの終了位置に重ねます（終了位置は揃います）
アプリ:layout_constraintBaseline_toBaselineOf	A の下側を B の上側に置きます (ベースラインの位置合わせ)

注: 属性の名前空間は app です。

2. バイアス

LinearLayout を使用する場合、通常は Gravity を使用して、重みの配分に従って水平または垂直に配置されたコントロールを配置します。ConstraintLayout では、コントロールに重みを割り当てるバイアス属性が提供されます。

コードは次のとおりです（例）。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

       <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

属性	説明
アプリ:layout_constrainthorizontal_bias	水平オフセット係数
アプリ:layout_constraintVertical_bias	垂直オフセット係数

3. GONEは実際にはGONEではない

RelativeLayout を使って開発をしていると、あるデータが空の場合、そのデータにバインドされているコントロールがなくなってしまうというロジックによく遭遇します。すると、例えばA、B、Cという3つのコントロールが縦に並んでいて、Aの下にB、Bの下にCがあるとしますが、Bが非表示（GONE）になった後は、CはAに依存関係がないので、ページエラーが発生します。この問題には、ConstraintLayout が優れた解決策を提供します。ConstraintLayout では、コントロールが非表示 (GONE) の場合、そのコントロールはポイントになるため、このコントロールを参照コントロールとして使用する他のコントロールに対しても制約効果が残ります。

このコントロールが非表示になっている場合、この非表示のコントロールを参照して、他のコントロールのマージンプロパティを設定することもできます。

属性	説明
app:layout_goneMarginLeft	コントロールの左マージンを非表示にする
app:layout_goneMarginRight	コントロールの右マージンを非表示にする
アプリ:layout_goneMarginTop	コントロールの上マージンを非表示にする
app:layout_goneMarginBottom	コントロールの下マージンを非表示にする
app:layout_goneMarginStart	コントロールの開始マージンを非表示にする
アプリ:layout_goneMarginEnd	コントロールの終了マージンを非表示にする

4. アスペクト比

1. ビューのアスペクト比

ConstraintLayout では、幅を高さの比率として定義したり、高さを幅の比率として定義したりすることもできます。まず、制約に適応するために幅または高さを 0dp (つまり MATCH_CONSTRAINT) に設定する必要があります。次に、layout_constraintDimensionRatioプロパティを通じて比率を設定します。この比率は、幅と高さの比率を表す「浮動小数点数」にすることも、「幅:高さ」の形式の比率にすることもできます。

コードは次のとおりです（例）。

<android.support.constraint.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:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="-------------------宽高比2：1-------------------"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

ここではボタンの高さが幅の半分に設定されています。以下に示すように:
ここに画像の説明を挿入

幅と高さの両方が 0dp (MATCH_CONSTRAINT) に設定されている場合、layout_constraintDimensionRatioの値に「W, width: height」または「H, width: height」を追加して、制約の幅または高さを示す必要があります。コードは次のとおりです。

<android.support.constraint.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:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="h,10:6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

レンダリングは次のとおりです。
ここに画像の説明を挿入

2.幅と高さの割合を表示します

ConstraintLayout では、パーセンテージを使用してビューの幅と高さを設定することもできます。幅または高さのパーセンテージを使用するには、0dp (つまり MATCH_CONSTRAINT) に設定する必要があります。
次に、次のプロパティを設定します。

app:layout_constraintWidth_default="percent" //设置宽为百分比 
app:layout_constraintWidth_percent="0.3" //0到1之间的值
或
app:layout_constraintHeight_default="percent" //设置高为百分比 
app:layout_constraintHeight_percent="0.3" //0到1之间的值

5. 複雑なレイアウトの Fuxing-Chain 属性

チェーンチェーンは、複数のチェーンチェーンによってリンクされたビューが残りのスペースを均等に共有できるようにする特別な制約です。Android の従来のレイアウトで最も類似した機能は、LinearLayout の重量比であるはずですが、チェーンチェーンは重量比関数よりもはるかに多くの機能を実行できます。コントロール間にチェーン構造を実装したい場合は、これらのコントロール間に相互制約関係を確立し、これらの関係に基づいて水平チェーンまたは垂直チェーンを作成することを選択できます。

公式は合計 5 つのスタイルのチェーンを提供しています。
ここに画像の説明を挿入

次の方法で設定できます。

app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
或者
app:layout_constraintVertical_chainStyle="spread|spread_inside|packed"

ここで注意する必要があるのは、Chain の最初のコンポーネントにchainStyle を設定することです。必ず覚えておいてください。

1. 属性パラメータと値

シアン属性の種類には、横方向(horizontal)と縦方向(vertical)の2種類があります。

属性	説明
app:layout_constrainthorizontal_chainStyle	横方向のチェーン
app:layout_constraintVertical_chainStyle	縦方向のチェーン

Chain属性のモードはspread、spread_inside、packedの合計3種類があります。

2. スプレッドチェーンモード

スプレッドモードでは、スペースが均等に分散され、各ビューが均等に分割された独自のスペースを占有します。これは、チェーンアトリビュートのデフォルトモードです。

このモードでは、ビューの幅と高さを 0dp 以外に設定すると、表示効果は次のようになります: このモードを使用するときは、
ここに画像の説明を挿入
weight 属性を使用してスプレッドの重みを設定することもできます。重みを設定するときは、コントロールの幅または高さを 0dp に設定し、layout_constrainthorizontal_weight またはlayout_constraintVertical_weight の値を設定する必要があります。

属性	説明
アプリ:layout_constraintVertical_weight	垂直コントロールウェイト
アプリ:layout_constrainthorizontal_weight	コントロールの水平方向の重み

図に示すように、重み設定を通じて次のようになります。
ここに画像の説明を挿入

3. スプレッドインサイドチェーンモード

内部スプレッドモードはスプレッドに基づいており、両側の 2 つの最も端のビューから外側の親コンポーネントの端までの距離を削除し、残りのビューで残りのスペース内でスペースを均等に分割します。

このモードでは、ビューの幅と高さを 0dp 以外に設定すると、表示効果は次のようになります。
ここに画像の説明を挿入

4. パックチェーンモード

パックモードは非常に直観的で、すべてのビューをまとめて、コントロール間に隙間を残さず、集められたビューを中央に表示します。

このモードでは、ビューの幅と高さを 0dp 以外に設定すると、表示効果は次のようになります。
ここに画像の説明を挿入
パックモードを使用した後、バイアスパラメーターを使用して、集められたビューの位置を調整することもできます。

5. XMLでChainを設定する例

Chain プロパティを設定するには、次の 2 つの条件を確認する必要があります。

チェーンチェーンの拘束を定義する
Chainの最初のコンポーネントにchainStyleを設定します。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button17"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="39dp" />

    <Button
        android:id="@+id/button17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button18"
        app:layout_constraintStart_toEndOf="@+id/button16"
        tools:layout_editor_absoluteY="39dp" />

    <Button
        android:id="@+id/button18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button17"
        tools:layout_editor_absoluteY="39dp" />
</android.support.constraint.ConstraintLayout>

6. ガイドラインの使用

GuideLine は、レイアウトを支援するために ConstraintLayout レイアウトで使用されるツールクラスです。補助線と同様に、android:orientation 属性を設定して水平か垂直かを決定できます。
重要なことは、ガイドラインはインターフェイスに表示されず、デフォルトは GONE であることです。

方向	説明
アンドロイド:方向	方向

GuideLine を作成した後、ガイドラインの初期位置を設定できます。

重み属性	説明
アプリ:layout_constraintGuide_begin	ビューの開始位置を参照オブジェクトとして、水平方向または垂直方向の上部境界 (dp)
app:layout_constraintGuide_end	Viewの終了位置を基準オブジェクトとして、水平方向または垂直方向の上部境界(dp)
アプリ:layout_constraintGuide_percent	横方向または縦方向の割合（浮動比0.0f～1.0f）

要約する

ConstraintLayout全体のプロパティを説明しました。AndroidでConstraintLayoutを使って学んでみましょう！

Android ConstraintLayout の詳細な説明と例

序文