ConstraintLayout&MotionLayout

最近编辑于2018年9月7日

ConstraintLayout

顾名思义，约束布局———在constraintLayout下的子控件都会受到外来的“力”，从而确定该子控件的位置。

一、constraintLayout来自支持库，所以要想使用先要在gradle中引入

repositories {
    google()
}
dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}

 

二、“力”的发出者，作用点，作用方向
  举个例子：

app:layout_constraintLeft_toLeftOf="parent"

parent：发出者是parent；
constraintLeft：作用在该子控件的左侧；
toLeftOf    constraintLeft：从parent的左侧拉住该子控件的左侧。
 

“力”的发出者：
parent：包含此控件的constraintLayout；
@+id/button8：其他子控件；
@+id/guideline3：准线———一条用于定位的不可见的线；
举个例子：

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline3"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

android:orientation="vertical"：这是一条从上至下的准线；
app:layout_constraintGuide_percent="0.5"：该准线位于constraintLayout的50%处；
这条准线从中间把constraintLayout分成左右两半；
@+id/barrier7：屏障———由几个控件组成的一道不可见的“墙”；
举个例子：

<?xml version="1.0" encoding="utf-8"?>
<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/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="short"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="longlonglong"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="@string/lake_discription"这里很长一段
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

app:constraint_referenced_ids="textView2,textView1"：由 textView2,textView1组成的“墙”；
app:barrierDirection="end"：在textView2,textView1的尾部（一般指右侧）；
app:layout_constraintStart_toEndOf="@+id/barrier7"：这个墙的尾部（写toStartOf一样的效果，因为“墙”只是一条线，不分首尾）拉住textView3的头部；
最后效果图：

 

“力”的方向与作用点： 

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

layout_constraintBaseline_toBaselineOf：文字基准线对齐文字基准线，这个这么理解；
另外：constraintlayout中的app:layout_constraintLeft_toLeftOf="parent"和app:layout_constraintEnd_toEndOf="parent"配合起来用会使布局靠近parent的右侧。

        android:layout_width="wrap_content"                    
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
等价于
        android:layout_width="0dp"//或者wrap_content
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintEnd_toEndOf="parent"

效果图如下：
 

三、“力”的大小与bias：
默认情况下，左右的力是相同大小的，上下的力是相同大小的；
左右居中只需要如下：

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

那么如何更偏左一点，加大左边的力？那不是直接拉到最左边了？假设控件处于一个左右横置的管子中，那么只要减少左边的压强，那么控件就会往左跑。跑到哪里？还是不确定。Google提供了更简单的方法是控件停在需要的位置：

                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent

app:layout_constraintHorizontal_bias="0.3"：该控件会停在左边占空白30%，右侧占空白70%的位置。

 

四、边距：
和原来一样的边距表示方式：

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marg