Android布局优化之ConstraintLayout

ConstraintLayout是属于Android Studio 2.2的新特性，现在使用As构建默认的Activity，其对应的页面根布局已由RelativeLayout替换成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=".ViewTouchActivity">

  ....

</android.support.constraint.ConstraintLayout>

ConstraintLayout虽然非常适合使用可视化的方式来编写界面，但个人认为要想懂得其原理的话，还是建议使用XML的方式来进行编写。ConstraintLayout还有一个优点，它可以有效地解决布局嵌套过多的问题。平时编写界面，复杂的布局总会伴随着多层的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的，它有点类似于RelativeLayout，但远比RelativeLayout要更强大。

---

下面看看官网的介绍(官方文档)：

ConstraintLayout
public class ConstraintLayout 
extends ViewGroup 

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.support.constraint.ConstraintLayout
Known direct subclasses
MotionLayout

A ConstraintLayout is a ViewGroup 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.

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

Relative positioning
Margins
Centering positioning
Circular positioning
Virtual Helpers objects
Optimizer
Note that you cannot have a circular dependency in constraints.

Also see ConstraintLayout.LayoutParams for layout attributes

相对定位

图1 - 相对定位示例

一般概念是将某个控件的约定约束到任何其空间的另一侧。
例如，为了将按钮B定位在按钮A的右侧（图1）：

需要这样做：
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />


图2 - 相对定位约束

快速理解：被约束控件的上|下|左|右 约束到指定控件的上|下|左|右
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

它们都引用id另一个小部件，或者parent引用父容器，即ConstraintLayout：
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />

---

边距

图3 - 相对定位边距

如果设置了边距，则它们将应用于相应的约束（如果存在）（图3），将边距强制为目标和源边之间的空间。通常的布局边距属性可用于此效果：
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
请注意，保证金只能是正数或等于零，并且需要a Dimension。

连接到GONE小部件时的边距
当位置约束目标的可见性为View.GONE，您还可以使用以下属性指示要使用的不同边距值：
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

---

居中定位与偏压

居中定位

<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>

Bias


<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>


边界线

Guideline 布局时需要用到作为边界、基准线，页面上是不可见的。

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

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="vertical"/>

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

其他情况可参考
官方文档
ConstraintLayout 完全解析 快来优化你的布局