Android ConstraintLayout示例教程
在本教程中，我们将讨论android ConstraintLayout的复杂性。
Google在2015年Google I/O会议上推出了android约束布局编辑器。
新的Layout Editor具有一组功能强大的工具，可让开发人员为其复杂的布局创建Flat-ui层次结构。
Android ConstraintLayout
要使用android ConstraintLayout，请确保您使用的是最新的Android Studio版本。
理想情况下，Android Studio 2.2及更高版本。
我们需要从SDK Manager下载用于ConstraintLayout的必要SDK工具。
创建一个新的空活动项目，并将以下依赖项添加到build.gradle文件中。
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
创建一个新的布局，并将根类设置为ConstraintLayout，如下图所示。
将旧布局转换为ConstraintLayout。
打开相应布局的设计窗格，右键单击根组件，然后选择相关选项，如下图所示。
Android约束布局概述
Android ConstraintLayout用于通过为每个子视图/小部件相对于当前其他视图分配约束来定义布局。
ConstraintLayout与RelativeLayout相似，但是功能更多。
ConstraintLayout的目的是通过使用平坦灵活的设计删除嵌套视图来提高应用程序的性能。
ConstraintLayout内部的视图在每侧都有用于分配约束的手柄(或者锚点)。
让我们在布局上拖放一个TextView并为其分配约束。
上面的TextView具有三种类型的句柄：
Resize handle – It's present on the four corners and is used to resize the view, but keeping its constraints intact.
侧把手–这是位于两侧中央的圆形把手。
用于设置视图的顶部，左侧，底部和右侧约束。
Baseline handle – It's used to align the baseline with another textview in the layout.
让我们在TextView上分配约束，并查看其xml代码。
注意右侧的"属性"检查器窗格：
它显示为视图的每一侧设置的边距。
它还允许通过在以下模式之间切换来更改视图的大小：
包装内容–包装视图以填充其内容。
任意大小–与匹配父项相似。
固定大小–这使我们可以设置恒定的宽度和高度。
以上布局的xml代码如下所示：
sample.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
</android.support.constraint.ConstraintLayout>
- app：layout_constraintLeft_toLeftOf =" parent""– ConstraintLeft是视图左侧的锚点。
toLeftOf表示将视图与指定视图的左侧对齐(在这种情况下为"父")。
在视图上设置绝对位置时，使用的xml属性为
tools:layout_editor_absoluteY="48dp" tools:layout_editor_absoluteX="40dp"
让我们添加另一个TextView并对齐其基线。
以上布局的xml代码为：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
app:layout_constraintBaseline_toBaselineOf="@+id/textView"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
app:layout_constraintRight_toLeftOf="@+id/textView"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
</android.support.constraint.ConstraintLayout>
还有另外两个工具自动连接和推理可用于自动创建约束。
- 自动连接–可以通过单击启用此功能：
顾名思义，自动连接会在两个相邻视图之间自动创建约束 - 推论–通过单击启用此功能：
推理引擎会在布局中的所有元素之间创建约束。
推理引擎尝试根据各种因素(例如小部件的位置及其大小)找到并创建最佳连接。
下面给出了自动连接布局的演示：
如您在上面的gif中看到的，约束是自动设置动画的。
注意属性窗格中的水平和垂直滑块。
它们分别称为水平和垂直偏置。
它们使我们可以使用偏差值沿水平或者垂直轴定位视图，该值将相对于其受约束的位置。
上面的演示的xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://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"
app:srcCompat="@mipmap/ic_launcher"
android:id="@+id/imageView7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.58000004"
app:layout_constraintHorizontal_bias="0.47"
</android.support.constraint.ConstraintLayout>
下面给出了启用推理的布局的演示：
上述gif的xml代码为：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView22"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
android:layout_marginBottom="59dp"
app:layout_constraintLeft_toLeftOf="parent"
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button2"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
android:layout_marginEnd="31dp"
app:layout_constraintRight_toRightOf="@+id/textView22"
android:layout_marginTop="178dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="31dp"
</android.support.constraint.ConstraintLayout>
tools：layout_constraintTop_creator =" 1"：创建者属性可跟踪谁创建了约束，特别是如果它们是由推理引擎创建的，则将它们分配为1。
删除约束
要删除单个约束，请将鼠标悬停在圆形手柄上，然后单击使其变为红色。
