web-dev-qa-db-ja.com

制約レイアウトのバリアとガイドラインの違いは何ですか？

最近Constraint Layoutを実装しようとしていますが、BarrierとGuidelineは同じように動作します。どちらも除算器のように動作します。それらの間に違いはありますか？

androidandroid-constraintlayout
53
Yeahia2508

バリアを使用する場合

動的な高さを持つ2つのTextViewウィジェットがあり、Buttonを最も高いTextViewのすぐ下に配置するとします。

Task view

ONLYレイアウトに直接実装する方法は、水平Barrier。 Barrierを使用すると、これら2つのTextViewの高さに基づいて制約を指定できます。次に、Buttonの上部を水平のBarrierの下部に制限します。

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        Android:id="@+id/left_text_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:text="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        Android:textSize="16sp"
        Android:background="#AAA"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/right_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        Android:id="@+id/right_text_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginEnd="8dp"
        Android:text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
        Android:textSize="16sp"
        Android:background="#DDD"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/left_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <Android.support.constraint.Barrier
        Android:id="@+id/barrier"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="left_text_view,right_text_view" />

    <Button
        Android:id="@+id/button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier" />

</Android.support.constraint.ConstraintLayout>

ガイドラインを使用する場合

上記のTextViewの高さを、コンテンツに関係なく、画面の高さの30％に制限するとします。

Test view

これを実装するには、水平のGuidelineをパーセント位置で追加し、TextViewの下部をそのGuidelineに制約する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        Android:id="@+id/left_text_view"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginBottom="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginTop="8dp"
        Android:background="#AAA"
        Android:text="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        Android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        Android:id="@+id/right_text_view"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginTop="8dp"
        Android:layout_marginBottom="8dp"
        Android:background="#DDD"
        Android:text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
        Android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/left_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        Android:id="@+id/button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

</Android.support.constraint.ConstraintLayout>

結論

BarrierとGuidelineの唯一の違いは、Barrierの位置は柔軟で、その中に含まれる複数のUI要素のサイズに常に基づいており、Guidelineの位置は常に固定されることです。

105
Eugene Brusov

バリアに関する公式ドキュメント ：

バリアは複数のウィジェットを入力として参照し、指定された側の最も極端なウィジェットに基づいて仮想ガイドラインを作成します。たとえば、左のバリアは、参照されるすべてのビューの左に揃えられます。

バリアに関するドキュメントのトレーニング ：

ガイドラインと同様に、バリアはビューを制限できる非表示の線です。バリアがそれ自身の位置を定義しないことを除いて。代わりに、バリアの位置は、その中に含まれるビューの位置に基づいて移動します。これは、1つの特定のビューではなく、ビューのセットにビューを制約する場合に役立ちます。

5
dominicoder