ConstraintLayout初次了解

>作者:燕歆波

>导读：ConstraintLayout初次使用!

ConstraintLayout出来有一段时间了,今天花了一点时间写了一个很简单的demo,目的只是想了解一下基本的使用；

在我们创建activity的时候,默认的xml的跟布局都会是ConstraintLayout布局,一般情况下,大家都会直接删掉然后使用RelativeLayout或者LinearLayout，还可能是其他的布局吧?

今天的目的就是要认识认识这个角色,所以就留下它吧!

先看一下这个so easy的例子吧:

<?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"
    tools:context="xiao.com.vim.activity.ConstraintLayoutActivity">


    <LinearLayout
        android:id="@+id/ll"
        android:orientation="vertical"
        android:background="@color/colorAccent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="16:6"
        app:layout_constraintTop_toTopOf="parent">


    </LinearLayout>

    <TextView
        android:id="@+id/tv1"
        android:layout_width="140dp"
        android:layout_height="86dp"
        android:layout_marginRight="12dp"
        android:layout_marginTop="12dp"
        android:background="#fd3"
        app:layout_constraintTop_toBottomOf="@+id/ll"
        app:layout_constraintRight_toRightOf="parent"

        />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="12dp"
        android:text="的设计费垃圾哦哦手机建立评价法"
        android:textColor="#000000"
        android:textSize="16sp"
        app:layout_constraintRight_toLeftOf="@id/tv1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv1" />

    <TextView
        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_constraintRight_toLeftOf="@id/tv1"
        app:layout_constraintBottom_toBottomOf="@id/tv1" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintVertical_bias="0.1" />
    
    <android.support.constraint.Guideline
        android:id="@+id/guideline_w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8"
        />

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

</android.support.constraint.ConstraintLayout>

英语不错的童鞋,肯定知道这个控件的含义"约束布局",当然,我是百度翻译得到的意思,虽然我是一个开发者,可是不得不说,我英语just so so；

这个布局的效果如下:

既然是约束布局,那它有那些约束性的属性呢?通过上面的xml页面,应该可以看得更清楚吧。

     app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="16:6"
        app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

 这个属性的含义就是:这个控件的左边是在它父容器的左边,

app:layout_constraintRight_toRightOf="parent"

   这个属性的含义就是:这个控件的右边是在它父容器的右边,

  类似的属性就不做过多的阐述了，意思是一样的；

app:layout_constraintDimensionRatio="16:6"

   对于这个属性,它的含义是:约束此控件的宽高比例是:16:6；

app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintVertical_bias="0.1"

对于这两个属性是对控件在屏幕的位置比例进行约束:水平方向10%的位置.垂直方向10%的位置;也就是说,此控件会在屏幕的左上角距离顶部10%的距离，距离左边也是10%的距离。

<LinearLayout
        android:id="@+id/ll"
        android:orientation="vertical"
        android:background="@color/colorAccent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="16:6"
        app:layout_constraintTop_toTopOf="parent">


    </LinearLayout>

对于这个布局,看到一些博客上是这么解释的:在约束布局里面,MATCH_PARENT是没有作用的；

官网解释如下:MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`

取而代之的是MATCH_CONSTRAINT；0在ConstraintLayout中代表着MATCH_CONSTRAINT；

然后使用：

app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

这两属性让这个布局撑满,接着设置宽高比例,最后就是让此布局位于父容器的顶部;

至于顶部的蓝色方块,主要说的是下面两个属性

app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintVertical_bias="0.1"

我的理解bias主要是控制方块在屏幕中的位置:0.1代表屏幕10%的地方;

这两句话就代表着方块在屏幕的左上角，x轴方向10%，y轴方向10%；

练习的一些基本的属性就是这样:还得靠自己在项目中使用才能得心应手!