ConstraintLayout简单学习与使用

“自从在去年的Google I/O 大会上发布 ConstraintLayout 以来，我们一直不断改进该布局的稳定性，完善对布局编辑器的支持。我们还针对 ConstraintLayout 增加了一些新功能，帮助您构建不同类型的布局，例如引入链和按比例设置大小。

除了这些功能之外，使用ConstraintLayout还可以获得一项显著的性能优势。”Google 开发者计划工程师 Takeshi Hagikura说，这大概就是这个新布局的有点。

下面我们还是从最基础的布局开始学习。

1.开始

开发工具：AndroidStudio3.0以上

为了要使用ConstraintLayout，我们需要在app/build.gradle文件中添加ConstraintLayout的依赖，如下所示。

dependencies {

implementation 'com.android.support.constraint:constraint-layout:1.1.2' }

2.布局

（1）来编写一个Feed Item

看到这样的布局，大家条件反射应该就是使用RelativeLayout来做，当然了，本案例我们使用ConstraintLayout来写：

    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"

    tools:context="aorise.com.constraintlayout.MainActivity">

        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:id="@+id/activity_main"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="#11ff0000"

        tools:context="com.zhy.constrantlayout_learn.MainActivity">

            android:id="@+id/tv1"

            android:layout_width="140dp"

            android:layout_height="86dp"

            android:layout_marginLeft="12dp"

            android:layout_marginTop="12dp"

            android:background="#fd3"

            app:layout_constraintLeft_toLeftOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            />

            android:id="@+id/tv2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="8dp"

            android:layout_marginRight="12dp"

            android:text="马云:一年交税170多亿马云:一年交税170多亿马云:一年交税170多亿"

            android:textColor="#000000"

            android:textSize="16dp"

            app:layout_constraintLeft_toRightOf="@id/tv1"

            app:layout_constraintRight_toRightOf="parent"

            app:layout_constraintTop_toTopOf="@id/tv1" />

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="8dp"

            android:layout_marginTop="12dp"

            android:text="8分钟前"

            android:textColor="#333"

            android:textSize="12dp"

            app:layout_constraintLeft_toRightOf="@id/tv1"

            app:layout_constraintBottom_toBottomOf="@id/tv1" />

看上面的布局，我们好像看到了几个模式的属性：

首先是tv1，有两个没见过的属性：

app:layout_constraintLeft_toLeftOf="parent"

从字面上看，指的是让该控件的左侧与父布局对齐，当我们希望控件A与控件B左侧对齐时，就可以使用该属性。

app:layout_constraintLeft_toLeftOf="@id/viewB"

类似的还有个相似的属性为：

app:layout_constraintLeft_toRightOf

很好理解，即当前属性的左侧在谁的右侧，当我们希望控件A在控件B的右侧时，可以设置：

app:layout_constraintLeft_toRightOf="@id/viewB"

与之类似的还有几个属性：

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

属性都形如layout_constraintXXX_toYYYOf,

这里我的理解，constraintXXX里的XXX代表是这个子控件自身的哪条边(Left、Right、Top、Bottom、Baseline)，

而toYYYOf里的YYY代表的是和约束控件的哪条边 发生约束 (取值同样是 Left、Right、Top、Bottom、Baseline)。

当XXX和YYY相反时，表示控件自身的XXX在约束控件的YYY的一侧，

例如app:layout_constraintLeft_toRightOf="@id/button1" ，表示的是控件自身的左侧在button1的右侧

从这里看来，功能和RL布局差不多，那为什么还要出这样的布局呢？

3.添加一个Banner

我们现在以往在这个feed item顶部添加一个banner，宽度为占据整个屏幕，宽高比为16：6。

这里尴尬了，在之前的做法，很难在布局中设置宽高比，一般我们都需要在代码中显示的去操作，那么如果你用了ConstraintLayout，它就支持。

<TextView

    android:id="@+id/banner"

    android:layout_width="0dp"

    android:layout_height="0dp"

    android:background="#765"

    android:gravity="center"

    android:text="Banner"

    app:layout_constraintDimensionRatio="H,16:6"

    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent" />

我们添加了一个banner，还记得我们刚才所说的么，不要使用match_parent了，而是设置match_contraint，即0，让约束来控制布局宽高。

所以我们设置了宽、高都是match_contraint，然后这两个属性：

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

让我们的宽度充满整个父布局，在添加一个：

app:layout_constraintDimensionRatio="16:6"

4.增加几个Tab

 <TextView

 android:id="@+id/tab1"

    android:layout_width="0dp"

    android:layout_height="30dp"

    android:background="#f67"

    android:gravity="center"

    android:text="Tab1"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toLeftOf="@+id/tab2" />

<TextView

    android:id="@+id/tab2"

    android:layout_width="0dp"

    android:layout_height="30dp"

    android:background="#A67"

    android:gravity="center"

    android:text="Tab2"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintLeft_toRightOf="@id/tab1"

    app:layout_constraintRight_toLeftOf="@+id/tab3" />

<TextView

    android:id="@+id/tab3"

    android:layout_width="0dp"

    android:layout_height="30dp"

    android:background="#767"

    android:gravity="center"

    android:text="Tab3"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintLeft_toRightOf="@id/tab2"

    app:layout_constraintRight_toRightOf="parent" />

现在我们可以给每个tab设置一个属性：

app:layout_constraintHorizontal_weight

看到这个名字，应该就明白了吧，假设我们分别设置值为2，1，1

目前差不多学到了这么多.