看完了动图,我们再来看看 XML
布局中的变化:
因为我们的目的是想让这个 Button
居中,但是它却默认给我们添加了 margin
,这个显然是多余的。
如果不想每次添加约束后都在这条边的约束上添加 margin
,我们可以在上面的工具栏中进行设置:
抛去 margin
相关的属性,那么约束父控件的相关属性就是如下这些了:
app:layout_constraintTop_toTopOf=“parent”
app:layout_constraintLeft_toLeftOf=“parent”
app:layout_constraintRight_toRightOf=“parent”
app:layout_constraintBottom_toBottomOf=“parent”
在上面的图中我们已经看到了,每个控件的上下左右都有一个圆圈,用于添加约束的。
那么这些属性的 constraintXXX
就是指定的当前控件的约束位置的,而 toXXX
就是目标约束位置。
这个位置可以是上面的例子一样是 parent
(也就是父控件),也可以是另一个控件。
接下来我们再来看看对于其他控件的约束。
再拖一个 Buttton
进入蓝图中,然后给这个 Button
添加约束:
XML
布局:
添加完约束了,如果要删除指定的单个约束的话,单击变红的圆圈即可:
或者是上面提到了,删除指定控件的所有约束。
或者是工具栏中的,删除页面所有的约束:
基线约束
基线约束的作用就是将视图的文本基线与另一个视图的文本基线对齐:
添加完成后,在 XML
布局中,B 控件就会多出这么一个属性:
app:layout_constraintBaseline_toBaselineOf=“@+id/a”
该属性就是用于基线对齐的。
Chains
Chains
(链)是一种特定的约束,一个链包含了多个视图,它允许链中的视图共享空间,并控制可用空间在它们之间如何分配。该效果与 LinearLayout
的 Weiget
类似,但是链的作用远远超过它。
我们要是想创建一个链,那么首先就需要创建多个视图控件,然后再选择是创建「水平链」还是「垂直链」。 让我们从三个视图中创建一个「水平链」:
「垂直链」:
以「水平链」为例,我们来看看它们的样子:
可以发现,两侧控件的约束样子和前面约束的样子是一样的,我把它称之为「单约束」,也就是两侧控件只是单方面的约束了对方(这里是父控件)。
而中间的控件,两侧的约束则是链条的样子,这表示它约束了左右侧控件,而左右侧控件同样也约束了它:「互相约束」。
在 XML
布局中,是通过如下属性实现的:
我们刚刚创建好了一条链,此时我们可以设置 Cycle Chain Mode
(链式模式)来告诉 Chains
:“你应该怎样去填充剩余的空间”。
在「蓝图」中,设置的方式是点击链条的小图标:
在「布局」中,设置的属性是:
layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle
分别对应着「水平链」和「垂直链」。
有三种可选的参数:
- spread:将可用空间以均匀分布的方式将视图放置在链中(默认模式):
- spread_inside:将链中最外面的视图对齐到外边缘,然后在可用空间内均匀的放置链中的其他视图:
- packed:将链中的视图紧紧的放在一起(可以提供边距让其分开),然后让其居中在可用空间内:
除了上面说的之外,Chains
还能对链中单独的视图控件设置 Weiget
。因为目前并不支持在编辑器当中设置 Weiget
,所以我们只能在布局中进行设置了,设置的属性是:
layout_constraintHorizontal_weight
layout_constraintVertical_weight
我们现在将第一个 Button
填充完剩余的空间,在该 Buttton
上设置如下属性:
android:layout_width=“0dp”
app:layout_constraintHorizontal_weight=“1”
使用和 LinearLayout
的 Weiget
一致,很好理解。
Properties
基本的添加、删除约束我们已经掌握了,那么现在再来将目光转向右侧的 Properties
区域。
该区域分为了上下两个部分,下部分就是选中控件的一些属性什么的,很好理解。
重点来看看上半部分,该部分被称为:Inspector
区域。
首先来看这些数字,很明显就是当前控件的 margin
值,我们可以直接在上面进行修改:
还有就是左边和下边的两个轴,我把它称之为纵横轴。作用是用于确定控件位置的:
根据上图可以看到,因为该控件同时添加了水平和垂直约束,所以两条轴都可以进行操作。 轴上面的数字是比例,对应的属性如下:
app:layout_constraintVertical_bias=“0.5”
app:layout_constraintHorizontal_bias=“0.5”
再来看看中心区域:
四条边的原点就是添加的约束,点击的作用是删除该约束。
重要的是中心的 >>>
,这个代表了当前控件的宽高计算方式。点击是可以切换的,一共有三种:
- :这个代表的就是
wrap_content
,不用过多解释了。 - :这个就是指定宽高的大小。
- :这个代表的是:
Match Constraints
(有点类似于match_parent
),就给强翻成约束匹配吧… 这个是ConstraintLayout
特有的,它会尽可能扩展以满足各方的约束(在考虑视图边界之后)。但是,可以使用以下属性和值修改该行为(只有在将视图宽度设置为与约束匹配时,这些属性才会生效): - layout_constraintWidth_default:
- spread:这是默认的行为,它会尽可能的扩展视图来满足约束。
- wrap:与上面所说的
wrap_content
不同的是,虽然都是适应内容,但仍然允许视图比约束要求的视图更小。 - layout_constraintWidth_min:指定视图的最小宽度(dp)。
- layout_constraintWidth_max:指定视图的最大宽度(dp)。
下面来几个例子,演示下约束匹配的效果,比如说,要让一个 Button
宽度填充满,仅需要将宽度设置为 0dp
即可:
android:layout_width=“0dp”
如果是两个 Button
:
效果:
设置宽高比例
当宽高至少有一项设置为 0dp 时(也就是 Match Constraints
),那么我们就可以为该视图设置宽高比例。设置的属性是:
layout_constraintDimensionRatio
如:
参数是一个浮点值:“宽度:高度”,在该例子中,表示的宽高比是 3:1,也就是高度是宽度的三分之一。
当我们的宽高都设置为 0dp 时,如:
此时,该视图是不会显示的,虽然我们加了 left
和 rigth
约束到父控件,让它知道了它的宽度就是父控件的高度,但是此时它还并不知道自己有多高。
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长或者是报班学习,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
链图片转存中…(img-WMnCXul4-1714954933291)]
[外链图片转存中…(img-lAIHV8Oo-1714954933292)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!