走馬觀花-ConstraintLayout

ConstraintLayout使用具體參考：

偏移量

  • 水平偏移：layout_constraintHorizontal_bias
  • 垂直偏移：layout_constraintVertical_bias

將TextView置底居中顯示：

<TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

效果：

image

PS： layout_constraintHorizontal_bias有效果的前提是有左右相對定位同時存在，即layout_constraintStart_toXxxOf和layout_constraintEnd_toXxxOf，或者layout_constraintLeft_toXxxOf和layout_constraintRight_toXxxOf成對出現(xiàn)。兩對各使用其中之一是不奏效的。例如：

將layout_constraintRight_toLeftOf替代layout_constraintEnd_toEndOf:

 <TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toLeftOf="parent"/>
image

layout_constraintHorizontal_bias取值0~1，0表示TextView的左側(cè)和其layout_constraintStart_toXxxOf 對應(yīng)的左側(cè)重合，0表示TextView的右側(cè)和其layout_constraintEnd_toXxxOf 對應(yīng)的右側(cè)重合，0.5表示顯示在layout_constraintStart_toXxxOf 和layout_constraintEnd_toXxxOf 的中間。例如：

    <TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:background="@android:color/darker_gray"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="parent"/>

    <TextView
        android:id="@+id/tv7"
        style="@style/TEXT"
        android:background="@android:color/background_dark"
        android:text="BIAS"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv6"/>

效果圖：

image

可見：layout_constraintHorizontal_bias = 1，有根據(jù)屬性 layout_constraintRight_toLeftOf="@id/tv6" 即 BIAS 這個 TextView 的右側(cè)剛好和 tv6 的左側(cè)重合。

假設(shè)將layout_constraintRight_toLeftOf="@id/tv6" 改為 layout_constraintRight_toRightOf="@id/tv6"，那么即 BIAS 這個 TextView 的右側(cè)就會和 tv6 的右側(cè)重合：

image

尺寸

0dp 配合 layout_constraintEnd_toEndOf="parent"和layout_constraintStart_toStartOf="parent"這一對或者layout_constraintLeft_toLeftOf="parent"和layout_constraintRight_toRightOf="parent"這一對使用，達(dá)到match_parent 的效果。

當(dāng) layout_width 或 layout_height 有一方為 0dp時，可以使用layout_constraintDimensionRatio 來達(dá)到寬度成一定比例顯示的效果：例如，

<TextView
        android:id="@+id/tv_tv"
        style="@style/TEXT"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:text="上方居中"
        app:layout_constraintDimensionRatio="H,1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

效果如下：

image

其中，假設(shè)寫成 app:layout_constraintDimensionRatio="1:2"，表示寬高比例為 1:2 ，而且基本單位以寬高二者最小的長度為準(zhǔn)。

假設(shè)寫成 app:layout_constraintDimensionRatio="H,1:2" ，即本例，寬高比為 2:1

鏈


    <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv9"/>

    <TextView
        android:id="@+id/tv9"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        app:layout_constraintLeft_toRightOf="@id/tv8"
        app:layout_constraintRight_toLeftOf="@id/tva"/>

    <TextView
        android:id="@+id/tva"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toRightOf="@id/tv9"
        app:layout_constraintRight_toRightOf="parent"/>

3 個 TextView 構(gòu)成一條鏈，如下：

image

例外，ConstraintLayout 還有屬性可以對鏈的樣式進(jìn)行設(shè)置，分別為layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle。測試之后發(fā)現(xiàn)，只有將 layout_constraintXxx_chainStyle 屬性設(shè)置在鏈的第一個 View 上才有效果。例如本例中只有將 layout_constraintHorizontal_chainStyle 設(shè)置在 id 為 tv8 的 TextView 上才有效果。layout_constraintXxx_chainStyle 有 3 個取值，分別為spread , spread_inside 和 packed 。效果圖如下：

app:layout_constraintHorizontal_chainStyle="spread"
image
app:layout_constraintHorizontal_chainStyle="spread_inside"
image
app:layout_constraintHorizontal_chainStyle="packed"
image

權(quán)重

當(dāng)寬度或高度為 0dp 時，可以使用 layout_constraintHorizontal_weight 或 layout_constraintVertical_weight 進(jìn)行比重劃分。本例使用layout_constraintHorizontal_weight:

 <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:layout_width="0dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv9"/>

    <TextView
        android:id="@+id/tv9"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/tv8"
        app:layout_constraintRight_toLeftOf="@id/tva"/>

    <TextView
        android:id="@+id/tva"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/tv9"
        app:layout_constraintRight_toRightOf="parent"/>

效果圖如下：

image

可見，layout_constraintXxx_weight 只有在對應(yīng)屬性為 0dp 時才會起作用。例外，layout_constraintXxx_chainStyle 在這種場景下沒有了作用。

Barrier

Barrier（屏障）引用多個控件作為輸入，基于這些控件的最極端做一個虛擬的屏障。

例如，假設(shè)兩個按鈕 A 和 B 的寬度是不固定的，想要在這兩個按鈕的右側(cè)添加一個 View ，這個時候需要知道 A 和 B 哪個的右側(cè)更靠近右邊。Barrier 就可以達(dá)到這個目的。

[圖片上傳失敗...(image-2a9a25-1547267639363)]

 <android.support.constraint.Barrier
              android:id="@+id/barrier"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              app:barrierDirection="end"
              app:constraint_referenced_ids="button1,button2" />

[圖片上傳失敗...(image-61a7d7-1547267639363)]

然后就可以根據(jù) Barrier 來確定新添加的 View 的位置。

constraint_referenced_ids 表示需要對其基準(zhǔn)的所有控件，引用多個控件使用 , 隔開。
barrierDirection 的取值有：

  • BOTTOM
  • TOP
  • LEFT
  • RIGHT
  • START
  • END

Group

此類控制一組引用的窗口小部件的可見性。 通過添加到逗號分隔的id列表來引用窗口小部件。

<android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="tva,tv9"/>

兩個 TextView 被隱藏，效果如下：

image

Placeholder

占位符提供可以定位現(xiàn)有對象的虛擬對象。

當(dāng)在占位符上設(shè)置另一個視圖的 id 時( 使用 setContent()) ，占位符有效地成為內(nèi)容視圖。 如果內(nèi)容視圖存在于屏幕上，則將其視為從其原始位置 gone。

 <android.support.constraint.Placeholder
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/tv8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:text="Placeholder"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

效果圖：

image

Guideline

ConstraintLayout 的布局輔助對象。 輔助對象不會顯示在設(shè)備上（它們標(biāo)記為View.GONE），僅用于布局目的。 它們僅在 ConstraintLayout 中工作。

可以通過三種不同的方式定位Guideline：

  • 指定布局左側(cè)或頂部的固定距離（layout_constraintGuide_begin）
  • 指定布局右側(cè)或底部的固定距離（layout_constraintGuide_end）
  • 指定布局的寬度或高度的百分比（layout_constraintGuide_percent）

例：在距離左上角 x = 30%，y=50% 的地方顯示一個 TextView ：

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

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

    <TextView
        android:id="@+id/tvb"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toRightOf="@+id/guideline_0.3"
        app:layout_constraintTop_toBottomOf="@+id/guideline_0.2"/>

效果如下：

image

guideline_0.3 的方向為 vertical，表示這是一根豎直的輔助線。那對于 TextView 來說，可用來確定自身的水平方向的起點。app:layout_constraintGuide_percent="0.3" 表示guideline_0.3 距離 parent 左側(cè)的距離為整個 ConstraintLayout 的 30%;同理，guideline_0.2 距離 parent 頂部的距離為 50%。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容