ConstraintLayout, 看完一篇真的就够了么?,Android 研发岗面试复盘总结
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
GONE Margin
有时候,会有这种需求,在 World 可见的时候,GitCode 与 World 的左边距是 0,当 World 不见时,GitCode 的左边距是某个特定的值。
World 可见的效果,GitCode 的左边距为 0

World 不可见的效果,GitCode 的左边距为 10

为此,ConstraintLayout 提供了特殊的 goneMargin 属性,在目标 View 隐藏时,属性生效。有如下属性:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
Centering positioning and bias
在 RelativeLayout 居中,通常是使用以下三个属性:
layout_centerInParent 中间居中
layout_centerHorizontal 水平居中
layout_centerVertical 垂直居中
而在 ConstraintLayout 居中则采用左右上下边来约束居中。
水平居中 layout_constraintLeft_toLeftOf & layout_constraintRight_toRightOf
垂直居中 layout_constraintTop_toTopOf & layout_constraintBottom_toBottomOf
中间居中 水平居中 & 垂直居中 举个栗子:
<TextView...android:text="Hello"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/>
效果图:

那,要是想把 Hello 往左挪一点,怎么办?
那很简单,使用 margin 呀。不不不,这里要介绍的是另外两个属性,与 LinearLayout 的权重类似(当然,ConstraintLayout 也可以使用权重属性),但简单很多。
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移
两个属性的取值范围在 0-1。在水平偏移中,0 表示最左,1 表示最右;在垂直偏移,0 表示最上,1 表示最下;0.5 表示中间。
<TextView...android:text="Hello"app:layout_constraintHorizontal_bias="0.8"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/>
效果:

2.3 圆形定位(Added in 1.1)
圆形定位指的是 View 的中心点相对于另外 View 中心点的位置。贴张官网图。

涉及三个属性:
layout_constraintCircle : 另外一个 view 的 id,上图的 A view
layout_constraintCircleRadius : 半径,上图的 radius
layout_constraintCircleAngle : 角度,上图 angle,范围为 0-360 根据上面上个属性就可以确定 B View 的位置。从图也可以知道,角度以时间 12 点为 0,顺时针方式。
吃个栗子:
<TextView...android:text="Hello"android:id
《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
="@+id/tvHello"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/>
<TextViewandroid:text="World"app:layout_constraintCircle="@id/tvHello"app:layout_constraintCircleRadius="180dp"app:layout_constraintCircleAngle="135"/>
效果图:Hello 中间居中,World 135 角度

2.4 尺寸约束
ConstraintLayout 最大最小尺寸
ConstraintLayout 的宽高设为WRAP_CONTENT
时,可以通过以下熟悉设置其最大最小尺寸。
android:minWidth 最小宽度
android:minHeight 最小高度
android:maxWidth 最大宽度
android:maxHeight 最大高度
ConstraintLayout 中的控件尺寸约束
在 ConstraintLayout 中控件可以三种方式来设置其尺寸约束。
指定具体的值。如 123dp
使用值
WRAP_CONTENT
,内容自适配。设为 0dp,即
MATCH_CONSTRAINT
,扩充可用空间。
第一二种跟平常使用没什么区别。第三种会根据约束情况重新计算控件的大小。 在 ConstraintLayout 中,不推荐使用MATCH_PARENT
,而是推荐使用MATCH_CONSTRAINT
(0dp),它们的行为是类似的。
吃个栗子吧:
<TextViewandroid:text="Hello"android:id="@+id/tvHello"android:gravity="center"android:padding="20dp"app:layout_constraintTop_toTopOf="parent"android:textColor="@color/colorWhite"android:background="@color/colorPrimary"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"android:layout_width="0dp"android:layout_marginRight="20dp"android:layout_height="wrap_content"/>
设置layout_width
为 0dp;layout_height
为wrap_content
;layout_marginRight
为 20dp,与 parent 左右对齐。
效果图:

在 1.1 之前的版本,控件尺寸设为WRAP_CONTENT
,控件默认是由组件文本大小控制,其他约束是不生效的。可以通过以下属性设置是否生效。
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
控件设为MATCH_CONSTRAINT
时,控件的大小会扩展所有可用空间,在 1.1 版本后,可以通过以下属性改变控件的行为。
layout_constraintWidth_min 最小宽度
layout_constraintHeight_min 最小高度
layout_constraintWidth_max 最大宽度
layout_constraintHeight_max 最大高度
layout_constraintWidth_percent 宽度占 parent 的百分比
layout_constraintHeight_percent 高度占 parent 的百分比
吃个栗子:
<TextViewandroid:text="Hello"android:id="@+id/tvHello"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintWidth_percent="0.5"app:layout_constraintWidth_default="percent"android:layout_width="0dp"android:layout_height="wrap_content"/>
将android:layout_width
设为MATCH_CONSTRAINT
,即 0dp;将app:layout_constraintWidth_default
设为percent
;将app:layout_constraintWidth_percent
设为 0.5,表示占 parent 的 50%,取值范围是 0-1。
效果图:

比例约束
控件的宽高比,要求是宽或高至少一个设为 0dp,然后设置属性layout_constraintDimensionRatio
即可。
<TextViewandroid:text="Hello"app:layout_constraintDimensionRatio="3:1"android:layout_width="0dp"android:layout_height="100dp"/>
这里设置宽高比为 3:1,高度为 100dp,那么宽度将为 300dp。

也可以在比例前加W
,H
表示是宽高比还是高宽比。如下面表示高宽比。
<Button android:layout_width="0dp" android:layout_height="0dp"app:layout_constraintDimensionRatio="H,16:9"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintTop_toTopOf="parent"/>
2.5 链
链在水平或者垂直方向提供一组类似行为。如图所示可以理解为横向链。这里需要了解一点,A 与 parent 的左边缘约束,B 与 parent 的右边边缘约束,A 右边和 B 左边之间相互约束,才能使用一条链。多个元素之间也是如此,最左最右与 parent 约束,元素之间边相互约束。不然下面的链式永远无法生效。

横向链最左边第一个控件,垂直链最顶边第一个控件称为链头,可以通过下面两个属性链头统一定制链的样式。
layout_constraintHorizontal_chainStyle 水平方向链式
layout_constraintVertical_chainStyle 垂直方向链式
它两的值默认可以是
CHAIN_SPREAD 展开样式(默认)
Weighted chain 在 CHAIN_SPREAD 样式,部分控件设置了 MATCH_CONSTRAINT,那他们将扩展可用空间。
CHAIN_SPREAD_INSIDE 展开样式,但两端不展开
CHAIN_PACKED 抱团(打包)样式,控件抱团一起。通过偏移 bias,可以改变 packed 元素的位置。

从实际开发,这么应用还是挺广泛的。 提供份代码参考,避免走冤枉路:
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent">
<TextViewandroid:text="Hello"android:id="@+id/tvHello"android:gravity="center"android:padding="20dp"app:layout_constraintHorizontal_chainStyle="spread"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/tvWorld"android:textColor="@color/colorWhite"android:background="@color/colorPrimaryDark"android:layout_width="wrap_content"android:layout_height="wrap_content"/><TextViewandroid:text="World"android:gravity="center"android:padding="20dp"android:id="@+id/tvWorld"app:layout_constraintLeft_toRightOf="@id/tvHello"app:layout_constraintRight_toRightOf="parent"android:textColor="@color/colorWhite"android:background="@color/colorPrimary"android:layout_width="wrap_content"android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
效果:

在链中,剩余空余空间默认平均给各元素,但有时可以通过权重属性layout_constraintVertical_weight
来指定分配空间的大小。
1.1 之后,在链中使用边距时,边距是相加的,也就说,假设 Hello 的右边距为 5,World 的左边距为 20,那么它们之间的边距就是 25。在链式,边距先从剩余空间减去的,然后再用剩余的空间在元素之间进行定位。
2.6 优化器
在 1.1 之后,公开了优化器,通过在app:layout_optimizationLevel
来决定控件在哪方面进行优化。
none : 不进行优化
standard : 默认方式, 仅仅优化 direct 和 barrier 约束
direct : 优化 direct 约束
barrier : 优化 barrier 约束
chain : 优化链约束 (实验性质)
dimensions : 优化尺寸 (实验性质), 减少测量次数
3.工具类
3.1 Guideline(参考线)
参考线实际上不会在界面进行显示,只是方便在 ConstraintLayout 布局 view 时候做一个参考。
通过设置 Guideline 的属性orientation
来表示是水平方向还是垂直方向的参考线,对应值为vertical
和horizontal
。可以通过三种方式来定位 Guideline 位置。
layout_constraintGuide_begin 从左边或顶部指定具体的距离
layout_constraintGuide_end 从右边或底部指定具体的距离
layout_constraintGuide_percent 从宽度或高度的百分比来指定具体距离
丢个栗子:
<android.support.constraint.ConstraintLayoutxmlns: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.Guidelineandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/guideline"android:orientation="vertical"app:layout_constraintGuide_begin="10dp"/>
<Button android:text="Button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/button"app:layout_constraintLeft_toLeftOf="@+id/guideline"android:layout_marginTop="16dp"app:layout_constraintTop_toTopOf="parent"/>
<Button android:text="Button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/button2"app:layout_constraintLeft_toLeftOf="@+id/guideline"android:layout_marginTop="16dp"app:layout_constraintTop_toBottomOf="@id/button"/></android.support.constraint.ConstraintLayout>
Guideline 设置为垂直参考线,距离开始的位置为 10dp。如下图所示,实际中需要把鼠标移到 button 才会显示出来哦。

3.2 Barrier(栅栏)
Barrier 有点类似 Guideline,但 Barrier 会根据所有引用的控件尺寸的变化重新定位。例如经典的登录界面,右边的 EditText 总是希望与左右所有 TextView 的最长边缘靠齐。 如果两个 TextView 其中一个变得更长,EditText 的位置都会跟这变化,这比使用 RelativeLayout 灵活很多。

代码:
<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent">
<android.support.constraint.Barrierandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="right"android:id="@+id/barrier"app:constraint_referenced_ids="tvPhone,tvPassword"/>
<TextView android:layout_width="wrap_content"android:text="手机号码"android:id="@+id/tvPhone"android:gravity="center_vertical|left"android:padding="10dp"android:layout_height="50dp"/>
<TextView android:layout_width="wrap_content"android:text="密码"android:padding="10dp"android:gravity="center_vertical|left"android:id="@+id/tvPassword"app:layout_constraintTop_toBottomOf="@id/tvPhone"android:layout_height="wrap_content"/>
<EditText android:layout_width="wrap_content"android:hint="输入手机号码"android:id="@+id/etPassword"app:layout_constraintLeft_toLeftOf="@id/barrier"android:layout_height="wrap_content"/>
<EditText android:layout_width="wrap_content"android:hint="输入密码"app:layout_constraintTop_toBottomOf="@id/etPassword"app:layout_constraintLeft_toLeftOf="@id/barrier"android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
app:barrierDirection
所引用控件对齐的位置,可设置的值有:bottom、end、left、right、start、top.constraint_referenced_ids
为所引用的控件,例如这里的 tvPhone,tvPasswrod。
3.3 Group(组)
用来控制一组 view 的可见性,如果 view 被多个 Group 控制,则以最后的 Group 定义的可见性为主。
吃个香喷喷栗子吧: Group 默认可见时,是这样的。

设置 Group 的visible
属性为 gone.
<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent">
<android.support.constraint.Groupandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/group"
尾声
面试成功其实都是必然发生的事情,因为在此之前我做足了充分的准备工作,不单单是纯粹的刷题,更多的还会去刷一些 Android 核心架构进阶知识点,比如:JVM、高并发、多线程、缓存、热修复设计、插件化框架解读、组件化框架设计、图片加载框架、网络、设计模式、设计思想与代码质量优化、程序性能优化、开发效率优化、设计模式、负载均衡、算法、数据结构、高级 UI 晋升、Framework 内核解析、Android 组件内核等。

不仅有学习文档,视频+笔记提高学习效率,还能稳固你的知识,形成良好的系统的知识体系。这里,笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家梳理了多年的架构经验,筹备近 6 个月最新录制的,相信这份视频能给你带来不一样的启发、收获。

Android 进阶学习资料库
一共十个专题,包括了 Android 进阶所有学习资料,Android 进阶视频,Flutter,java 基础,kotlin,NDK 模块,计算机网络,数据结构与算法,微信小程序,面试题解析,framework 源码!

大厂面试真题
PS:之前因为秋招收集的二十套一二线互联网公司 Android 面试真题 (含 BAT、小米、华为、美团、滴滴)和我自己整理 Android 复习笔记(包含 Android 基础知识点、Android 扩展知识点、Android 源码解析、设计模式汇总、Gradle 知识点、常见算法题汇总。)

《2017-2021 字节跳动 Android 面试历年真题解析》

评论