东营网站建设app开发,iis 网站 优化,深圳网站建设深圳,深圳家装公司十大排名Compose布局基础知识 上一节对Compose做了简单的介绍#xff0c;本章节主要介绍Compose中常用的布局#xff0c;其中包括三个基础布局#xff08;Colmun、Row、Box#xff09;#xff1b;以及其他常用布局#xff08;ConstraintLayout 、BoxWithConstraints、HorizontalP…Compose布局基础知识 上一节对Compose做了简单的介绍本章节主要介绍Compose中常用的布局其中包括三个基础布局Colmun、Row、Box以及其他常用布局ConstraintLayout 、BoxWithConstraints、HorizontalPager、VerticalPager、LazyColumn、 LazyRow 等学习了本章您将会可以自己写出各种炫酷的布局。完成Compose中各种UI开发。
Jetpack Compose可以让您更轻松地设计和构建应用的界面。Compose通过以下方法将状态转换为界面元素
1、元素的组合
2、元素的布局
3、元素的绘制
Compose中布局的目标
布局系统的Jetpack Compose实现有二个主要目标
1实行高性能
2让开发者能够轻松编写自定义布局
注意使用Android View系统时在嵌套某些View如RelativeLayout时可能会出现一些性能问题。由于Compose可以避免多次测量因为可以根据需要进行深层次的嵌套而不会影响性能。
这里留下疑问请问为什么呢为什么Compose不会引起性能问题带着这些疑问我们进入这篇文章。
可组合函数的基础知识
可组合函数是Compose的基础构建块。可组合函数是一种发出Unit的函数用于描述界面中的某一部分。该函数接受一些输入并生成屏幕上显示的内容。
一个可组合函数可能会发出多个界面元素。不过如果您没有提供有关如何排列这些元素的指导Compose可能会以您不喜欢的方式进行拍了他们。例如一下代码会生成二个文本元素
Composable
fun ArtistCard() {Text(Alfred Sisley)Text(3 minutes ago)
}如果您未提供有关如何排列这个两个文本元素的指导Compose会将它们堆叠在一起使其无法阅读 我们可以看到是混排在一起的。而Compose提供了一些系列现成可用的布局来帮助我们排列界面元素并可以让您轻松定义自己的更专业的布局。
标准布局组件
在许多情况下我们只需要使用Compose的标准布局元素即可。
1、Colmun布局
使用Column可将多个项垂直地放在屏幕上。这个布局类似安卓View中的LinearLayout布局设android:orientation“vertical” 时候的场景纵向排布。
Composable
fun ArtistCard() {Column {Text(姓名:LSL)Text(性别男)}
}2、Row布局
同样使用Row可以将多个项水平放置在屏幕上。Column和Row都支持配置它们的所含元素的对齐方式。Row这个布局类似与安卓view中的LineraLayout中android:orientationhorizontal设置横向排布。
Composable
fun ArtistCard() {Row {Text(姓名:LSL)Text(年龄25)}
}Column和Row包含的在屏幕上的纵向排布和横向排布。上边已经了解了Column和Row的基本使用。
3、Box布局
使用Box可以将元素放在其他元素上。Box还支持为其包含的元素配置特定的对齐方式。此处的modifier不做详细讲解后边章节会详细描述。
Composable
fun ArtistCard() {Box(modifier Modifier.size(44.dp)) {Image(painter painterResource(id R.mipmap.head),contentDescription 11,modifier Modifier.size(44.dp).clip(CircleShape))Image(painter painterResource(id R.mipmap.icon),contentDescription 22,modifier Modifier.align(Alignment.BottomEnd))}
}Box布局类似安卓View中的FrameLayout布局可以重叠布局。
通常、我们只需要这些构函数。我们自行编写可组合函数将这些布局组合成更精美的布局让其适合我们的应用。 注意Compose可以有效地处理嵌套布局堪称设计复杂界面的绝佳工具。这与Android View相比是一个进步在Android View 中出于性能方面的原因您避免使用嵌套布局。
其他常用布局
1、ConstraintLayout约束布局
原来ConstraintLayout 平铺约束布局为了解决View嵌套的问题。
1先引入constraintlayout包
implementation androidx.constraintlayout:constraintlayout-compose:1.0.12ConstraintLayout 在Compose中的使用
可以相对父布局、其他函数布局进行相对约束这个布局比较自由。每个布局都可以相对于其他布局设置位置。下面是一个简单的ConstraintLayout 的使用。
首先 val (button, text) createRefs()创建多个ConstraintLayoutReferences的方便方法这些引用需要作为Modifier.constrainAs的一部分分配给ConstraintLayout内的布局。因为Compose中没有ID属性所以这里设置Modifier.constrainAs(button) 相当于 Button按钮的唯一标识的属性了。其他布局可以根据这个唯一标识找到它并根据这个布局进行布局。
Button按钮设置 top.linkTo(parent.top, margin 16.dp) 相对于父布局顶部、距离付布局16dp start.linkTo(parent.start)相对于父布局的开始位置 end.linkTo(parent.end)相对于父布局的结束位置。start和end的设置使得如下图Button位置就居中了。
Text文本的布局设置 top.linkTo(button.bottom, margin 16.dp) 位于Button的底部距离Button 16dp。
设置start.linkTo(button.start)时Text文本布局位于Button开始位置设置 end.linkTo(button.end)时Text文本布局位于Button的结束位置。
通过上面例子可以看出在ConstraintLayout布局中可以任意设置相对于某个布局位置布局相对灵活。给我们在界面布局中提供的了很大的方便的使用也比较简单。
Preview
Composable
fun ConstraintLayoutCompose() {ConstraintLayout(modifier Modifier.fillMaxWidth().height(100.dp).background(Color(0xff00ffff))) {val (button, text) createRefs()Button(onClick {}, modifier Modifier.constrainAs(button) {top.linkTo(parent.top, margin 16.dp)start.linkTo(parent.start)end.linkTo(parent.end)}) {Text(Button)}Text(Android, Modifier.constrainAs(text) {top.linkTo(button.bottom, margin 16.dp)start.linkTo(button.start)end.linkTo(button.end)})}
}2、BoxWithConstraints 约束Box布局
BoxWithConstraints 带有约束布局的参数可以根据可用空间的大小来决定布局的内容。布局的尺寸信息是到布局阶段才可以使用的也就是说这些布局在组合阶段无法确定显示的内容。
BoxWithConstraints 布局是相对于Box而言的。BoxWithConstraints 可以将内容组合推迟到布局阶段此时布局信息已经确定可以根据BoxWithConstraintsScope参数设置不同的布局。
interface BoxWithConstraintsScope : BoxScope {/*** The constraints given by the parent layout in pixels.** Use [minWidth], [maxWidth], [minHeight] or [maxHeight] if you need value in [Dp].*/val constraints: Constraints/*** The minimum width in [Dp].** see constraints for the values in pixels.*/val minWidth: Dp/*** The maximum width in [Dp].** see constraints for the values in pixels.*/val maxWidth: Dp/*** The minimum height in [Dp].** see constraints for the values in pixels.*/val minHeight: Dp/*** The maximum height in [Dp].** see constraints for the values in pixels.*/val maxHeight: Dp
}根据布局的最大宽度展示小、中、大四个布局了。这个可以更好适配不同的屏幕。
Composable
fun BoxWithConstraintsLayout() {BoxWithConstraints(modifier Modifier.fillMaxWidth().height(100.dp).background(Color(0xffef5a54)),contentAlignment Alignment.Center) {when {maxWidth 150.dp - SmallLayout()maxWidth 250.dp - MediumLayout()else - BigLayout()}}
}3、HorizontalPager和VerticalPager 分页布局
HorizontalPager和VerticalPager 相对于安卓View组件来说对应的是ViewPager。
HorizontalPager可以使界面左右滑动、VerticalPager 可以使界面上下滑动。
OptIn(ExperimentalFoundationApi::class)
Preview
Composable
fun HorizontalPagerCompose() {val state rememberPagerState(5)HorizontalPager(10,state state,pageSize PageSize.Fixed(100.dp),pageSpacing 30.dp) { page -var scale by remember { mutableStateOf(0.5f) }if ((state.currentPage 1) page) {scale 1f} else {scale 0.75f}Column(modifier Modifier.fillMaxWidth().height(200.dp).graphicsLayer {scaleX scalescaleY scale}) {Text(text HorizontalPager Page: $page,modifier Modifier.fillMaxWidth().height(100.dp).background(colorList[page]).wrapContentSize(Alignment.Center).clickable {ToastUtil.toastShort(AppUtils.getContext(), page $page)},color Color(0xFFffffff))}}
}VerticalPager上下滑动和HorizontalPager一样 只是滑动方向不同。
Composable
fun VerticalPagerCompose() {VerticalPager(10, modifier Modifier.height(100.dp)) { page -Text(text VerticalPager Page: $page,modifier Modifier.fillMaxWidth().height(100.dp).wrapContentSize(Alignment.Center))}
}4、LazyColumn和 LazyRow 之列表布局
LazyColumn和LazyRow布局相对于安卓View布局来说类似ListView和GridView和现在常用的RecyclerView都类似都是实现列表展示的功能使用也非常简单。
传入dataList即可展示所有的列表MessageItemCard可以自定义自己的列表样式。
LazyColumn {items(dataList){ item: MessageModel -MessageItemCard(item)}
}这里写MessageItemCard每个条目的布局根据条目展示类似聊天界面的数据。如下图所示。
Composable
fun MessageItemCard(it: MessageModel) {if (it.index % 2 0) {Row {Image(painter painterResource(id R.mipmap.star),contentDescription 1111111,modifier Modifier.size(44.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Column(modifier Modifier.padding(5.dp)) {Text(text it.sender, fontSize 18.sp)Text(text it.content, fontSize 13.sp)}}} else {Row(modifier Modifier.fillMaxWidth().wrapContentSize(align Alignment.CenterEnd)) {Column(modifier Modifier.padding(5.dp)) {Text(text it.sender, fontSize 18.sp)Text(text it.content, fontSize 13.sp)}Image(painter painterResource(id R.mipmap.star),contentDescription 1111111,modifier Modifier.size(44.dp).clip(CircleShape))}}
}最终展示效果
LazyRow的使用和LazyColumn使用一样只是方向不同。
Compose布局中的固有特性测量
Compose有一项规则即子项只能测量一次测量两次就会引发运行时异常。但是有时需要先收集一些关于子项的信息然后在测量子项。
借助固有特性我们可以先查询子项然后在进行实际测量。
对于可组合项您可以查询其intrinsicWidth或intrinsicHight
(min|max)IntrinsicWidth给定此高度可以正确绘制内容的最小/最大宽度是多少(min|max)IntrinsicHeight给定此宽度可以正确绘制内容的最小/最大高度是多少
例如如果您查询具有无限 width 的 Text 的 minIntrinsicHeight它将返回 Text 的 height就好像该文本是在单行中绘制的一样。
注意请求固有特性测量不会两次测量子项。 系统在测量子项前会先查询其固有测量值然后父项会根据这些信息计算测量其子项时使用的约束条件。
固有特性的实际运用
如果我们要实现如下图所效果左边文字右边文字中间分割线效果。我们需要怎么做
我可以可以将二个Text放在同一个Row中并且最大程序扩展另外在中间放置一个Divider。我们需要将分割线的高度设置为与最高的Text相同粗细设置为1.dp
fun TwoTexts(text1: String,text2: String,modifier: Modifier Modifier
) {Row(modifier modifier) {Text(modifier Modifier.weight(1f).padding(start 4.dp).wrapContentWidth(Alignment.Start),text text1)Divider(color Color.Black,modifier Modifier.fillMaxHeight().width(1.dp))Text(modifier Modifier.weight(1f).padding(end 4.dp).wrapContentWidth(Alignment.End),text text2)}
}运行效果我们发现分割线扩展到整个屏幕这并不是我们想要的效果 性能问题
Compose通过只测量一次子项来实现高性能。单遍测量对性能有利使Compose能够高效地处理较深得界面树。 如果某个元素测量了它的子元素两次、而该子元素又测量了它的子元素两次、以此类推那么一次尝试布置整个界面就不得不做大量工作这将很难让应用保持良好的性能。 如果布局由于某种原因需要多次测量compose会提供一个特殊的系统即‘固有特性测量’。如需详细了解此功能请参阅Compose布局中的固有特性测量。 由于测量和放置是布局传递的不通子阶段因此任何仅影响项的放置而不影响测量的更新都可以单独执行。
本章内容已经基本结束主要介绍各种布局的使用学习Compose中的布局帮助您构建出各种需求的UI。如果您阅读过程中遇到各种问题请随时给您宝贵的建议。
上一章节内容 Compose入门
