ConstraintLayout属性⼤全解析
自动挡会熄火吗Android 上⾯布局嵌套层级直接影响 UI 界⾯绘制的效率,如果 UI 嵌套层级太多会导致界⾯有,⽬前对于复杂的界⾯,使⽤ 也⽆法解决。所以 Android UI 团队就在Google IO 开发者⼤会上发布了⼀个新的布局控件 — ConstraintLayout。
ConstraintLayout 可以看做 RelativeLayout 的升级版。可以有更多的⼿段来控制⾥⾯的⼦ View 的布局,所以对于复杂的布局⽤ConstraintLayout ⼀个布局容器即可实现。
ConstraintLayout 是⼀个新的 Support 库,⽀持 Android 2.3 (API level 9) 以及以后的版本。在 Android Studio 中使⽤ConstraintLayout 之前需要先下载最新的 ConstraintLayout 库
⾸先使⽤它就必须在gradle中添加依赖:
dependencies {
compile 'com.straint:constraint-layout:1.0.0'
}
ConstraintLayout 布局属性详解
浮躁怎么办ConstraintLayout 中的 Constraint 为名词(翻译为:约束;限制;强制),所以顾名思义该布局在每个在⼦ View 上添加各种约束条件来控制每个⼦ View 所处的位置以及显⽰的尺⼨。ConstraintLayout 在 1.0 版本有如下 54 个布局属性:
1. android_maxHeight
2. android_maxWidth
3. android_minHeight
4. android_minWidth
5. android_orientation
6. layout_constraintBaline_creator
7. layout_constraintBaline_toBalineOf
8. layout_constraintBottom_creator
9. layout_constraintBottom_toBottomOf
0. layout_constraintBottom_toTopOf
1. layout_constraintDimensionRatio
2. layout_constraintEnd_toEndOf
3. layout_constraintEnd_toStartOf
4. layout_constraintGuide_begin
5. layout_constraintGuide_end
6. layout_constraintGuide_percent
7. layout_constraintHeight_default
8. layout_constraintHeight_max
9. layout_constraintHeight_min
0. layout_constraintHorizontal_bias
1. layout_constraintHorizontal_chainStyle
2. layout_constraintHorizontal_weight
3. layout_constraintLeft_creator
4. layout_constraintLeft_toLeftOf
5. layout_constraintLeft_toRightOf红烧小黄鱼
6. layout_constraintRight_creator
7. layout_constraintRight_toLeftOf
8. layout_constraintRight_toRightOf
9. layout_constraintStart_toEndOf
0. layout_constraintStart_toStartOf
1. layout_constraintTop_creator
2. layout_constraintTop_toBottomOf
3. layout_constraintTop_toTopOf
4. layout_constraintVertical_bias
5. layout_constraintVertical_chainStyle
6. layout_constraintVertical_weight
7. layout_constraintWidth_default
8. layout_constraintWidth_max
9. layout_constraintWidth_min
0. layout_editor_absoluteX
1. layout_editor_absoluteY
2. layout_goneMarginBottom
3. layout_goneMarginEnd
4. layout_goneMarginLeft
5. layout_goneMarginRight
6. layout_goneMarginStart
7. layout_goneMarginTop
8. layout_optimizationLevel
9. layout_marginStart
0. layout_marginEnd
1. layout_marginLeft
2. layout_marginTop
3. layout_marginRight
4. layout_marginBottom
不要被数量吓怕了,其实很简单。这 48 个属性⼀共可以分为 8 组,下⾯会按类型逐步分解。
⼀、ConstraintLayout 本⾝使⽤的属性
android_maxHeight
android_maxWidth
android_minHeight
个人计划
android_minWidth
这四个属性就是 Android ⾥⾯常见的控制 View 最⼤尺⼨和最⼩尺⼨的属性,可以设置到 ConstraintLayout 上来控制ConstraintLayout 的尺⼨信息。 这个⽐较简单就不做介绍了
⼆、Guideline 使⽤的属性
下⾯四个属性为应⽤到 上⾯的, Guideline 是⽤来辅助定位的⼀个不可见的元素,后⾯会详细介绍。
android_orientation 控制 Guideline 是横向的还是纵向的
layout_constraintGuide_begin 控制 Guideline 距离⽗容器开始的距离
灯笼的折法layout_constraintGuide_end 控制 Guideline 距离⽗容器末尾的距离
layout_constraintGuide_percent 控制 Guideline 在⽗容器中的位置为百分⽐
三、相对定位属性
下⾯ 13 个属性是⽤来控制⼦ View 相对位置的,这些属性和 RelativeLayout 的布局属性⾮常类似,⽤来控制⼦ View 的某⼀个属性相对于另外⼀个 View 或者 ⽗容器的位置。
layout_constraintBaline_toBalineOf
layout_constraintTop_toBottomOf
复方地龙片
layout_constraintTop_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toEndOf
layout_constraintEnd_toStartOf
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
上⾯这些属性命名⾮常有规律,例如前⾯的 layout 说明这是⼀个布局属性,中间的 constraintXXX 为对当前 View 上的某个属性做的约束,⽽最后的 toXXOf 为当前 View 约束的对象以及约束的⽅位。
实现如下:
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
所实现的效果是 ButtonB 左边位于 ButtonA 的右边。这样布局管理器就会把 ButtonB 的左边和 ButtonA 的右边对齐, A 的右边和 B 的左边位于同⼀个垂直位置。是不是⾮常简单!
注意,所相对的对象可以是临近的其他 ⼦ View 也可以是 ConstraintLayout ⾃⼰,如果要把 ButtonB 的左边 和 ⽗容器(ConstraintLayout)的左边对齐,则可以使⽤下⾯的⽅式(注意引⽤的控件为 parent ):绿野仙踪好句
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />
郑源的全部歌曲下图是
每个 View 的上下左右以及 baline ⽰意图:
四、Margin (View 的边距)
如果没有 Margin 则两个 View 会紧紧挨着,⽐如上⾯的 ButtonB 和 ButtonA 挨着。⽽很多情况下,设计的效果都要求 View 之间有间隔,这个时候就要使⽤ Margin 属性了。
下图为 Margin 的说明:
下⾯为控制 View margin 的属性:
– layout_marginStart
– layout_marginEnd
– layout_marginLeft
– layout_marginTop
– layout_marginRight
– layout_marginBottom
margin 值只能为⼤于等于0的数字,这些都是很常见的属性,不做详细介绍了。
⽽下⾯ 6 个是控制当前 View 所参考的 View 状态为 GONE 的时候的 margin 值:
– layout_goneMarginBottom
– layout_goneMarginEnd
– layout_goneMarginLeft
– layout_goneMarginRight
– layout_goneMarginStart
– layout_goneMarginTop
⽐如 ButtonB 左边相对于 ButtonA 右边对齐,ButtonA 左边相对于⽗容器左边对齐。如果 ButtonA 的状态为 GONE(不可见的),则ButtonB 就相对于⽗容器左边对齐了。如果有个需求是,当 ButtonA 不可见的时候, ButtonB 和⽗容器左边需要⼀个边距 16dp。 这个时候就需要使⽤上⾯的 layout_goneMarginLeft 或者 layout_goneMarginStart 属性了,如果设置了这个属性,当 ButtonB 所参考的ButtonA 可见的时候,这个边距属性不起作⽤;当 ButtonA 不可见(GONE)的时候,则这个边距就在 ButtonB 上⾯起作⽤了。
另外还有⼀个⽤途就是⽅便做 View 动画,可以先设置 ButtonA 为 GONE,同时可以保持 ButtonB 的布局位置不变。
五、居中和偏移(bias)
ConstraintLayout 处理看起来冲突的约束⽐较有意思。例如:
<straint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
<straint.ConstraintLayout/>
上⾯约束 Button 的左边和⽗容器左边对齐,右边和⽗容器右边对齐,除⾮⽗容器ConstraintLayout 和 Button 的宽度⼀样,才能满⾜这个条件,否则的话是⽆法满⾜这个条件的。这样情况下,ConstraintLayout 是如何处理的呢?
这种情况下,ConstraintLayout 就像使⽤两个作⽤⼒分别从左边和右边来拉住这个 Button,就像 Button 左右⼀边⼀个弹簧固定到⽗容器左右。最终的效果就是 Button 在⽗容器中⽔平居中。对于垂直⽅向上的约束是类似的规则。
居中布局⽰意图
Bias
像上⾯提到的这种对称相反布局约束会把 View 居中对齐,使⽤ Bias 可以改变两边的权重(类似于 LinearLayout 中的 weight 属性):
layout_constraintHorizontal_bias
layout_constraintVertical_bias
Bias ⽰意图:
如果没有设置 bias 值,则左右两边的取值为各占 50%,如果把左边的 bias 值修改为 30%(0.3),则左边空⽩的边距就⼩⼀点,⽽右边空⽩的距离就⼤⼀点,例如下⾯的代码就可以实现类似上图的效果:
<straint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</straint.ConstraintLayout>