android - ConstraintLayout を使用したビューの等間隔配置

Question

の一般的な用途LinearLayoutは、ビューを等間隔 (ウェイト) にすることです。次に例を示します。

new を使用して、このような等間隔のビューをどのように実装しますConstraintLayoutか?

ConstraintLayout参照用リンク:ブログ投稿、I/O セッション ビデオ

Answer 1

を使用してこれを達成するには、チェーンとガイドラインの 2 つのConstraintLayout方法があります。チェーンを使用するには、ConstraintLayoutベータ 3 以降を使用していることを確認してください。また、Android Studio でビジュアル レイアウト エディタを使用する場合は、Android Studio 2.3 ベータ 1 以降を使用していることを確認してください。

方法 1 - チェーンを使用する

レイアウト エディターを開き、通常どおりウィジェットを追加し、必要に応じて親の制約を追加します。この場合、親の下部と親の側面 (保存ボタンの左側と共有ボタンの右側) に制約付きの 2 つのボタンを追加しました。

この状態で横表示にすると、ビューは親を埋めず、角に固定されることに注意してください。

Ctrl/Cmd をクリックするか、ビューの周りにボックスをドラッグして、両方のビューを強調表示します。

次に、ビューを右クリックして、[水平方向に中央揃え] を選択します。

これにより、ビュー間の双方向接続が設定されます (これがチェーンの定義方法です)。デフォルトではチェーン スタイルは「spread」で、XML 属性が含まれていない場合でも適用されます。このチェーン スタイルに固執しますが、ビューの幅を に設定すると、ビューが0dp使用可能なスペースを埋め、親全体に均等に広がります。

これは、ランドスケープ ビューでより顕著になります。

レイアウト エディターをスキップする場合、結果の XML は次のようになります。

<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:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

詳細：

• 各アイテムの幅を に設定する0dpかMATCH_CONSTRAINT、ビューが親を埋めるようにします (オプション)
• ビューは双方向にリンクする必要があります (保存ボタンの右側は共有ボタンにリンクし、共有ボタンの左側は保存ボタンにリンクします)、これはレイアウト エディターで [水平方向に中央揃え] を選択すると自動的に行われます。
• チェーンの最初のビューは、 を介してチェーン スタイルを指定できます。さまざまなチェーン スタイルのドキュメントlayout_constraintHorizontal_chainStyleを参照してください。チェーン スタイルが省略されている場合、デフォルトは「スプレッド」です。
• チェーンの重みは次の方法で調整できますlayout_constraintHorizontal_weight
• この例は水平チェーン用です。垂直チェーンには対応する属性があります。

方法 2 - ガイドラインの使用

エディターでレイアウトを開き、ガイドライン ボタンをクリックします。

次に、「縦方向のガイドラインを追加」を選択します。

新しいガイドラインが表示されます。デフォルトでは、相対値で左側に固定される可能性があります (左向きの矢印で示されます)。

左向き矢印をクリックしてパーセンテージ値に切り替え、ガイドラインを 50% マークまでドラッグします。

ガイドラインは、他のビューのアンカーとして使用できるようになりました。私の例では、保存ボタンの右側と共有ボタンの左側をガイドラインに添付しました。

ビューが利用可能なスペースを埋めるようにしたい場合は、制約を「任意のサイズ」に設定する必要があります (水平に走る波線):

layout_width(これは を に設定するのと同じです0dp)。

ガイドラインは、レイアウト エディターを使用するのではなく、XML で非常に簡単に作成することもできます。

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

Answer 2

加重チェーンについて読む必要があります。コードの例はこちらです。

<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="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

したがって、 を設定android:layout_width="0dp"し、app:layout_constraintHorizontal_weight="1"すべてのビューを次のような隣接ビューにリンクします。

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"