Android ConstraintLayout 约束布局

来源：互联网发布：常见男性英文名知乎编辑：程序博客网时间：2024/05/21 14:43

前言

Google I/O 2016 上发布了 ConstraintLayout。它的优点就是能减少布局的层级，用它完全替换RelativeLayout和LinearLayout应该都是可以的。

关于ConstraintLayout的一些Android Studio界面操作可以看《Constraint 代码实验室–带你一步步理解使用 ConstraintLayout》，其英文出处可以看Using ConstraintLayout to design your views

本文主要翻译官网参考文档，并给出一些示例；还有一些与constraintLayout相关的一些元素或属性的使用。

文中基于的约束布局的版本为：constraint-layout:1.1.0-beta1 (需要使用studio3.0，目前未有正式版。像文末的Barrier和Group暂无法在正式版环境中使用)

应用ConstraintLayout

简介

ConstraintLayout 继承自ViewGroup，它提供了一种更为灵活的方式来处理组件的位置和尺寸。
ConstraintLayout作为一个support library，它最小兼容android api level 9。

添加gradle依赖

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

创建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"></android.support.constraint.ConstraintLayout>

目前可使用的各种类型限制

Relative positioning
Margins
Centering positioning and bias
Visibility behavior
Dimension constraints
Chains
Virtual Helpers objects

Relative positioning 相对定位

在ConstraintLayout中，可以相对于一个其它的组件，而定位当前组件。约束一个组件的横轴和纵轴，相关的属性有：

横轴： Left, Right, Start and End sides
纵轴：Top, Bottom sides and text baseline

关于View的Left、Top、Right、Bottom的方向好理解。Start 和 End，是指当前语言的开始和结束方向：大多数语言都是从左向右的，而少数语言是从右向左书写的，比如阿拉伯语

例如，要使button B 在 button A的右边：
这里写图片描述

<Button android:id="@+id/buttonA" ... /><Button android:id="@+id/buttonB" ...     app:layout_constraintLeft_toRightOf="@+id/buttonA" />

如下表，列出了可用的相对位置约束属性：

available relative positioning constraints 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

这些属性的规则：layout_constraint[source]_to[target]Of，即source的某个方向，在target的某个方向；source表示当前组件，target即参考引用的组件

它们都可以参考一个其它组件的id，或 parent：

<Button android:id="@+id/buttonB" ...   app:layout_constraintLeft_toLeftOf="parent" />

Margins

这里写图片描述

普通的margin

可设置margin属性，列表如下：

margins android:layout_marginStart android:layout_marginEnd android:layout_marginLeft android:layout_marginTop android:layout_marginRight android:layout_marginBottom

注意：这里的margin值，只能是一个『正数、0 或 Dimension资源』

当margin一个gone组件

当位置约束的target的可见性为：View.GONE时，可以使用如下表示中的属性：

gone margins layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom

Centering positioning and bias

centering positioning

例如，

<Button android:id="@+id/button"    android:layout_height="100dp"    android:layout_width="110dp"    android:background="#ce7aef"    android:text="XXXX"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent"/>

上面的示例中，宽高都固定了一个数值(或是wrap_content)。要想约束button的左面在父级的左面，右面在父级的右面，这根本是可能的，所以系统将其解释成水平『居中』了，同理若加上app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 则纵向也就居中了

bias

可以在上面的基础上，加上偏移率(bias)：

app:layout_constraintHorizontal_bias="0.1"app:layout_constraintVertical_bias="0.8"

效果：

这里写图片描述

h-bias的取值范围[0.0, 1.0]，方向从左向右
v-bias的取值范围[0.0, 1.0]，方向从上向下

Visibility behavior

当一个约束的target的可见性为 View.Gone时，ConstraintLayout对其将有特殊的处理。

结合前面的『margins』，来谈谈对于android:layout_margin和layout_goneMargin的区别

android:layout_margin
> 当target的可见性不为View.Gone时，设置的数值，即为相对于target的数值；
> 当target的可见性为View.Gone时，设置的数值，即为相对于target的相邻组件的数值
layout_goneMargin
> 当target的可见性不为View.Gone时，设置的数值，看不出任何效果
> 当target的可见性为View.Gone时，设置的数值，即为相对于target的相邻组件的数值

注意：当target有其它约束属性时，会影响到source组件的定位

Dimension constraints

设置最小尺寸

当一个组件的宽或高设置为WRAP_CONTENT时，可以为它们设置一个最小尺寸：android:minWidth android:minHeight

组件尺寸约束

主要有三种方式：

设定一个特定值，如123dp或一个Dimension reference
WRAP_CONTENT，由组件自己估算它的尺寸
设置成0dp，也就相当于 match_constraint(不能在xml中写上match_constraint，可以在xml界面的design视图中操作)

match_constraint and ratio

当宽高至少有一项被设置为0dp时，可以使用属性 layout_constraintDimentionRatio来给定一个”宽对高”的比率。比率值是一个float值，可以写成0.5或1:2这样的形式。

例如，

<Button android:layout_width="wrap_content"    android:layout_height="0dp"    app:layout_constraintDimensionRatio="1:1" />

而，当宽高都设置为0dp(match_constraint)时，如，

<Button android:layout_width="0dp"    android:layout_height="0dp"    android:background="#aaaafa"    app:layout_constraintBottom_toBottomOf="parent"    app:layout_constraintTop_toTopOf="parent" />

这里加载了纵向的top和bottom的约束，相对于parent，那么高度最大即parent的高度；还需要加上ratio设置，才会显示，因为此时宽度并不知道：

app:layout_constraintDimensionRatio="W, 1:4"

这时，ratio的值必须以 H或W开头，且后面跟一个逗号及数值比。

当宽和高都为match_constraint即0dp时，约束方向为x轴时(宽为parent)：
w, 1:2 高比宽； h, 2:1 宽比高
约束方向为y轴时(高为parent):
w, 1:2 宽比高; h, 2:1 高比宽

Chains

chains 提供了在一个单轴（横轴或纵轴）中类似组的行为。另一轴可以独立进行约束。链（chains）中的相互两个组件之间，需要进行互相约束

Creating a chain

一个相互间双向连接的组件集合就认为是一个chain
这里写图片描述

Chain heads

chain head ，即水平chain的最左边的元素，或纵向chain的最顶部元素

Margins in chains

如果在连接中定义了margins，chain中元素的定位就会发生变化。在Chain Style为CHAIN_SPREAD时，margins设置，会扣除已分配的空间(注意，android_layoutMargin和goneMargin的表现是不同的)

Chain Style

如果在chain head元素上设置 layout_constraintHorizontal_chainStyle或 layout_constraintVertical_chainStyle ，chain的行为就会发生相应的变化。

styles：

CHAIN_SPREAD
对应属性值：spread。默认样式，元素铺展开
在当前样式下，如果一些组件设置了”match_constraint”，它们将会分割占用有效的空间
CHAIN_SPREAD_INSIDE
对应属性值：spread_inside。类似，spread。chain的两端元素不会被展开
CHAIN_PACKED
对应属性值：packed。将chain中元素包裹起来，当设置了横向或纵向的bias时，会影响其中的所有元素。

如下代码，只有style=packed时，才设置bias，其它style，去除bias设置，可查看不同的效果：

  <TextView    android:id="@+id/textView"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginStart="16dp"    android:layout_marginTop="16dp"    app:layout_constraintEnd_toStartOf="@+id/textView2"    app:layout_constraintHorizontal_chainStyle="packed"    app:layout_constraintStart_toStartOf="parent"    app:layout_constraintTop_toTopOf="parent"    app:layout_constraintHorizontal_bias="0.3"    tools:text="TextView" />  <TextView    android:id="@+id/textView2"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginTop="16dp"    app:layout_constraintEnd_toStartOf="@+id/textView3"    app:layout_constraintStart_toEndOf="@+id/textView"    app:layout_constraintTop_toTopOf="parent"    tools:layout_editor_absoluteX="141dp"    tools:text="TextView" />  <TextView    android:id="@+id/textView3"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginEnd="16dp"    android:layout_marginTop="16dp"    app:layout_constraintEnd_toEndOf="parent"    app:layout_constraintStart_toEndOf="@+id/textView2"    app:layout_constraintTop_toTopOf="parent"    tools:text="TextView" />

Weighted chains

类似LinearLayout中的android:layout_weight属性。使用layout_constraintHorizontal_weight或layout_constraintVertical_weight，当宽或高为MATCH_CONSTRAINT（即等于0dp）时，起作用。

如下例子描述了，两个view宽度充满全屏，高度各种一全屏的一半：

  <Button    android:id="@+id/bt_a"    android:layout_width="0dp"    android:layout_height="0dp"    android:background="#0f0"    android:text="A"    app:layout_constraintBottom_toTopOf="@id/bt_b"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent"    app:layout_constraintTop_toTopOf="parent"    app:layout_constraintVertical_weight="1"/>  <Button    android:id="@+id/bt_b"    android:layout_width="0dp"    android:layout_height="0dp"    android:background="#f00"    android:text="B"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent"    app:layout_constraintTop_toBottomOf="@id/bt_a"    app:layout_constraintBottom_toBottomOf="parent"    app:layout_constraintVertical_weight="1"/>

Chains 图示：

这里写图片描述

chains 中的相邻组件要注意互相约束

Virtual Helpers objects

虚拟帮助对象，目前最新版1.1.0-beta1有Guideline、Barrier、Group三种对象。既然是虚拟对象，那么它们就不占用实际的空间。

Guideline

Guideline，引导线。当组件约束，使用Guideline为target时，以帮助定位组件。

<android.support.constraint.Guideline    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:id="@+id/guideline"    android:orientation="horizontal"    app:layout_constraintGuide_end="100dp"/><Button    android:text="Button"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:id="@+id/button"    app:layout_constraintTop_toTopOf="@+id/guideline"    app:layout_constraintEnd_toEndOf="parent"/>

Guideline主要属性有android:orientation、layout_constraintGuide_begin、layout_constraintGuide_end、layout_constraintGuide_percent

当方向指定为横向时，可帮助组件进行纵向定位；反之，纵向时，可帮助组件进行横向定位

Barrier

Barrier，直译为障碍、屏障。在约束布局中，可以使用属性constraint_referenced_ids来引用多个带约束的组件，从而将它们看作一个整体。

 <Button    android:id="@+id/button1"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Button"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintTop_toTopOf="parent"/>  <Button    android:id="@+id/button2"    android:layout_width="wrap_content"    android:layout_height="200dp"    android:text="Button"    app:layout_constraintLeft_toRightOf="@id/button1"/>  <android.support.constraint.Barrier    android:id="@+id/barrier1"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    app:barrierDirection="bottom"    app:constraint_referenced_ids="button1, button2"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent"    app:layout_constraintTop_toBottomOf="@id/button2"/>  <TextView  android:id="@+id/bottom_textview"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="stone"  app:layout_constraintLeft_toLeftOf="parent"  app:layout_constraintRight_toRightOf="parent"  app:layout_constraintTop_toBottomOf="@id/barrier1"/>

上面的TextView会在button1和button2这个整体的下面。如果将app:constraint_referenced_ids="button1, button2"中的button2去掉，会发现，TextView会仅在button1的下面

Group

Group，分组。用法跟Barrier类似，也是使用属性constraint_referenced_ids引用多个约束组件，从而分成一组。
前面说Barrier是障碍物，即表示所引用的组件，不会消失，即使设置了android:visibility="gone"；而Group会消失

其它

TextView或Button这样的含有文本的组件。对其baseline添加约束，可以使用属性layout_constraintBaseline_toBaselineOf

阅读全文

0 0