Android-ConstraintLayout(约束布局)-基

约束布局也是年前才开始关注->谷歌在2016年的IO大会上推出的一种新的布局方式—-ConstraintLayout，这局是一种约束型的布局方式。在设置和介绍上类似IOS的自动布局。

先附上github的地址和文档地址(后面再慢慢介绍-是该习惯看官方的了):

github传送门 doc传送门 网上很多博客文章基本都是基于doc上的介绍翻译过来的，有的比较深入，还专门写了文章，关于源码的解析。那个后面我们可以深入了解下渲染机制啥的!

我们这里也是基于 doc传送门 来做一些说明和演示，后面项目打算利用这个优化现有项目的布局，之前有的布局感觉太复杂，效率相对有点低 - 另外后面我做优化的时候回把两种渲染方式分别做性能对比，这样我觉得更有意思，至于源码啥的慢慢来...

1.先看下继承关系和基本介绍

ConstraintLayout

public class ConstraintLayout
extends [ViewGroup](https://link.zhihu.com/?target=http%3A//developer.android.google.cn/reference/android/view/ViewGroup.html)

java.lang.Object

↳android.view.View

↳android.view.ViewGroup

↳android.support.constraint.ConstraintLayout

A ConstraintLayout is a [ViewGroup](https://link.zhihu.com/?target=http%3A//developer.android.google.cn/reference/android/view/ViewGroup.html) which allows you to position and size widgets in a flexible way.

Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread). As such, we are planning on enriching its API and capabilities over time. This documentation will reflect those changes.

继承ViewGroup，然后继承View，最后Object。关于View与ViewGroup有什么区别？(后面专门研究下).

解释下上面的意思：约束布局允许你以一种灵活的方式去定位和调整你的ViewGroup控件。你可以在api 9及以上使用，我们正在计划加强和丰富它的api。这些文档说明将会翻译这些修改 ---- 翻译太烂，懂意思就行!

2.属性大类

There are currently various types of constraints that you can use:

• Relative positioning --- 相对定位
• Margins --- 间距
• Centering positioning --- 中心定位
• Circular positioning --- 圆形定位(这个有意思，做环形按钮应该很棒)
• Visibility behavior --- 可见性行为
• Dimension constraints --- 尺寸约束
• 下面这个三个还不太懂从字面就蒙圈,后面具体试验后做说明
• Chains --- 链
• Virtual Helpers objects --- 虚拟助手对象
• Optimizer --- 优化器

2.1 相对定位走起

Relative positioning is one of the basic building block of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to another one. You can constrain a widget on the horizontal and vertical axis:

• Horizontal Axis: left, right, start and end sides
• Vertical Axis: top, bottom sides and text baseline

The general concept is to constrain a given side of a widget to another side of any other widget.

相对定位在约束布局里面是最基本的创建块布局的其中一种。这些约束允许你定位一个控件相对另外一个的位置。你可以在水平或者垂直方向上做约束。

水平方向上，你可以使用left, right ,start 和end sides属性。

垂直方向上，你可以使用top，bottom和baseline。

(其实做个布局大概就知道，left， top， right， bottom等这些东西大概是什么概念。so，后面具体实践就更清楚了...)

Here is the list of available constraints (Fig. 2):

• layout_constraintLeft_toLeftOf --左侧靠xxx控件的左侧
• layout_constraintLeft_toRightOf --左侧靠xxx控件的右侧
• layout_constraintRight_toLeftOf --右侧靠xxx控件的左侧
• layout_constraintRight_toRightOf --右侧靠xxx控件的右侧
• layout_constraintTop_toTopOf --顶部靠xxx控件的顶部
• layout_constraintTop_toBottomOf --顶部靠xxx控件的下部
• layout_constraintBottom_toTopOf --底部靠xxx控件的顶部
• layout_constraintBottom_toBottomOf --底部靠xxx控件的底部
• layout_constraintBaseline_toBaselineOf --这个地方我们下面会专门分析下，灰常有意思(网络有些都是直接翻译官方，没怎么解释这个东东)
• 下面这个几种单独使用上效果和上面的有几个很像，具体有什么区别呢？按照我了解的以前relativelayout的layout_toRightOf和layout_toEndOf的区别，说的是新版的是toEndOf，官方建议使用toEndOf。难道是为了兼容旧版的才搞了两套？ 后面有发现再专门补上吧....
• layout_constraintStart_toEndOf --起始边和终止边对齐
• layout_constraintStart_toStartOf -- 起始边和起始边对齐
• layout_constraintEnd_toStartOf --终止边和起始边对齐
• layout_constraintEnd_toEndOf --终止边和终止边对齐
• 父布局记得都是android.support.constraint.ConstraintLayout哟哟哟

2.1.1 一个一个来，也有可能一次多个一起实践，看下左左右右，上上下下的解析图

image

画了画图，应该能看懂...嗯。

    <?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=".Main2Activity">

    <Button
        android:id="@+id/testBtn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck button1"
        android:textSize="15sp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:id="@+id/testBtn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck button2"
        android:textSize="15sp"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/testBtn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck no button3"
        android:textSize="15sp"
        app:layout_constraintLeft_toRightOf="parent"/>

    <Button
        android:id="@+id/testBtn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck button4"
        android:textSize="15sp"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/testBtn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck button5"
        android:textSize="15sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

这几个比较简单，自己尝试下就行了。和以前RealaoutLayout的alignparent相关属性差不多。

image

这几种组合基本能够满足控件之间简单的相对位置的布局了。有些像left靠right的布局有时候也是有需求的，比如你开始就是让它再屏幕外面，之后你有可能你会做一个动画平移过来，然后回去，灵活运用就好了！

最后我们说下layout_constraintBaseline_toBaselineOf

首先是基本的布局使用，button6再button1的右下角。然后我们有定义了一个与button6同样高度的按钮button7，靠button6的右边。

image

    <?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=".Main2Activity">

    <Button
        android:id="@+id/testBtn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuck button1"
        android:textSize="15sp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:id="@+id/testBtn6"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:text="fuck button6"
        android:textSize="15sp"
        app:layout_constraintLeft_toRightOf="@id/testBtn1"
        app:layout_constraintTop_toBottomOf="@id/testBtn1"/>

    <Button
        android:id="@+id/testBtn7"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:text="fuck button7"
        android:textSize="15sp"
        app:layout_constraintLeft_toRightOf="@id/testBtn6"/>

</android.support.constraint.ConstraintLayout>

然后我们加上

image

你会发现：

image

是不是还可以。原来如果要做这种，可能需要一个水平布局，或者说两个控件都具体顶部同样的高度。至少我看来用这种约束布局会简化一些...

Not End...布局就像画图，图能画出来布局应该可以做，本质上UI显示就是渲染绘画的过程....后面我们继续margin, center等等...下篇又要继续注解相关的深入了...哼!