目录
一、概述
二、过程。
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,)}}结果：
)
)
