ConstraintLayout(约束布局) part 1
Posted yh_android_blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ConstraintLayout(约束布局) part 1相关的知识，希望对你有一定的参考价值。
ConstraintLayout
和它的布局编辑器将会在不久之后推出. 这篇文章所讲述的关于约束布局的内容是基于
constraint-layout:1.0.0-alpha4
. 它的一些行为最终在正式推出时可能发生些许改变。
Google I/O 2016开发者大会宣布了一个新的安卓布局工具和支持库。 android Studio 将会装备一个基于约束的可视化编辑器, 和新的
ConstraintLayout
容器用以在运行时解释这些约束.
该文章旨在检查
ConstraintLayout
容器的结构和工作原理
. 未来，新的Android Studio 布局编辑器将会使它更加强大和灵活和易于管理该类布局. 通过更加深入的了解
ConstraintLayout
,我们将会更好的了解我们的开发工具。
ConstraintLayout
被分配到了一个未绑定的支持库(
support library
)中 , 因此在该文中你将会看到许多的xml属性以
app:
开头而不是
android:
让我们首先定义什么是约束(
constraint
)
约束类型(Types of Constraints)
从谷歌放出的相关包链接中可知，视图(view)上的约束是指 “描述一个在屏幕上的view与布局中其它元素之间的位置关系.” 更简单的说, 约束将view上的点(称之为锚点 anchor points )和目标( target )之间联系了起来 . target 可以是:-
同级视图上的相关锚点
-
父容器的相关锚点
-
一条基线(稍后介绍)
-
Top, Bottom, Left, and Right (or Start and End)
-
CenterX and CenterY
-
基线
layout_constraint[源锚点]_[目标锚点]="[目标ID]"
例如, 定义一个约束在
@id/button_cancel
的末尾和
@id/button_next
的开始之间 ，如下所示:
<Button
android:id="@+id/button_cancel"
… />
<Button
android:id="@+id/button_next"
app:layout_constraintStart_toEndOf="@+id/button_cancel"
… />
在可视化布局编辑器中,当你使用带箭头的线来描述两个view之间的约束时, 工具会自动的在xml文件中加入这条线. 这有一个更加完整的
ConstraintLayout
XML示例:
<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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
android:layout_marginBottom="16dp" />
<Button
android:id="@+id/button_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@+id/button_cancel"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
android:layout_marginBottom="16dp"/>
</android.support.constraint.ConstraintLayout>
在该示例中, 我们定义了一些约束使得 Button 视图在父容器中排成了一列。如前面所说的，它们使用了相似的文字描述 , 只不过目标的ID是
ConstraintLayout
.
约束语句经常通过
android:id
来引用targets。如果在约束加进来之前你的视图还没有定义id，Android Studio 会根据你在约束中声明的id为你创建一个
在上面的案例中，你或许注意到了 ConstraintLayout 支持页边距(margins). 默认的， 两个视图之间的约束将会被解释为一个接一个的挨在一起.如果你想让你的视图之间留有空隙，那么margins是必须设置的。
它似乎很像 RelativeLayout 真是如此吗?
偏向约束(Biasing Constraints)
当一个view的所有方向都受限于对应的轴时(例如，上下对应的是垂直轴，左右对应的是水平轴)，默认的它将会在两个目标的锚点之间留出空白， 下面的XML将一个按钮添加到了父容器的正中间：
<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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout" />
</android.support.constraint.ConstraintLayout>
这对我们来说是个很好的表现，但是
ConstraintLayout
采取了一个叫做刻度的概念，称之为偏向(
bias)
. Bias 支持用权重来描述约束中非平均分布的空隙，例如:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintVertical_bias="0.25" />
</android.support.constraint.ConstraintLayout>
现在，上面的按钮按照权重为25/75 分割了每一个轴的可用空白区域. 这更加像是
LinearLayout
或
GridLayout
.中的权重 ，但是比它们更好。因为view并没有填满可用的空白区域。
特别的, 当约束中么有出现bias时，bias 为
0.5
. 这就是视图默认居中的原因了。
你一定很期望开始看的
ConstraintLayout
扁平化视图层次的能力。它可以表现得像任何现有的布局管理器布局一样,或者说它们的所有表现!
基线定锚(Anchoring to Guidelines)
有时候，为了对齐view，我们需要在一个地方有专门的锚点, ConstraintLayout 提供了基线(guidelines). 一个 Guideline 实际上是View的子类 并且和其它子类一样添加. Guidelines 有一些特别的地方:
-
它们的测量宽度永远为0
-
它们的可见性为不可见(
View.GONE)
尽管它作为view存在于容器中，但他永远都不可见. 它的存在仅用于提供基线属性，为其它view定义水平或垂直的锚点. 请看一个示例:
<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:id="@+id/constraintLayout"
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"
android:orientation="vertical"
app:layout_constraintGuide_begin="72dp" />
<Button
android:id="@+id/button_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintVertical_bias="0.25" />
<Button
androidAndroid中的ConstraintLayout约束布局