ConstrainLayout相关用法

自从constraintlayout出来后，我就很少使用其他的布局了，主要原因除了它的layout和渲染效率提升以外，它太灵活了，极其少的情景下实现不了需求。

基本用法

以下图为例 8D2DBDCA-4901-424E-B2EF-8A7176F1A3F6.png

整个布局只有一个层级。
相关约束(上/下/左/右)

         app:layout_constraintLeft_toLeftOf="xx"
         app:layout_constraintTop_toTopOf="xx"
         app:layout_constraintTop_toBottomOf="xx"
         app:layout_constraintBottom_toTopOf="@+id/xx"
         app:layout_constraintRight_toRightOf="xx"   
         app:layout_constraintBaseline_toBaselineOf="xx"      

• guildeline的用法
  ui设计一般以375 x 750dp为设计屏幕尺寸。但是android屏幕众多，不能以dp为单位进行布局实现，这时候以guideline实现某些布局可能更适合。
  下面是它的一种典型用法

<android.support.constraint.Guideline
            android:id="@+id/gd_two"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

控件A和控件B居中对齐

6D75BE2D-D5FB-4270-B7D9-F19835B566E9.png

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@color/orange_ff9300"
        android:text="控件A"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_marginLeft="16dp"
        android:background="@color/orange_ff9300"
        android:gravity="center"
        android:text="控件B"
        app:layout_constraintBottom_toTopOf="@+id/tv_a"
        app:layout_constraintLeft_toRightOf="@+id/tv_a"
        app:layout_constraintTop_toBottomOf="@+id/tv_a" />

</android.support.constraint.ConstraintLayout>

Baseline

59F15527-122F-4BE4-BCF0-B3A9D560EA5F.png

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@color/orange_ff9300"
        android:text="控件A"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_marginLeft="16dp"
        android:background="@color/orange_ff9300"
        android:gravity="center"
        android:text="控件B"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_a"
        app:layout_constraintLeft_toRightOf="@+id/tv_a" />

layout_goneMarginBottom

这个属性要俩个图对比才明显，如下图

4B097EB4-96B6-44EE-8F64-585F4C9BD9D9.png

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray_999999"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@color/orange_ff9300"
        android:text="控件A"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/tv_b"
        app:layout_goneMarginBottom="32dp"
        />

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_marginBottom="@dimen/dp8"
        android:background="@color/blue_17a1e6_80"
        android:gravity="center"
        android:text="控件B"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_a" />

</android.support.constraint.ConstraintLayout>

控件B加上属性android:visibility="gone"后，效果如下

1C3D612D-C482-4601-AB3D-07095A181A55.png

（未完待续）