2024年最新Android ConstraintLayout 约束布局 1(1)，android简易计算器界面

最后

有任何问题，欢迎广大网友一起来交流，分享高阶Android学习视频资料和面试资料包~

偷偷说一句：群里高手如云，欢迎大家加群和大佬们一起交流讨论啊！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

3.1.2 wrap模式

app:layout_constraintWidth_default="wrap"：自适应大小，但不超过约束条件下的最大尺寸。

还是上面的例子，如果是传统的WRAP_CONTENT，当内容较大时，会直接超过约束条件，如图：

当指定为wrap模式，则会保留约束条件：

…
android:layout_width=“0dp”
app:layout_constraintWidth_default=“wrap”
…

另外，针对传统的WRAP_CONTENT模式，约束布局有额外的属性，使得它也能保留约束条件：app:layout_constrainedWidth="true"此时与wrap模式一样的效果。

3.1.3 percent模式

app:layout_constraintWidth_default="percent"：以父布局的百分比作为自身的大小，即百分比布局。（利用次特性可解决部分常见适配）,通过app:layout_constraintWidth_percent设置比例大小，0f-1.0f

…
android:layout_width=“0dp”
app:layout_constraintWidth_default=“percent”
app:layout_constraintWidth_percent=“0.8”
…

3.1.4 指定宽高比（ratio）

app:layout_constraintDimensionRatio:约束布局还可以指定view自身宽高比例。

其值可以为“width:height”或者“width/height”，如宽是高的2倍：app:layout_constraintDimensionRatio="2:1"或app:layout_constraintDimensionRatio="2"

要使其生效的话，必须将对应的宽或高设置为0dp。例如宽为0dp，高为10dp，app:layout_constraintDimensionRatio=2:1之后，宽最终为20dp；

如果宽高两项都为0dp的话，则最终尺寸会设置为符合约束的最大尺寸，同时保持设置的比例。这样有时结果不是我们所想要的，我们可以指定宽或高（H,W）哪一边约束条件来确定尺寸，哪一边通过比例来确定尺寸；

如app:layout_constraintDimensionRatio="W,2:1"则指明宽按照比例来计算最终尺寸，而高则根据约束条件；app:layout_constraintDimensionRatio="H,2:1"则相反。可自行体验下。

3.1.5 最大和最小值（max/min）

这个就和属性名称一样的意思啦：

1. app:layout_constraintHeight_min
2. app:layout_constraintWidth_min
3. app:layout_constraintHeight_max
4. app:layout_constraintWidth_max

四 链（chain）布局

链式布局是约束布局常用的另一个强大功能，可以快速实现等分布局等，还可以实现类似LinearLayout布局的weight比重功能。

约束链具有三种模式：

• spread：view之间均匀分布
• spread_inside：除了约束链的头部和尾部贴在两边，其余均匀分布
• packed：所有view紧贴在一起，默认居中

（gif是在medium上看到的，原链接一下子没找到）

4.1 构建约束链

约束链具有水平方向和垂直方向的。

将多个view构建成一个水平方向的链，则需要多个view在水平方向上两两约束

这就建成了一条水平线上的约束链。垂直方向上的也类似，保持view 之间在垂直方向上两两约束即可。

4.2 改变链的模式

链的第一个view，即img1，称为链头。在链头上设置app:layout_constraintHorizontal_chainStyle或app:layout_constraintVertical_chainStyle可分别设置水平或垂直链的模式。

1. spread（默认）：

app:layout_constraintVertical_chainStyle=“spread”

2. spread_inside：

3. packed：

4.3 在链上设置权重（weight）

app:layout_constraintHorizontal_weight/app:layout_constraintVertical_weight分别设置水平和垂直链上的权重

注意：要使其生效，必须将大小指定为0dp

<ImageView
android:id=“@+id/img1”
android:layout_width=“0dp”
android:layout_height=“100dp”
app:layout_constraintHorizontal_weight=“1”
…
/>

<ImageView
android:id=“@+id/img2”
android:layout_width=“0dp”
android:layout_height=“100dp”
app:layout_constraintHorizontal_weight=“2”
…
/>

<ImageView
android:id=“@+id/img3”
android:layout_width=“0dp”
android:layout_height=“100dp”
app:layout_constraintHorizontal_weight=“2”
…
/>

五 圆形布局

约束布局还提供一种炫酷的圆形布局：可以以角度和距离约束某个view中心相对于另一个view的中心。

实际开发没怎么用过，实现类似钟表效果就很不错。

• app:layout_constraintCircle : 圆心，值是某个view的id

• app:layout_constraintCircleRadius : 半径

• app:layout_constraintCircleAngle ：角度，值是从0-360，0是指整上方

六 辅助组件

约束布局还提供了一系列组件使得可以更灵活地布局。如Group可以同时控制一堆view的可见性，GuideLine可以虚拟一条辅助线等等。

6.1 Group：控制可见性

Group是一个虚拟视图，可以通过把viewapp:constraint_referenced_ids放到里面，统一同时控制这些view的可见性。

<androidx.constraintlayout.widget.Group
android:id=“@+id/mGroup”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
app:constraint_referenced_ids=“img1,img2”
/>

Group也是继承自view的，直接在代码中像普通view一样设置可见性，就能同时控制到img1，img2的可见性了。

mGroup.visibility = View.VISIBLE

6.2 Guideline：辅助线

Guideline相当于一条虚拟辅助线，可分为水平、垂直线，帮助定位的。

考虑一个需求，两个view，要在屏幕中间一左一右，若是传统定位，就弄一个线性布局放两个view，然后再把这个线性布局居中。使用约束布局，可以在屏幕正中间放一条虚拟垂直辅助线，然后两个view分别放在这条线左右即可。

• android:orientation设置垂直还是水平
• app:layout_constraintGuide_percent通过百分比设置位置，取值可以是0f-1.0f或0%-100%
• app:layout_constraintGuide_begin设置相对start/top的偏移量，dp
• app:layout_constraintGuide_end设置相对end/bottom的偏移量，dp

<androidx.constraintlayout.widget.Guideline
android:id=“@+id/guideline”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:orientation=“vertical”
app:layout_constraintGuide_percent=“0.5”
/>

6.3 Barrier：获取边界范围

Barrier可以获取多个约束view的边界。可以获得所包含的多个view的最左最右等边界。

考虑这样一个需求，左边是text1和text2，另外有一个view，必须放在这两个text的右边

<TextView
android:id=“@+id/text1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“20dp”
android:text=“text1”
android:background=“@android:color/black”

总结

笔者之前工作是在金融公司可能并不是特别追求技术，而笔者又是喜欢追求技术的人，所以格格不入，只能把目标放在互联网大厂了。也希望大家都去敢于尝试和追逐自己的梦想！
BATJ大厂Android高频面试题

觉得有收获的记得点赞，关注+收藏哦!你们的点赞就是我的动力！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

-tn1vU8EH-1715907889115)]

[外链图片转存中…(img-iXAouROm-1715907889115)]

觉得有收获的记得点赞，关注+收藏哦!你们的点赞就是我的动力！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！