激情网在线,亚洲精品美女被操网站,精品久久一五区

前言

在這里我要向大家介紹ConstraintLayout，它是一種布局方法，可以幫助我們?cè)趯?duì)Android進(jìn)行布局時(shí)減少對(duì)布局層次的嵌套，進(jìn)而提高app的性能。

接下來(lái)我會(huì)通過(guò)一些示例來(lái)全面介紹ConstraintLayout的使用方式與它的一些特性。希望能夠幫助正在學(xué)習(xí)ConstraintLayout使用的同學(xué)們。

ConstraintLayout VS RelativeLayout

相信當(dāng)我們進(jìn)行布局的時(shí)候，使用最多的應(yīng)該是LinearLayout與RelativeLayout。而對(duì)于復(fù)雜一點(diǎn)的布局來(lái)說(shuō)，他們之間的嵌套使用就最正常不過(guò)了。所以為了減少不必要的嵌套布局，Google特意開(kāi)發(fā)的ConstraintLayout。它同時(shí)支持LinearLayout與RelativeLayout的所用特性。同時(shí)它完全通過(guò)約束來(lái)減少布局的嵌套。意思就是基本上最外層只需要一個(gè)ConstraintLayout節(jié)點(diǎn)就可以了。下面先從RelativeLayout開(kāi)始，看它是如何來(lái)實(shí)現(xiàn)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"

相信上面的特性大家再熟悉不過(guò)了。對(duì)于layout_align*的屬性在ConstraintLayout中可以通過(guò)以下方式替代。

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"

而對(duì)于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"

接下來(lái)是layout_alignParent*的替代實(shí)現(xiàn)：

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*基本類(lèi)似，只不過(guò)它的所以約束的對(duì)象不同而已，為了實(shí)現(xiàn)對(duì)父布局的依賴，這里統(tǒng)一都是parent。

最后是layout_center*屬性，本質(zhì)與上面的基本類(lèi)似。下面直接通過(guò)實(shí)例來(lái)展示

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

通過(guò)上面的代碼相信不難理解，要想實(shí)現(xiàn)水平居中只需設(shè)置left與right分別約束parent，而要想實(shí)現(xiàn)豎直居中則只需設(shè)置top與bottom分別約束parent。

為了鞏固上面的特性，我這里寫(xiě)了一個(gè)示例代碼與效果圖，方便大家理解

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

效果圖

點(diǎn)擊查看源碼

在ConstraintLayout中沒(méi)有match_parent,而與之替代的是match_constraint，在使用中通過(guò)0dp來(lái)代表。一旦你使用了match_parent那么它的約束將會(huì)失效。

ConstraintLayout VS LinearLayout

為了能夠達(dá)到LinearLayout的效果，ConstraintLayout引入了Chain Style.通過(guò)以下代碼來(lái)設(shè)置：

app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

它主要有三個(gè)屬性分別為：

spread_inside:兩邊不留空間，中間間距平分
spread:完全均分
packed:完全不留間距

解釋的有點(diǎn)生硬，下面通過(guò)一張官方圖來(lái)更直觀的了解

效果圖

需要注意的是：要達(dá)到上的的chain效果，他們之間必須完全相互約束，同時(shí)chain style的設(shè)置都是以第一個(gè)view為基點(diǎn)。同時(shí)默認(rèn)chain style為spread。

同樣的下面是一個(gè)示例代碼與效果圖

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

效果圖

點(diǎn)擊查看源碼

通過(guò)效果圖，我們會(huì)發(fā)現(xiàn)第二行他們占的比例不同，返回看代碼發(fā)現(xiàn)其實(shí)與LinearLayout類(lèi)似,使用了app:layout_constraintHorizontal_weight=""權(quán)重屬性。當(dāng)然要使得其生效必須layout_width與layout_height其中一個(gè)為0dp。
我們?cè)賮?lái)看第4、5行，如果chain style的值為packed，那么它默認(rèn)是居中排列的，如果想改變的話可以通過(guò)設(shè)置app:layout_constraintHorizontal_bias="0.2"與app:layout_constraintVertical_bias="0.2"。

margin & goneMargin

margin

ConstraintLayout的margin與原來(lái)的使用區(qū)別主要為兩點(diǎn)：其一android:layout_margin*效果不變，但它的值不能為負(fù)值；其二相應(yīng)方向的margin設(shè)置必須要有約束，否則不生效。

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

首先我們來(lái)看第二個(gè)TextView，它的marginLeft會(huì)生效，因?yàn)樗衛(wèi)eft方向的約束：app:layout_constraintLeft_toRightOf="@+id/tv1"；而對(duì)于第一個(gè)TextView，它的marginRight不會(huì)生效，因?yàn)樗膔ight方向上沒(méi)有約束，所以如果要生效可以加入:app:layout_constraintRight_toRightOf="parent約束。

這些都是相對(duì)于原來(lái)布局margin使用的區(qū)別，如果你覺(jué)得不習(xí)慣可以使用padding代替，這也是ConstraintLayout所推薦的方式。

goneMargin

在ConstraintLayout中還增加了另外一種goneMargin，它的作用主要是：一旦某個(gè)方向上的約束view不可以見(jiàn)，這時(shí)如果設(shè)置了該屬性，該方向?qū)⒆詣?dòng)增加margin值。即目標(biāo)必須不可見(jiàn)。

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

效果圖

點(diǎn)擊查看源碼

Circle

在ConstraintLayout中你不僅可以對(duì)任意view進(jìn)行水平與豎直方向的約束，同時(shí)你還可以居于約束view的中心點(diǎn)進(jìn)行不同角度方向的約束。主要屬性有如下三種：

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>

效果圖

點(diǎn)擊查看源碼

GuideLine

GuideLine也是ConstraintLayout特有的屬性，它相當(dāng)于一個(gè)參考線，且它的布局中不會(huì)展示。

GuidLine有水平與豎直方法的設(shè)置：

android:orientation="horizontal|vertical"

主要設(shè)置屬性為：

layout_constraintGuide_begin: 代表距離GuideLine左邊或者底部的距離
layout_constraintGuide_end: 代表距離GuideLine右邊或者底部的距離
layout_constraintGuide_percent：代表GuideLine相對(duì)于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>

效果圖

點(diǎn)擊查看源碼

Barrier & Group

Barrier

Barrier與GuideLine有點(diǎn)類(lèi)似，也是布局不可見(jiàn)的，不同的是它就約束對(duì)象的，看如下圖：

效果圖

如果有這么一種需求：tv3始終在tv1與tv2的最近右邊，但tv1與tv2的寬度的不看預(yù)期的，即可能tv1更長(zhǎng)或者tv2更長(zhǎng)。這時(shí)Barrier就能很好的解決這問(wèn)題。

    <!--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中有兩個(gè)屬性，分別為:

barrierDirection：控制其方向
constraint_referenced_ids：約束的view的參考id

Group

細(xì)心的你可能會(huì)發(fā)現(xiàn)，既然ConstraintLayout中能減少布局的嵌套，那么對(duì)于同一模塊的UI對(duì)其進(jìn)行整體操作，是否只能逐一進(jìn)行操作（顯隱操作）？ConstraintLayout給出了它的答案，就是Group。它的作用就是對(duì)多個(gè)view進(jìn)行分組操作，當(dāng)然在布局中也是不可見(jiàn)的。主要屬性是：

constraint_referenced_ids: 約束的view的參考id

就拿上面Barrier的示例來(lái)說(shuō)。

    <!--group 通過(guò)設(shè)置關(guān)聯(lián)id來(lái)控制它們的顯隱-->
    <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" />

如果加了如上代碼，那么對(duì)group進(jìn)行VISIBLE操作時(shí)，對(duì)同時(shí)作用于tv1與tv2。

點(diǎn)擊查看源碼

other

下面來(lái)說(shuō)一下使用ConstraintLayout時(shí)，一些需要注意的點(diǎn)。這樣可以幫助你在使用做少走彎路。

wrap_content

如果你的View中對(duì)寬高使用了wrap_content，那么你要時(shí)刻注意，它的約束可能并不會(huì)很好的生效。例如如下實(shí)例：

    <!--當(dāng)為wrap_content對(duì)其進(jìn)行強(qiáng)制約束-->
    <!--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"這行代碼刪除，那么你將會(huì)看到如下效果

效果圖

在代碼注釋中已經(jīng)說(shuō)明，在使用wrap_content時(shí)，還可以使用minWith等屬性。它們之間的優(yōu)先級(jí)為 min/max > constraintWith/Height

MATCH_CONSTRAIN

當(dāng)使用了MATCH_CONSTRAIN，即0dp來(lái)展示寬高時(shí)，可以通過(guò)如下方式來(lái)進(jìn)行約束相應(yīng)寬高值。

    <!--當(dāng)為MATCH_CONSTRAINT 可以通過(guò)以下設(shè)置來(lái)約束寬高-->
    <!--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"去掉的話，你將看到如下效果：

效果圖

注意它們之間的優(yōu)先級(jí)為parent > min/max > constraint_min/max

Ratio

如果你的需要是對(duì)View進(jìn)行固定寬高比展示時(shí)，那么Ratio的這個(gè)特性將非常適合你。你只需設(shè)置它的layout_constraintDimensionRatio屬性即可。

如果layout_width與layout_height其中一個(gè)為MATCH_CONSTRAIN（0dp）, MATCH_CONSTRAIN（0dp）的值將根據(jù)layout_constraintDimensionRatio所設(shè)的值來(lái)計(jì)算（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）, 那么可以對(duì)layout_constraintDimensionRatio添加前綴W/H（H，w:h，來(lái)對(duì)其進(jìn)行寬高方向的約束，從而形成比例。

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

效果圖

根據(jù)效果圖展示的寬高比為1:3。即對(duì)應(yīng)了H,3:1。

點(diǎn)擊查看源碼

End

到這里ConstraintLayout的使用全部介紹完畢，希望能有所作用與幫助。如有不足之處歡迎指出，謝謝！

點(diǎn)擊跳轉(zhuǎn)到項(xiàng)目地址

關(guān)注

怪談時(shí)間到了

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

ConstraintLayout使用匯總

ConstraintLayout使用匯總

前言

ConstraintLayout VS RelativeLayout

ConstraintLayout VS LinearLayout

margin & goneMargin

margin

goneMargin

Circle

GuideLine

Barrier & Group

Barrier

Group

other

wrap_content

MATCH_CONSTRAIN

Ratio

End

關(guān)注

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

ConstraintLayout使用匯總

前言

ConstraintLayout VS RelativeLayout

ConstraintLayout VS LinearLayout

margin & goneMargin

margin

goneMargin

Circle

GuideLine

Barrier & Group

Barrier

Group

other

wrap_content

MATCH_CONSTRAIN

Ratio

End

關(guān)注

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av