android -------- ConstraintLayout Guideline和Barrier（四）

前面的文章

ConstraintLayout 介紹（一）

ConstraintLayout 約束屬性（二）

ConstraintLayout 寬高比和偏移量比（三）

此博文主要講解：Guideline和Barrier

Guideline （瞭解，實際使用過程當中我使用的很少）

當須要一個任意位置的錨點時，能夠使用指示線（Guideline）來幫助定位，指示線其實是 View 的子類，使用方式和普通的 View 相同，但指示線有着以下的特殊屬性：

• 寬度和高度均爲0
• 可見性爲 View.GONE

案例：

<?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">


    <!--重要的是Guideline是不會顯示到界面上的，默認是GONE的。-->


   <android.support.constraint.Guideline
        android:id="@+id/guidelineBegin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="100dp" />

    <Button
        android:id="@+id/buttonEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:text="Button2"
        app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
        app:layout_constraintTop_toTopOf="parent" />

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

    <Button
        android:id="@+id/buttonPercent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:text="Button3"
        app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--當你要用一個控件佔屏幕寬度的一半的時候，能夠用layout_constraintGuide_percent -->

</android.support.constraint.ConstraintLayout>

如圖：（有三個指示線）

         

 

Barrier

直譯爲障礙、屏障。在約束佈局中，能夠使用屬性constraint_referenced_ids屬性來引用多個帶約束的組件，

從而將它們看做一個總體，Barrier 的介入能夠完成不少其餘佈局不能完成的功能；

它跟 Guideline  同樣屬於Virtual Helper objects，在運行時的界面上看不到，可是要比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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <!--Barrier-->

    <!-- 原始方案： 當改變textView1 的字段內容時，textView3隨之改變,
                   當改變textView2 的字段內容時，則失效
        -->


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="hospita"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />


    <!--如今 Barrier 就已經定義好了，只剩下把textView3的約束從相對於 textView1 改成 相對於 Barrier 了：
        app:layout_constraintLeft_toRightOf="@+id/textView1"  ===> 不設置下面屬性則會出現有的內容看不見  取消下面註釋
        app:layout_constraintLeft_toRightOf="@+id/barrier1"/
        app:layout_constraintStart_toEndOf="@+id/barrier1"

    -->
    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView1,textView2"
       />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="10dp"
        android:text="爲了看到總體的效果，能夠切換語言，此時你會看到Barrier會自動位於較寬的那個textView後面，也就間接讓 textView3 也位於了正確的位置："
        app:layout_constraintLeft_toRightOf="@+id/barrier1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <!--   <android.support.constraint.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="爲了看到總體的效果，能夠切換語言，此時你會看到 Barrier 會自動位於較寬的那個 textView 後面，也就間接讓 textView3 也位於了正確的位置："
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />-->


</android.support.constraint.ConstraintLayout>

效果圖：（你能夠隨便改變 textview1和textview2的長度，並不會影響textview3的顯示）

            

 

 

很實用

 

參考地址：https://constraintlayout.com/basics/barriers.html