用约束布局两分钟快拉了一个登陆界面，如图所示：



具体操作步骤是：

1.Constrainlayout里面直接拉textview和button，然后再拉一拉，拉到有四条波浪线的时候（可以随便到处拉了）

2.拉到相应的位置，改一下button的text等

3.在attributes的declare attributes里面可以再改位置（如果不满意的话），如下图所示



约束布局还是比较简单

约束布局（ConstraintLayout）的使用

背景

之前已经提到了六大基础布局的最常见的两种，其余四种百度都有完整的教程，不多提及了。但是在布局的最后想提一下这个突然崛起的约束布局。
很多人说现在使用线性布局代码提示都没了，这是因为2.3之后官方其实更推荐使用约束布局，所以关掉了线性布局的关联提示。


什么是ConstraintLayout

这是谷歌2016年推出的一种新的布局方式。扁平式的布局方式，没有任何嵌套，同时减少布局的层级，优化了渲染性能。毫无疑问，未来的安卓原生开发中它会出现得越来越多，因为它几乎集成了之前提到的所有布局的优点（线性，相对，百分比）。
如果说之前的布局都不适合用可视化编辑的，而是只能使用xml代码化编辑，那么ConstraintLayout就是非常适合可视化编辑的。


初试使用

要想使用，gradle脚本必须添加如下的依赖。（新版本默认添加）

compile 'com.android.support.constraint:constraint-layout:1.0.2'


xml代码中将之前的Relativelayout或者LinearLayout换成Constraintlayout。（也可以界面替换）

-切换工作模式为可视化编辑，点击如下。这种工作方式下组件的添加为拖动加入。
工作画面如下。左边是预览界面（看最终效果），右边是蓝图界面（看约束情况）。




可以看到，每一个控件四周都有一个圆圈，用来添加约束（可以是布局也可以是兄弟控件）。
删除约束的方法也简单，鼠标移至约束所在组件的圆圈上方，待圆圈变红之后单击。（如下图）


简单使用

选中会出现属性界面，特别是上方的Inspector需要熟悉。
控制两个按钮居中。




运行结果

ConstrainLayout
图形化的设计方式
约束的机制
两组件的相对约束
边缘约束Margin
组件的宽高
指导线
推导约束

图形化的设计方式
约束布局与以往的布局不一样的地方在于，可以直接通过拖动控件等进行布局，不需要敲代码，相当于图形化的界面编程。要删除组件，直接delete。要添加，直接拖动进容器。

约束的机制
直接把组件拖进容器放在居中位置，但可以发现运行时按钮位于左上角。在不添加约束的情况下，组件的位置默认为左上角。


想要实现居中，就要约束他的上下左右，如下图：

两组件的相对约束
注意：箭头被指向的那个对象为参考对象。箭头的方向不一样代表的含义不一样。

边缘约束Margin

组件的宽高
设置控件的宽高，有适应内容，自定义大小，matchparent（受到约束条件的影响）三种模式。

指导线
如果想要实现两个按钮相对于一条轴对称分布，就要用到指导线，下面演示垂直指导线。


其他功能：


推导约束
根据布局自动推导出你的约束

本人水平有限，如有不当之处，请谅解
我在网上看了一些关于约束布局（ConstraintLayout）的文章，说约束布局可以减少嵌套，使用更方便，所以就实战了一下，看看约束布局如何实现LinearLayout和RelativeLayout的常用功能。
在实战的过程中，对约束布局的属性有时不清楚怎么实现的，于是我发现了一个技巧，那就在拖动控件的界面，让控件实现约束布局，然后再看xml文件，就可以看到这个控件的约束布局怎么实现的，多了哪几个属性。
关于拖动的说明，请看郭霖大神的文章，https://blog.csdn.net/guolin_blog/article/details/53122387
我用的开发环境是Android Studio 2.3.3，新建工程后，默认的就是一个约束布局，约束布局的依赖也是默认添加的。

<?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，不做约束设置，会位于父控件左上角如下图：
<?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位于父控件右侧如下图：

<?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位于父控件底部如下图：

<?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>
水平居中如下图：

<?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>
垂直居中如下图：

<?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的位置。

<?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，如下图：

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

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

<?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>
水平方向充满屏幕如下图：
<?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>
垂直方向充满屏幕如下图：
<?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>

水平和垂直方向都充满屏幕如下图：
<?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的位置也是屏幕的左上角，如下图：

<?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的右侧，如下图：

<?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控件的底部，如下图：

<?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的底部，并且也水平居中，如下图：

<?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的底部，并且水平居中，如下图：

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