安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

本人水平有限，如有不当之处，请谅解

我在网上看了一些关于约束布局（ConstraintLayout）的文章，说约束布局可以减少嵌套，使用更方便，所以就实战了一下，看看约束布局如何实现LinearLayout和RelativeLayout的常用功能。

在实战的过程中，对约束布局的属性有时不清楚怎么实现的，于是我发现了一个技巧，那就在拖动控件的界面，让控件实现约束布局，然后再看xml文件，就可以看到这个控件的约束布局怎么实现的，多了哪几个属性。

关于拖动的说明，请看郭霖大神的文章，https://blog.csdn.net/guolin_blog/article/details/53122387

我用的开发环境是Android Studio 2.3.3，新建工程后，默认的就是一个约束布局，约束布局的依赖也是默认添加的。

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

<?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="com.jd.myapplication6.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Android工程中，app module中build.gradle中的内容，都是默认生成的：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "27.0.3"
    defaultConfig {
        applicationId "com.jhd.myapplication6"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
}

约束布局（ConstraintLayout）属性如下：

layout_constraintTop_toTopOf — 期望视图的上边对齐另一个视图的上边。
layout_constraintTop_toBottomOf — 期望视图的上边对齐另一个视图的底边。
layout_constraintTop_toLeftOf — 期望视图的上边对齐另一个视图的左边。
layout_constraintTop_toRightOf — 期望视图的上边对齐另一个视图的右边。
layout_constraintBottom_toTopOf — 期望视图的下边对齐另一个视图的上边。
layout_constraintBottom_toBottomOf — 期望视图的底边对齐另一个视图的底边。
layout_constraintBottom_toLeftOf — 期望视图的底边对齐另一个视图的左边。
layout_constraintBottom_toRightOf — 期望视图的底边对齐另一个视图的右边。
layout_constraintLeft_toTopOf — 期望视图的左边对齐另一个视图的上边。
layout_constraintLeft_toBottomOf — 期望视图的左边对齐另一个视图的底边。
layout_constraintLeft_toLeftOf — 期望视图的左边对齐另一个视图的左边。
layout_constraintLeft_toRightOf — 期望视图的左边对齐另一个视图的右边。
layout_constraintRight_toTopOf — 期望视图的右边对齐另一个视图的上边。
layout_constraintRight_toBottomOf — 期望视图的右边对齐另一个视图的底边。
layout_constraintRight_toLeftOf — 期望视图的右边对齐另一个视图的左边。
layout_constraintRight_toRightOf — 期望视图的右边对齐另一个视图的右边。
如果需要，属性支持开始和结尾也可用在左和右对齐。

附上英文版，也可以无视它，我就无视了。

layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
If desired, attributes supporting start and end are also available in place of left and right alignment.

实战开始，follow me：

添加ImageView，不做约束设置，会位于父控件左上角如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:src="@mipmap/ic_launcher" />

</android.support.constraint.ConstraintLayout>

ImageView位于父控件右侧如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:src="@mipmap/ic_launcher"

app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

ImageView位于父控件底部如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

水平居中如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

垂直居中如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

占水平方向的0.1，（app:layout_constraintHorizontal_bias="0.1"）这个属性的范围是0-1，至于小数点后几位生效还不清楚，但是我把它设置成0.11也生效了，而且我把它设置成0.111111111111111111111111111111111111111111111111111111111111，是否生效，肉眼的我也分辨不出来，但是运行程序没有报错，可以正常运行在手机上，而且距离大概是0.1的位置。

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

占垂直方向的0.1，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

</android.support.constraint.ConstraintLayout>

水平居中并且垂直居中，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

水平方向充满屏幕如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

垂直方向充满屏幕如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

水平和垂直方向都充满屏幕如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

先添加一个ImageView，不做任何约束设置，会默认在屏幕的左上角，再添加一个Button，Button不做约束设置，Button会覆盖在左上角ImageView的上一层，Button的位置也是屏幕的左上角，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</android.support.constraint.ConstraintLayout>

Button位于图片ImageView的右侧，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/iv" />

</android.support.constraint.ConstraintLayout>

Button位于ImageView控件的底部，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toBottomOf="@+id/iv" />

</android.support.constraint.ConstraintLayout>

ImageView控件水平居中，底部Button位于ImageView的底部，并且也水平居中，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/iv"
        app:layout_constraintRight_toRightOf="@+id/iv"
        app:layout_constraintTop_toBottomOf="@+id/iv" />

</android.support.constraint.ConstraintLayout>

还有一种实现方式，关于ImageView控件水平居中，底部Button位于ImageView的底部，并且也水平居中

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv" />

</android.support.constraint.ConstraintLayout>

ImageView水平和垂直居中，Button位于ImageView的底部，并且水平居中，如下图：

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv" />

</android.support.constraint.ConstraintLayout>

安卓（Android）约束布局（ConstraintLayout）实战应用基本属性

继续阅读

Android开发知识（二十六）强大的约束布局 - ConstraintLayout的用法总结前言用法结束语

constraintlayout_熟悉又陌生的ConstraintLayout布局1. 介绍 2. 使用常用属性

ConstraintLayout 的简单使用

ConstraintLayout中使用Guideline限制控件最大宽度

ConstraintLayout控件使用浅析ConstraintLayout控件使用全攻略

Android基本控件之ConstraintLayout

ConstraintLayout 中 TextView 显示不全

ConstraintLayout 作为DialogFragment根布局时的问题

使用约束layout

ConstraintLayout--使用初始部分ConstraintLayout–使用初始部分

Android ConstraintLayout 属性

ConstraintLayout使用

带你领略MotionLayout的魅力（中）

android 点赞动画_Android MotionLayout动画：续写ConstraintLayout新篇章

ConstraintLayout布局浅析

记录用ConstraintLayout实现控件view最大高度的过程