关于ConstarintLayout有关的点

一、概述

二、过程。

1、介绍

主要特点

关键概念

使用示例

总结

2、我遇到的问题

问题：

可能的原因：

结论

一、概述

在学习过程中，发现对ConstarintLayout理解不够到位，下面是发现并解决问题过程。

二、过程。

1、介绍

ConstraintLayout 是 Android Jetpack 中的一种布局管理器，旨在提供更灵活和高效的用户界面设计。它允许开发者使用约束（constraints）来定义视图之间的关系，而不是依赖于嵌套布局。这种方式可以显著减少层级，提高性能。

主要特点

灵活的布局:
- 通过定义视图之间的约束关系，开发者可以轻松地实现复杂的布局，而无需使用多个嵌套的布局。
性能优化:
- ConstraintLayout 减少了视图层级，使得布局的渲染更加高效，从而提高应用的性能。
丰富的布局功能:
- 提供了多种功能，如链（Chains）、指导线（Guidelines）、比率（Bias）等，帮助创建响应式设计。
支持动画:
- 可以与 MotionLayout 一起使用，实现复杂的动画效果。

关键概念

约束（Constraints）:
- 用于定义视图相对于其他视图或父容器的边界关系。例如，可以将一个视图的左边界约束到另一个视图的右边界。
指导线（Guidelines）:
- 虚拟线可以用于帮助放置和对齐视图。可以是水平或垂直的，开发者可以指定其位置（如 0.5f 表示中间）。
链（Chains）:
- 允许多个视图在同一方向上进行排列。可以设置链的样式（如均匀分布、拉伸等）。
偏移量（Bias）:
- 允许在约束中对视图进行细微调整，例如将视图稍微偏移到某一侧。

使用示例

以下是一个简单的 ConstraintLayout 示例：

@Composable
fun SimpleConstraintLayout() {ConstraintLayout(modifier = Modifier.fillMaxSize()) {val (textView, button) = createRefs()Text(text = "Hello, ConstraintLayout!",modifier = Modifier.constrainAs(textView) {top.linkTo(parent.top, margin = 16.dp)start.linkTo(parent.start, margin = 16.dp)})Button(onClick = { /* Do something */ },modifier = Modifier.constrainAs(button) {top.linkTo(textView.bottom, margin = 16.dp)end.linkTo(parent.end, margin = 16.dp)}) {Text("Click Me")}}
}

总结

ConstraintLayout 是构建灵活、响应式 Android 应用界面的强大工具。通过使用约束、指导线和链等功能，开发者可以高效地设计复杂布局并优化应用性能。

2、我遇到的问题

问题：

在学习时，我的代码及运行结果如下：

@Preview
@Composable
fun DrawerHead(){ConstraintLayout(modifier = Modifier.width(300.dp).height(200.dp).background(Color.Yellow)) {val (imgRef,titleRef,contentRef) = remember{createRefs()}createVerticalChain(titleRef,contentRef, chainStyle = ChainStyle.Spread)val hGuideline = createGuidelineFromStart(0.2f)val vGuideline = createGuidelineFromTop(0.5f)Image(painter = painterResource(id= android.R.mipmap.sym_def_app_icon),contentDescription = "image", modifier = Modifier.constrainAs(imgRef){top.linkTo(parent.top)bottom.linkTo(parent.bottom)start.linkTo(parent.start)end.linkTo(hGuideline)})//Text("客人", fontSize = 20.sp,)}}

主要是水平线的这一行，控制图标位于容器的哪个位置。

val hGuideline = createGuidelineFromStart(0.2f)

我在学习时误以为是控制黄色区域大小，（但其实那个外部容器早就在

modifier = Modifier.width(300.dp).height(200.dp)

时定义了），发现感觉大小不对，于是将

val hGuideline = createGuidelineFromStart(0.2f)

参数改成0.5f，结果如下。

一开始我还没看出变化，后面才发现是图标位置。

但是奇怪的是，0.5f在理解中应该是位于容器居中，但上面的位置反而像0.2f 的，百思不得其解，我又试了一下1.0f,结果如下：

这回倒是居中了。我想那大于1.0的可以吗？我在搜查资料时都表示不可以，但是实践出真知。下面是2.0f参数的结果：

好家伙！2.0f才到最边上，这才是1.0f的效果啊按理来说。

于是我开始思考。

可能的原因：

布局方向:
- 如果你的容器是垂直方向的，1.0f 通常会表示底部边缘，而 0.5f 才是中间。因此，如果你看到 1.0f 在中间，可能是因为布局的逻辑或方向与预期不符。
指南线的定义:
- 在某些布局框架中，1.0f 可能被解释为“完全填充”或“最大位置”，因此可能导致它在视觉上看起来居中。
布局的高度或宽度:
- 如果容器的高度或宽度设置不当（例如为零或非常小），可能导致指南线的位置看起来相对不正常。
父容器的影响:
- 如果指南线的父容器有额外的属性（如填充、边距等），这也可能影响指南线的实际位置。

而在你的 DrawerHead 组件中，Image 的位置是由以下几个因素决定的：

水平指南线 (hGuideline):
```
val hGuideline = createGuidelineFromStart(1.0f)
```
这里的 1.0f 表示指南线位于容器的最右侧（100%），这意味着图像的结束边缘将与容器的右边缘对齐。因此，Image 的右边界会靠近容器的右侧。
约束设置:
```
Modifier.constrainAs(imgRef) {top.linkTo(parent.top)bottom.linkTo(parent.bottom)start.linkTo(parent.start)end.linkTo(hGuideline)
}
```
这里你将 Image 的左边界（start）链接到容器的左边界，而右边界（end）链接到 hGuideline。这意味着图像的左边缘在容器的左边缘，而右边缘在容器的右边缘。
高度和垂直链:
- 你使用了 createVerticalChain(titleRef, contentRef, chainStyle = ChainStyle.Spread)，这意味着 titleRef 和 contentRef 的位置会根据其内容和父容器的高度进行分布，但这与 Image 的水平位置无关。

结论

由于 hGuideline 的位置在容器的最右侧，而 Image 的左边界在容器的最左侧，因此 Image 会填满整个宽度（300.dp），使得它看起来在水平上居中。

所以是因为我同时定义了start和end位置，所以两个都会有影响。

那最后我注释掉部分代码，结果就如预期一样了。

@Preview
@Composable
fun DrawerHead(){ConstraintLayout(modifier = Modifier.width(300.dp).height(200.dp).background(Color.Yellow)) {val (imgRef,titleRef,contentRef) = remember{createRefs()}createVerticalChain(titleRef,contentRef, chainStyle = ChainStyle.Spread)val hGuideline = createGuidelineFromStart(0.5f)val vGuideline = createGuidelineFromTop(0.5f)Image(painter = painterResource(id= android.R.mipmap.sym_def_app_icon),contentDescription = "image", modifier = Modifier.constrainAs(imgRef){top.linkTo(parent.top)bottom.linkTo(parent.bottom)//start.linkTo(parent.start)end.linkTo(hGuideline)})//Text("客人", fontSize = 20.sp,)}}

结果：