昨天更新了Android Studio,发现 现在xml的根布局已经默认是ConstraintLayout了,后知后觉的我去学习了一下官方文档,现在这里做个记录。
ConstraintLayout继承自ViewGroup,它允许你用一种灵活的方式去控制控件的位置及大小。
下面从一下七种约束来总结:
Relative Position
Relative Position是在约束布局中创建布局的基本构件之一,这些约束允许你将一个控件与另一个控件相关联,你可以在水平和垂直上约束一个控件。一般是将控件的给定的一面限制在任何其他控件的另一边。
下面演示将button2的左边约束在button1的右边:
xml文件如下:
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toRightOf="@+id/button1"/>
演示:button2的下面约束到button1的上面,button2的左边约束在button1的左边
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="38dp"
tools:layout_editor_absoluteY="230dp"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button1"
app:layout_constraintLeft_toLeftOf="@+id/button1"/>
可用约束列表如下:
- 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
Margins
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
Centering positioning and bias
<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_constraintRight_toRightOf="parent"/>
xml文件如下:
<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_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
看到这两个演示,就明白了居中怎么做。
现在来解释bias:
可以通过滑动右上角的滑块来调整偏差值,水平的滑块表示调整水平的bias,垂直的滑块表示调整垂直的bias
xml文件如下:
<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_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintVertical_bias="0.51"/>
Visibility behavior
ConstraintLayout对设置可见度为gone的控件有特定的处理,如果visibility为gone的控件被约束,即使为gone约束仍然存在,需要注意的是,当visibility为gone时的margin值
(A)比其约束的控件的margin值(B)大时,最终的margin值只有B的margin值,如果想要A和B的margin值都存在,可以给A的margin值指定为gone时的margin值,像这
样: layout_goneMarginLeft。
官方图如下:
Dimensions constraints
Minimum dimensions on ConstraintLayout
可以为约束布局本身设置最小大小:
- android:minWidth 设置布局的最小宽度
- android:minHeight 设置布局的最小高度
Widgets dimension constraints
上三张官方图:这是wrap_content,控件自己计算所需的大小
这是宽度为0dp,即"MATCH_CONSTRAINT",在ConstraintLayout中没有“Match_parent”
这是设了margin值的 "MATCH_CONSTRAINT"
Ratio
宽高的比率,app:layout_constraintDimensionRatio="1:2"
宽:高,上段代码的意思是将高度设为宽度的两倍。
要使用Ratio,必须要将一方的尺寸设为0dp("MATCH_CONSTRAINT")。
Chains
创建一个链
水平链最左边呢的控件是链的头部,垂直链最上边是链的头部
margin值在链中同样适用
链的风格:
app:layout_constraintHorizontal_chainStyle="spread"
该样式为默认样式,元素将展开
该样式为packed,会将所有控件打包在一起
app:layout_constraintHorizontal_chainStyle="packed"
该样式为spread_inside
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.3"
链条的各部分将会被打包在一起。控件的水平或垂直的偏置属性(bias)将会影响到打包元素的定位
链的默认行为是将元素均匀地分布在可用空间中(spread)。如果一个或多个元素使用MATCH_CONSTRAINT,那么它们将使用可用的空白空间。
layout_constraintHorizontal_weight和layout_constraintVertical_weight的属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如,在一个包含两个元素的链
中,使用MATCH_CONSTRAINT,第一个元素使用的权重为2,第二个元素的权重为1,第一个元素占用的空间将是它的两倍 将三个button的width设为0dp,chain head的
style为spread,layout_constraintHorizontal_weight的值赋为1,第二个button的layout_constraintHorizontal_weight=1,第三个 button的
layout_constraintHorizontal_weight=2。
如图所示:
官方图:
官方文档如下: