Compose 是一个界面工具包,可让您轻松实现应用的设计。您只需描述自己想要的界面外观,Compose 会负责在屏幕上进行绘制。
Compose布局的优势
使用Compose布局还有许多其他优势:
- 灵活性:Compose布局支持组合任何数量的UI元素和自定义布局代码,可以实现最具创意的设计。
- 性能:Compose布局引入了“Recompose”概念,可以在仅重新绘制必要元素的情况下更新UI,从而提高应用性能。
- 易于测试和维护:传统布局需要编写大量的手动测试代码,而使用Compose布局则可以编写可单元测试的组件。
- 更少的样板代码:Compose布局通过组合UI元素和自定义布局,可以减少重复的样板代码。
Compose 的基本构建块
可组合函数是 Compose 的基本构建块,返回值是 Unit 的函数,用于描述界面中的某一部分,该函数可接收参数。 组合函数中可包含多个界面元素。 其基本格式为:
在Compose中标准的布局元素有三个: Box 、 Column 、 Row 。
Box 重叠布局,类似android View系统中的FramLayout布局,元素会重叠显示,其原型定义如下:
例子
Column 垂直布局,在界面元素垂直方向依次排列。源码中定义如下:
实例
Row 元素水平方向分布,源码中定义:
示例
Jetpack Compose中组件库包括:compose-ui和material。很多常用基本组件都是在material库中,Compose-ui中组件很少:Image、BasicTextField(输入框)。 示例:
在对标准布局元素和组件有了一定了解后,我们来看下Compose的布局流程。 首先Compose布局是一个界面树,从树的根节点开始依次要求其子节点对自身进行测量,然后递归完成所有子节点的测量,并将约束条件沿着树向下传递给子节点,并将测量的尺寸和放置指令依次向根节点传递。
以下面可组合函数为示例:
其布局过程如下图示:
在Compose布局中修饰符至关重要,您可以使用修饰符来修饰或扩充可组合项。常用的修饰符如下:
修饰符扩展 除了使用Compose提供的修饰符外,我们也可以扩展函数自定义修饰符,具体方式可以参考 Jetpack Compose布局(三) 一文中讲的 扩展布局修饰符 。
强调:修饰符的使用是有顺序的 强调:修饰符的使用是有顺序的 强调:修饰符的使用是有顺序的 例如,将上例的background和padding顺序调换下,就会如下图效果,仔细看两图的顶部边距,会发现区别
Compose中提供了固定槽位的可组合项,以简化界面元素,这些主要在 androidx.compose.material:material 库中,如: Drawer 、 FloatingActionButton 、 TopAppBar 等。 Material 组件大量使用槽位 API,这是 Compose 引入的一种模式,它在可组合项之上带来一层自定义设置。这种方法使组件变得更加灵活,因为它们接受可以自行配置的子元素,而不必公开子元素的每个配置参数。槽位会在界面中留出空白区域,让开发者按照自己的意愿来填充。如下图 TopAppBar 的槽位。 如何使用Compose布局
使用Compose布局涉及以下几个步骤:
- 引入Compose库并设置项目依赖。
- 创建Compose组件、定义元素和布局等。
- 将Compose组件与Activity或Fragment等界面元素关联。
- 运行应用程序并测试UI。
Compose布局的最佳实践
下面是一些Compose布局的最佳实践建议:
- 使用Jetpack Compose和Material Design组件的结合可以加速构建过程,同时让您的应用程序看起来更加现代。
- 考虑使用ConstraintLayout、Row和Column等基本布局属性,这些可以在Compose布局中轻松实现。
- 利用可组合性:在开发过程中,将常见UI元素组合成可重复使用的自定义组件,可以节省时间和减少代码的重复。
- 考虑使用状态:使用可组合状态(state)可以跟踪应用程序中的数据,并使应用程序变得更加动态。
- 在编写Compose布局时,应使用“高内聚、低耦合”的方式,这代表着组件应当聚焦于自己的核心功能,而无需与其他组件进行高耦合。
本文是对Android compose布局的简单分析,更多有关Android Jetpack的技术问题或者进阶学习可以参考《Android Jetpack笔记手册》点击可以查看详细板块内容。、