Apa perbedaan antara Barrier dan Guideline di Constraint Layout?

93

Baru-baru ini mencoba menerapkan Constraint Layouttetapi saya menemukan Barrierdan Guidelinebekerja sama. Keduanya bekerja seperti pembatas. Apakah ada perbedaan di antara keduanya?

Yeahia2508
sumber

Jawaban:

202

Kapan menggunakan penghalang

Asumsikan Anda memiliki dua TextViewwidget dengan ketinggian dinamis dan Anda ingin menempatkan widget Buttontepat di bawah yang tertinggi TextView:

Tampilan tugas

Satu- satunya cara untuk menerapkannya secara langsung di tata letak adalah dengan menggunakan horizontal Barrier. Itu Barriermemungkinkan Anda untuk menentukan batasan berdasarkan ketinggian keduanya TextView. Kemudian Anda membatasi bagian atas Anda Buttonke bagian bawah horizontal 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>

Kapan menggunakan pedoman

Asumsikan Anda ingin membatasi TextViewketinggian yang disebutkan di atas hingga 30% dari tinggi layar, apa pun konten yang dimilikinya.

Tampilan uji

Untuk mengimplementasikannya Anda harus menambahkan horizontal Guidelinedengan posisi persentase dan membatasi bagian TextViewbawahnya 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>

Kesimpulan

Satu-satunya perbedaan antara Barrierdan Guidelineadalah bahwa Barrierposisinya fleksibel dan selalu didasarkan pada ukuran beberapa elemen UI yang terkandung di dalamnya dan Guidelineposisinya selalu tetap.

Eugene Brusov
sumber
Jawaban yang Berharga!
Alireza Noorali
Klaim: "Satu-satunya cara untuk menerapkannya secara langsung di tata letak adalah dengan menggunakan Penghalang horizontal." salah. Anda dapat menggunakan pedoman untuk ini, dengan membuat kedua kotak teks dibatasi di bawah ini dengan pedoman. (Yaituapp:layout_constraintBottom_toTopOf="@id/guideline"
Chrispher
11

Dokumentasi resmi tentang Barrier :

Barrier mereferensikan beberapa widget sebagai input, dan membuat panduan virtual berdasarkan widget paling ekstrim di sisi yang ditentukan. Misalnya, penghalang kiri akan sejajar dengan kiri dari semua tampilan yang direferensikan.

Dokumen pelatihan tentang Barrier :

Mirip dengan panduan, penghalang adalah garis tak terlihat yang bisa Anda batasi tampilan. Kecuali penghalang tidak menentukan posisinya sendiri; alih-alih, posisi penghalang bergerak berdasarkan posisi tampilan yang ada di dalamnya. Ini berguna saat Anda ingin membatasi tampilan ke sekumpulan tampilan, bukan ke satu tampilan tertentu.

dominicoder
sumber