原文地址:https://segmentfault.com/a/1190000014876944?utm_source=tag-newest#articleHeader10
前言
在這裏我要向大家介紹ConstraintLayout,它是一種佈局方法,可以幫助我們在對Android進行佈局時減少對佈局層次的嵌套,進而提高app的性能。
接下來我會通過一些示例來全面介紹ConstraintLayout的使用方式與它的一些特性。希望能夠幫助正在學習ConstraintLayout使用的同學們。
ConstraintLayout VS RelativeLayout
相信當我們進行佈局的時候,使用最多的應該是LinearLayout與RelativeLayout。而對於複雜一點的佈局來說,他們之間的嵌套使用就最正常不過了。所以爲了減少不必要的嵌套佈局,Google特意開發的ConstraintLayout。它同時支持LinearLayout與RelativeLayout的所用特性。同時它完全通過約束來減少佈局的嵌套。意思就是基本上最外層只需要一個ConstraintLayout節點就可以了。下面先從RelativeLayout開始,看它是如何來實現RelativeLayout的特性。
這裏我列舉一些RelativeLayout的特性:
android:layout_alignStart="@id/view"
android:layout_alignLeft="@id/view"
android:layout_alignEnd="@id/view"
android:layout_alignRight="@id/view"
android:layout_alignTop="@id/view"
android:layout_alignBaseline="@id/view"
android:layout_alignBottom="@id/view"
android:layout_toStartOf="@id/view"
android:layout_toLeftOf="@id/view"
android:layout_toEndOf="@id/view"
android:layout_toRightOf="@id/view"
android:layout_above="@id/view"
android:layout_below="@id/view"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
相信上面的特性大家再熟悉不過了。對於layout_align*的屬性在ConstraintLayout中可以通過以下方式替代。
app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintLeft_toLeftOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
app:layout_constraintRight_toRightOf="@id/view"
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBaseline_toBaselineOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"
而對於layout_to*的屬性ConstraintLayout也有與之完美替代的特性:
app:layout_constraintStart_toEndOf="@id/view"
app:layout_constraintLeft_toRightOf="@id/view"
app:layout_constraintEnd_toStartOf="@id/view"
app:layout_constraintRight_toLeftOf="@id/view"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/view"
接下來是layout_alignParent*的替代實現:
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
這裏與之前的layout_align*基本類似,只不過它的所以約束的對象不同而已,爲了實現對父佈局的依賴,這裏統一都是parent。
最後是layout_center*屬性,本質與上面的基本類似。下面直接通過實例來展示
<Button
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
通過上面的代碼相信不難理解,要想實現水平居中只需設置left與right分別約束parent,而要想實現豎直居中則只需設置top與bottom分別約束parent。
爲了鞏固上面的特性,我這裏寫了一個示例代碼與效果圖,方便大家理解
<?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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bottom"
app:layout_constraintBottom_toBottomOf="parent" />
<Button
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center top"
app:layout_constraintBottom_toTopOf="@+id/center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center left"
app:layout_constraintRight_toLeftOf="@+id/center"
app:layout_constraintTop_toTopOf="@+id/center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center right"
app:layout_constraintLeft_toRightOf="@+id/center"
app:layout_constraintTop_toTopOf="@+id/center" />
</android.support.constraint.ConstraintLayout>
在ConstraintLayout中沒有match_parent,而與之替代的是match_constraint,在使用中通過0dp來代表。一旦你使用了match_parent那麼它的約束將會失效。
ConstraintLayout VS LinearLayout
爲了能夠達到LinearLayout的效果,ConstraintLayout引入了Chain Style.通過以下代碼來設置:
app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""
它主要有三個屬性分別爲:
- spread_inside:兩邊不留空間,中間間距平分
- spread:完全均分
- packed:完全不留間距
解釋的有點生硬,下面通過一張官方圖來更直觀的瞭解
需要注意的是:要達到上的的chain效果,他們之間必須完全相互約束,同時chain style的設置都是以第一個view爲基點。同時默認chain style爲spread。
同樣的下面是一個示例代碼與效果圖
<?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">
<Button
android:id="@+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/second" />
<Button
android:id="@+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/first"
app:layout_constraintRight_toLeftOf="@+id/third"
app:layout_constraintTop_toTopOf="@+id/first" />
<Button
android:id="@+id/third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/first" />
<Button
android:id="@+id/match_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/match_second"
app:layout_constraintTop_toBottomOf="@+id/first" />
<Button
android:id="@+id/match_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintLeft_toRightOf="@+id/match_first"
app:layout_constraintRight_toLeftOf="@+id/match_third"
app:layout_constraintTop_toTopOf="@+id/match_first" />
<Button
android:id="@+id/match_third"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintHorizontal_weight="4"
app:layout_constraintLeft_toRightOf="@+id/match_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/match_first" />
<Button
android:id="@+id/spread_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/spread_second"
app:layout_constraintTop_toBottomOf="@+id/match_first" />
<Button
android:id="@+id/spread_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/spread_first"
app:layout_constraintRight_toLeftOf="@+id/spread_third"
app:layout_constraintTop_toTopOf="@+id/spread_first" />
<Button
android:id="@+id/spread_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/spread_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/spread_first" />
<Button
android:id="@+id/packed_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/packed_second"
app:layout_constraintTop_toBottomOf="@+id/spread_first" />
<Button
android:id="@+id/packed_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/packed_first"
app:layout_constraintRight_toLeftOf="@+id/packed_third"
app:layout_constraintTop_toTopOf="@+id/packed_first" />
<Button
android:id="@+id/packed_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/packed_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/packed_first" />
<Button
android:id="@+id/bias_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/bias_second"
app:layout_constraintTop_toBottomOf="@+id/packed_first" />
<Button
android:id="@+id/bias_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/bias_first"
app:layout_constraintRight_toLeftOf="@+id/bias_third"
app:layout_constraintTop_toTopOf="@+id/bias_first" />
<Button
android:id="@+id/bias_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/bias_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/bias_first" />
</android.support.constraint.ConstraintLayout>
通過效果圖,我們會發現第二行他們佔的比例不同,返回看代碼發現其實與LinearLayout類似,使用了app:layout_constraintHorizontal_weight=""
權重屬性。當然要使得其生效必須layout_width與layout_height其中一個爲0dp。
我們再來看第4、5行,如果chain style的值爲packed,那麼它默認是居中排列的,如果想改變的話可以通過設置app:layout_constraintHorizontal_bias="0.2"
與app:layout_constraintVertical_bias="0.2"
。
margin & goneMargin
margin
ConstraintLayout的margin與原來的使用區別主要爲兩點:其一android:layout_margin*效果不變,但它的值不能爲負值;其二相應方向的margin設置必須要有約束,否則不生效。
<TextView
android:id="@+id/tv1"
...
android:layout_marginRight="100dp"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:layout_marginLeft="10dp"
...
app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
app:layout_constraintLeft_toRightOf="@+id/tv1" />
首先我們來看第二個TextView,它的marginLeft會生效,因爲它有left方向的約束:app:layout_constraintLeft_toRightOf="@+id/tv1";而對於第一個TextView,它的marginRight不會生效,因爲它的right方向上沒有約束,所以如果要生效可以加入:app:layout_constraintRight_toRightOf="parent約束。
這些都是相對於原來佈局margin使用的區別,如果你覺得不習慣可以使用padding代替,這也是ConstraintLayout所推薦的方式。
goneMargin
在ConstraintLayout中還增加了另外一種goneMargin,它的作用主要是:一旦某個方向上的約束view不可以見,這時如果設置了該屬性,該方向將自動增加margin值。即目標必須不可見。
<?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/tv1"
android:layout_marginTop="100dp"
android:text="tv1"
...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:layout_marginLeft="10dp"
android:text="tv2"
....
app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
app:layout_constraintLeft_toRightOf="@+id/tv1" />
<TextView
android:id="@+id/tv3"
...
android:text="tv3"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv4"
android:layout_marginLeft="10dp"
android:text="tv4"
...
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv3"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginLeft="100dp" />
<TextView
android:id="@+id/tv5"
...
android:layout_marginBottom="10dp"
android:text="tv5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.33" />
</android.support.constraint.ConstraintLayout>
Circle
在ConstraintLayout中你不僅可以對任意view進行水平與豎直方向的約束,同時你還可以居於約束view的中心點進行不同角度方向的約束。主要屬性有如下三種:
- layout_constraintCircle: 代表約束的view的id
- layout_constraintCircleAngle: 代表約束的角度
- layout_constraintCircleRadius: 代表約束的半徑大小
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>
<TextView
android:id="@+id/tv1"
android:text="tv1"
...
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:text="tv2"
...
app:layout_constraintCircle="@id/tv1"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="100dp" />
</android.support.constraint.ConstraintLayout>
GuideLine
GuideLine也是ConstraintLayout特有的屬性,它相當於一個參考線,且它的佈局中不會展示。
GuidLine有水平與豎直方法的設置:
android:orientation="horizontal|vertical"
主要設置屬性爲:
- layout_constraintGuide_begin: 代表距離GuideLine左邊或者底部的距離
- layout_constraintGuide_end: 代表距離GuideLine右邊或者底部的距離
- layout_constraintGuide_percent:代表GuideLine相對於parent的位置百分比
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>
<android.support.constraint.Guideline
android:id="@+id/vertical_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="150dp" />
<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/vertical_guide_line"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/horizontal_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="150dp" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintRight_toLeftOf="@+id/vertical_guide_line"
app:layout_constraintTop_toTopOf="@+id/horizontal_guide_line" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="@+id/horizontal_guide_line"
app:layout_constraintLeft_toRightOf="@+id/vertical_guide_line" />
<android.support.constraint.Guideline
android:id="@+id/percent_guide_Line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="margin top of parent 30%"
app:layout_constraintTop_toBottomOf="@+id/percent_guide_Line" />
</android.support.constraint.ConstraintLayout>
Barrier & Group
Barrier
Barrier與GuideLine有點類似,也是佈局不可見的,不同的是它就約束對象的,看如下圖:
如果有這麼一種需求:tv3始終在tv1與tv2的最近右邊,但tv1與tv2的寬度的不看預期的,即可能tv1更長或者tv2更長。這時Barrier就能很好的解決這問題。
<!--barrier-->
<TextView
android:id="@+id/tv1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="tv1,固定寬度"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="tv2,寬度不固定"
android:textColor="@android:color/white"
app:layout_constraintTop_toBottomOf="@+id/tv1" />
<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="tv1,tv2" />
<TextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="@string/barrier_tv3"
android:textColor="@android:color/white"
app:layout_constraintLeft_toRightOf="@+id/barrier"
app:layout_constraintRight_toRightOf="parent" />
在Barrier中有兩個屬性,分別爲:
- barrierDirection:控制其方向
- constraint_referenced_ids:約束的view的參考id
Group
細心的你可能會發現,既然ConstraintLayout中能減少佈局的嵌套,那麼對於同一模塊的UI對其進行整體操作,是否只能逐一進行操作(顯隱操作)?ConstraintLayout給出了它的答案,就是Group。它的作用就是對多個view進行分組操作,當然在佈局中也是不可見的。主要屬性是:
constraint_referenced_ids: 約束的view的參考id
就拿上面Barrier的示例來說。
<!--group 通過設置關聯id來控制它們的顯隱-->
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tv1,tv2" />
如果加了如上代碼,那麼對group進行VISIBLE操作時,對同時作用於tv1與tv2。
other
下面來說一下使用ConstraintLayout時,一些需要注意的點。這樣可以幫助你在使用做少走彎路。
wrap_content
如果你的View中對寬高使用了wrap_content,那麼你要時刻注意,它的約束可能並不會很好的生效。例如如下實例:
<!--當爲wrap_content對其進行強制約束-->
<!--app:layout_constrainedWidth=”true|false”-->
<!--app:layout_constrainedHeight=”true|false”-->
<!--android:minWidth-->
<!--android:minHeight-->
<!--android:maxWidth-->
<!--android:maxHeight-->
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv1"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="@string/other_tv2"
android:textColor="@android:color/white"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toRightOf="@+id/tv1"
app:layout_constraintRight_toRightOf="parent" />
如果將app:layout_constrainedWidth="true"這行代碼刪除,那麼你將會看到如下效果
在代碼註釋中已經說明,在使用wrap_content時,還可以使用minWith等屬性。它們之間的優先級爲 min/max > constraintWith/Height
MATCH_CONSTRAIN
當使用了MATCH_CONSTRAIN,即0dp來展示寬高時,可以通過如下方式來進行約束相應寬高值。
<!--當爲MATCH_CONSTRAINT 可以通過以下設置來約束寬高-->
<!--layout_constraintWidth_min and layout_constraintHeight_min-->
<!--layout_constraintWidth_max and layout_constraintHeight_max-->
<!--layout_constraintWidth_percent and layout_constraintHeight_percent-->
<!--android:minWidth-->
<!--android:minHeight-->
<!--android:maxWidth-->
<!--android:maxHeight-->
<TextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv3"
android:textColor="@android:color/white"
app:layout_constraintTop_toBottomOf="@+id/tv1"
app:layout_constraintWidth_percent="0.5" />
如果將app:layout_constraintWidth_percent="0.5"去掉的話,你將看到如下效果:
注意它們之間的優先級爲parent > min/max > constraint_min/max
Ratio
如果你的需要是對View進行固定寬高比展示時,那麼Ratio的這個特性將非常適合你。你只需設置它的layout_constraintDimensionRatio屬性即可。
如果layout_width與layout_height其中一個爲MATCH_CONSTRAIN(0dp), MATCH_CONSTRAIN(0dp)的值將根據layout_constraintDimensionRatio所設的值來計算(w:h)
<TextView
android:id="@+id/tv4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv4"
android:textColor="@android:color/white"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintTop_toBottomOf="@+id/tv3" />
如果layout_width與layout_height都爲MATCH_CONSTRAIN(0dp), 那麼可以對layout_constraintDimensionRatio添加前綴W/H(H,w:h,來對其進行寬高方向的約束,從而形成比例。
<TextView
android:id="@+id/tv5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv5"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,3:1"
app:layout_constraintTop_toBottomOf="@+id/tv4" />
根據效果圖展示的寬高比爲1:3。即對應了H,3:1。
End
到這裏ConstraintLayout的使用全部介紹完畢,希望能有所作用與幫助。如有不足之處歡迎指出,謝謝!