Android-ConstraintLayout(约束布局)-替

先看两张图，看看常规布局你会怎么做

image image

1.第一张图，你会怎么做？线性+垂直+水平+相对？

2.第二张图，你又会怎么做？线性+垂直+水平+相对?

我们要注意上面布局的细节，我们有些既要垂直对齐，还需要水平对齐，而且控件也很多，很烦。我们就拿相对简单的第二张图吧，看看一般布局怎么做？

activity_main.xml

     <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/testaTv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/testaTv"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册 ?/1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="新用户注册送10个永久算力" />
    </LinearLayout>
    <!--水平布局内部控件无法使用靠右属性-->
    <!--如果想靠右考虑外层用相对布局-->
    <Button
        android:layout_width="118dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="+10永久算力" />
</RelativeLayout>

来看效果:

image

采用约束布局ConstraintLayout以后呢？

xactivity_main_new.xml

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

    <ImageView
        android:id="@+id/testaIv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/testbTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册 ?/1"
        app:layout_constraintLeft_toRightOf="@id/testaIv"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="新用户注册送10个永久算力"
        app:layout_constraintLeft_toRightOf="@id/testaIv"
        app:layout_constraintTop_toBottomOf="@id/testaIv" />

    <Button
        android:layout_width="118dp"
        android:layout_height="wrap_content"
        android:text="+10永久算力"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

看效果：

image

布局上看着是不是还可以，少了一些布局嵌套，清爽多了。而且很多复杂的布局情况下还能优化一下过度绘制的问题!!!

再来看第一张图的布局，相对控件多了很多。就写就行了，把相对位置都固定好就行！能确定上下左右的尽量都写上，也就是left_left/right, right_right/left, top_top/bottom,bottom_top/bottom能确定的就确定即可，这样在复杂布局情况下出问题几率小。不过其中有一点我们需要注意？

C控件是在A、B的右侧，那么问题来了，由于A的内容是变化的，也就是A可能长度超过或者短于B，那么C该以哪个控件的右侧为准？？？？？ ---->Barrier**

image

约束布局已经替我我们考虑到了这点，so,提供了Barrier这个控件来帮助我们动态的根据控件内容调整其属性，酷酷滴...

官方文档了解下： https://constraintlayout.com/basics/barriers.html 看这篇基本就够用了。（里面有提到如果菜单不能创建，那就手动写一个）

Attention: 要使用这个，com.android.support.constraint:constraint-layout 的版本要是1.1.0 , 1.0.x的那些版本无法找到的哟！

来看下布局塞， 然后随意修改textView5的字符串长度，你可以发现控件始终保持在右侧，同时保持间距10dp，Barrier可以滴，弥补了约束布局的一些缺陷，相信后续会越来越完善:

    <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/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="textView5textView5textView5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView4,textView5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView444"
        android:layout_marginLeft="10dp"
        app:layout_constraintStart_toEndOf="@+id/barrier1"
        app:layout_constraintTop_toTopOf="@id/textView4" />

</android.support.constraint.ConstraintLayout>

image image