(一)Jetpack Compose 从入门到会写

基本概念

Compose 名称由来

众所周知,继承在功能拓展上表现的很脆弱,容易类、函数爆炸,通过代理和包装进行组合会更健壮。
Compose 意为组合,使用上也是把 Compose 函数以 模拟函数调用层级关系的方式 组合到一起,最终映射为 ViewTree。

声明示UI与命名式UI

命名式UI:

需要手动更新。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:text="Hello"android:layout_width="wrap_content"android:layout_height="wrap_content"/><ImageViewandroid:src="..."android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>

声明式UI:

只需要把界面设置出来,不需要手动更新。(随着数据自动更新)

Column() {Text(text = "Hello")Image(bitmap = ...)
}
声明式UI如何实现自动订阅
  var text by mutableStateOf("hello")//与ui绑定Text(text = text)//赋值,ui会收到订阅LaunchedEffect(Unit) {text = "good"}
Compose和databind的区别

databinding只能更新界面元素中的值,而compose可以更新任何内容,包括结构。

    //文案是否可以被显示 var ifShow by mutableStateOf(false)   var text by mutableStateOf("hello")if (ifShow) {Text(text = text)}

比如这里if(showImage) ,如果为false,则Text从视图结构里被移除,跟原本的setVisible是有区别的。

关于层级嵌套

Android布局嵌套层级太深,会导致性能损耗,因为重复测量。

(比如父view是Linelayout,宽度为wrap_content,会取子view的最大宽度为宽度。如果有一个子View为match_parent,就会先以0为强制宽度测量一次这个子view,再测量其他子view的最大宽度,再以最大宽度测量这个match_parent的子view得出最终尺寸。在有多重嵌套的场景下,测量次数会指数级攀升,测量次数 = O^2n,O为层级数,因此每增加一层,布局时间翻一倍)

Compose规避了这个问题,因为在Compose中,子项只能测量一次,测量两次就会引发运行时异常。

Intrinsic Measurement 固有尺寸测量。

Compose允许父组件在测量前,先粗略测量子组件的最大最小大小尺寸,再统一进行测量。测量次数 = O^n。

因此在Compose中,N级嵌套布局,和同一层级嵌套布局,性能是一样的。

实现简单APP主页

实现一个列表

实现一个竖向列表,item为头像+昵称

首先需要定义好数据源:

//数据源
data class User(val name: String, val job: String)
object UserData {val messages = listOf(User("小王", "厨师"),User("大明", "司机"),User("小李 ", "外卖员"),)
}

然后实现每一列的布局ui:


//ui item
@Composable
private fun UserItem(user: User) {//Row 是以行排布的元素组件,列是ColumnRow(modifier = Modifier.padding(all = 8.dp),verticalAlignment = Alignment.CenterVertically) {//头像Image(painter = painterResource(id = R.mipmap.mine),contentDescription = null,modifier = Modifier.size(30.dp).clip(CircleShape))Spacer(Modifier.padding(horizontal = 8.dp))Column() {//名字Text(text = user.name)//间隔Spacer(Modifier.padding(vertical = 8.dp))//职业Text(text = user.job,)}}
}

最后,需要将布局Item组成一个Conversation列表,加入到Activity的布局中:

//Activity
class ComposeListActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Conversation(userList = messages)}}
}//实现一个列表
@Composable
fun Conversation(userList: List<User>) {LazyColumn {items(userList) { it ->UserItem(user = it)}}
}

实现底部导航栏

首先新建一个Activity,在setContent中声明底部导航栏(结构为一个Row+三个Icon)

class ComposeHomeActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {NavBar()}}@Composablefun NavBar() {Row {Icon(painter = painterResource(id = R.mipmap.home), contentDescription = null)Icon(painter = painterResource(id = R.mipmap.project), contentDescription = null)Icon(painter = painterResource(id = R.mipmap.mine), contentDescription = null)}}
}

此时运行的效果是这样的:

略显丑陋,接下来给它们补充一些间距,布局,以及颜色:

@Composable
fun CustomApp() {Row(Modifier.height(84.dp).padding(16.dp),verticalAlignment = Alignment.CenterVertically) {NavItem(iconRes = R.mipmap.home, desc = "主页", Color.Blue)NavItem(iconRes = R.mipmap.project, desc = "项目", Color.Gray)NavItem(iconRes = R.mipmap.mine, desc = "我的", Color.Gray)}
}// 避免给每个Icon重复设置,将Icon抽成独立的自定义参数组件
@Composable
fun RowScope.NavItem(@DrawableRes iconRes: Int, desc: String, tint: Color) {Icon(painter = painterResource(id = iconRes), contentDescription = desc,Modifier.size(24.dp).weight(1f),  //宽度比重,必须要在RowScope下才能设置。tint = tint)
}

运行:

可以看到效果好了很多。那么如何实现不同页面之间的切换呢?

首先定义好三个不同的页面:

@Composablefun ProjectScreen(modifier: Modifier = Modifier) {Box(modifier.fillMaxSize()) {Text(text = "Favorites Screen", modifier = Modifier.align(Alignment.Center))}}@Composablefun UserScreen(modifier: Modifier = Modifier) {Box(modifier.fillMaxSize()) {Text(text = "Settings Screen", modifier = Modifier.align(Alignment.Center))}}@Composablefun HomeScreen(userList: List<User>) {//这里是前面实现的列表页面LazyColumn {items(userList) { it ->UserItem(user = it)}}}

然后,在底部栏按钮外部,增加Scaffold组件

Scaffold:一个组合元素,可以轻松地在同一个位置添加AppBar、BottomAppBar等。

  • 增加页面数据类Screen,用来标识三个页面。
  • 增加currentScreen变量,维护当前页面状态。
  • 给每一个NavItem设置点击监听事件,在每一个item点击时设置currentScreen的变化。
  • Scaffold收到currentScreen变化通知,切换不同的页面。
  sealed class Screen {object Home : Screen()object Project : Screen()object User : Screen()}@Composablefun CustomApp() {//维护当前页面状态var currentScreen by remember { mutableStateOf<Screen>(Screen.Home) }Scaffold(bottomBar = {Row(Modifier.height(84.dp).padding(16.dp),verticalAlignment = Alignment.CenterVertically) {NavItem(iconRes = R.mipmap.home, desc = "主页", Color.Blue) {currentScreen = Screen.Home}NavItem(iconRes = R.mipmap.project, desc = "项目", Color.Gray) {currentScreen = Screen.Project}NavItem(iconRes = R.mipmap.mine, desc = "我的", Color.Gray) {currentScreen = Screen.User}}}) { innerPadding ->when (currentScreen) {Screen.Home -> HomeScreen(UserData.messages)Screen.Project -> ProjectScreen(Modifier.padding(innerPadding))Screen.User -> UserScreen(Modifier.padding(innerPadding))}}}// 避免给每个Icon重复设置,将Icon抽成独立的自定义参数组件@Composablefun RowScope.NavItem(@DrawableRes iconRes: Int,desc: String,tint: Color,click: () -> Unit,) {Icon(painter = painterResource(id = iconRes), contentDescription = desc,Modifier.size(24.dp).weight(1f).clickable {click.invoke()},  //宽度比重,必须要在RowScope下才能设置。tint = tint,)}

实现效果:

底部栏BottomNavigation

比起自己实现导航栏+左右滑动页面,最好采用系统api来实现,效果和稳定性更优。这里可以先引入Navigation的库:

//Navigation
implementation "androidx.navigation:navigation-compose:2.8.0-alpha06"

结合Jetpack Compose的一些常用元素:

BottomNavigation:用于创建底部导航栏。

BottomNavigationItem:底部导航栏的一个单独项。

@Composablefun MyApp() {var currentScreen by remember { mutableStateOf<Screen>(Screen.Home) }Scaffold(bottomBar = {BottomNavigation {BottomNavigationItem(icon = { Icon(Icons.Filled.Home, contentDescription = "Home") },label = { Text("Home") },selected = currentScreen == Screen.Home,onClick = { currentScreen = Screen.Home })BottomNavigationItem(icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorites") },label = { Text("Favorites") },selected = currentScreen == Screen.Project,onClick = { currentScreen = Screen.Project })BottomNavigationItem(icon = { Icon(Icons.Filled.Settings, contentDescription = "Settings") },label = { Text("Settings") },selected = currentScreen == Screen.User,onClick = { currentScreen = Screen.User })}}) { innerPadding ->when (currentScreen) {Screen.Home -> HomeScreen(Modifier.padding(innerPadding))Screen.Project -> ProjectScreen(Modifier.padding(innerPadding))Screen.User -> UserScreen(Modifier.padding(innerPadding))}}}

实现效果:

Android原生自定义View在Compose中使用

在第二个页面ProjectScreen中,尝试加入之前写好的自定义View:

@Composablefun ProjectScreen(modifier: Modifier = Modifier) {AndroidView(modifier = Modifier.size(150.dp),  factory = { context ->// Creates viewCircularAnimProgressView(context)},update = { view ->// 视图已膨胀或此块中读取的状态已更新// 如有必要,在此处添加逻辑// 由于selectedItem在此处阅读,AndroidView将重新组合// 每当状态发生变化时// 撰写示例->查看通信})}

可以通过AndroidView组件实现,在factory中返回通过原生方式实现的自定义View即可实现。

并且在状态更新时,会回调update事件,可以在这里对View进行一些刷新操作。

运行效果:

与MVI结合使用

带来的优化

举个栗子:

用MVI实现一个计数器,通常需要定义一个状态类来存储计数器的状态:

状态类CounterState

事件类CounterEvent:来表示计数器的事件。

数据类CounterViewModel:用于处理计数器应用程序的业务逻辑。

//状态
data class CounterState(val count: Int)//事件
sealed class CounterEvent {object IncrementCounter : CounterEvent()
}//ViewModel
class CounterViewModel : ViewModel() {private val _state = MutableLiveData(CounterState(0))val state: LiveData<CounterState> = _statefun handleEvent(event: CounterEvent) {when (event) {is CounterEvent.IncrementCounter -> incrementCounter()}}private fun incrementCounter() {val currentCount = _state.value?.count ?: 0_state.value = CounterState(currentCount + 1)}
}// UI databind部分
//1.在xml中定义 btn 和 text...
val button = findViewById(R.id.btn)
val text = findViewById(R.id.text)
// 2.显示绑定viewmodel.state.observe(this) {count->btn.text = "Click Count: $count"}//3.点击监听button.setOnclickListener {viewmodel.handleEvent(...)}

UI部分如果使用Compose实现,代码会比较简洁,因为在UI初始化的时候就建立了绑定。

@Composable
fun Counter() {    Button(onClick = { viewmodel.handleEvent(...) }) //点击 Text(text = "Click Count: " + viewmodel.state.value.count) //显示
}

这样做的优点是,保证了框架的唯一性

由于每个view是在一开始的时候就被数据源赋值的,无法被多处调用随意修改,所以保证了框架不会被随意打乱。更好的保证了代码的低耦合等特点。

MVI结合Compose

举个栗子,用MVI+Compose实现一个登录功能,整体结构如下:


class ComposeMviActivity : ComponentActivity() {private lateinit var userViewModel: UserViewModeloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)userViewModel =ViewModelProvider(this, UserViewModelFactory(application)).get(UserViewModel::class.java)setContent {val userState = userViewModel.state.valueval username = remember { mutableStateOf(TextFieldValue("")) }val password = remember { mutableStateOf(TextFieldValue("")) }Column(modifier = Modifier.padding(16.dp)) {Text(text = "Welcome")TextField(value = username.value,onValueChange = { username.value = it })TextField(value = password.value,onValueChange = { password.value = it },visualTransformation = if (password.value.text.isNotEmpty()) PasswordVisualTransformation() else VisualTransformation.None,keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),)Button(onClick = {userViewModel.onIntent(UserIntent.Login(username.value.text,password.value.text))},modifier = Modifier.padding(top = 8.dp)) {Text(text = "Login")}Button(onClick = { userViewModel.onIntent(UserIntent.Logout) },modifier = Modifier.padding(top = 8.dp)) {Text(text = "Logout")}if (userState.success) {Text(text = "登录成功")} else {Text(text = "未登录:" + userState.error)}}}}}class UserViewModelFactory(private val application: Application) :ViewModelProvider.AndroidViewModelFactory(application) {override fun <T : ViewModel> create(modelClass: Class<T>): T {//val sharedPreferences = PreferenceManager.getDefaultSharedPreferences(application)val userModel = UserModel()return UserViewModel(userModel) as T}
}
sealed class UserIntent {data class Login(val username: String, val password: String) : UserIntent()object Logout: UserIntent()
}data class UserViewState(val success: Boolean = false, val error: String = "")
class UserModel() {fun login(username: String, password: String): Boolean {return "123" == username && "456" == password}fun logout() {//清空本地账号密码}
}
class UserViewModel(private val userModel: UserModel): ViewModel() {private val _state = mutableStateOf(UserViewState())val state: State<UserViewState> = _statefun onIntent(intent: UserIntent) {when(intent) {is UserIntent.Login -> {val isSuccessful = userModel.login(intent.username, intent.password)if (isSuccessful) {_state.value = UserViewState(success = true)} else {_state.value = UserViewState(error = "Invalid username or password")}}is UserIntent.Logout -> {userModel.logout()_state.value = UserViewState(success = true)}}}
}

总结

首先掌握Compose的重要性不言而喻,SwiftUI也好,Flutter也好,声明式UI一统移动端是大势所趋。

写之前笔者对Compose的了解基本为0,作为Android开发,之前也只是写过一点flutter的demo,但是从开始学习到完成本文一共花了大约不到1天,由此可见Compose的入手门槛其实并不高,只要花时间看一看写一写,是比较容易快速上手的。

但是深入理解依然是需要花功夫和心血的,整理了一些后续的学习方向:

● Compose实现自定义View
● Compose动画
● Compose绘制原理(https://kstack.corp.kuaishou.com/article/6353)
● Compose事件分发
● Compose滑动嵌套
● Compose Widget Lifecycle
● Compose UI 交互刷新流程

会在以后的工作和学习过程中,持续补充,希望感兴趣的同学可以一起加入进来,共同进步。

最后~感谢读到这里,再会!


参考资料:

Jetpack Compose  |  Android Developers——Compose官方教程

写在开头 | 你好 Compose——jetpack compose中文教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/818552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCL中VTK场景添加坐标系轴显示

引言 世上本没有坐标系&#xff0c;用的人多了&#xff0c;便定义了坐标系统用来定位。地理坐标系统用于定位地球上的位置&#xff0c;PCL点云库可视化窗口中的坐标系统用于定位其三维世界中的位置。本人刚开始接触学习PCL点云库&#xff0c;计算机图形学基础为零&#xff0c;…

一篇文章搞懂-线程与携程

推荐先阅读基础篇 http://t.csdnimg.cn/Fjq5O 1.定义 线程&#xff08;Thread&#xff09;是操作系统的资源,资源调度和执行的最小单位&#xff0c;创建、切换等操作消耗资源 协程&#xff08;Coroutine&#xff09;&#xff1a;无需操作系统&#xff0c;为编程语言自带。称为用…

【flask快速上手(二)】

目录 flask快速上手&#xff08;二&#xff09;渲染模板文件上传Cookies重定向 flask快速上手&#xff08;二&#xff09; 渲染模板 在 Python 内部生成 HTML 不好玩&#xff0c;且相当笨拙。因为你必须自己负责 HTML 转义&#xff0c; 以确保应用的安全。因此&#xff0c; F…

系统分析与设计(1)

系统分析与设计 &#xff08;Systems Analysis ad Design&#xff09; 系统分析(System analysis) (理解问题域) 系统设计(System design) (求可行性) 系统分析与设计是关于业务问题的解决和计算机应用程序的开发 初始阶段&#xff0c;问题具有非良性定义的边界与结构 解的本性…

基于Python的卷积网络的车牌识别系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

leetcode不同路径

. - 力扣&#xff08;LeetCode&#xff09; 62. 不同路径 中等 相关标签 相关企业 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下…

04_UART串口发送数据

1.配置芯片&#xff0c;如果PA9,PA10的UART引脚被占用&#xff0c;会自动进行重映射 2.代码 int main(void) {uint8_t temp[]"test";/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration--------------------------------------------------------*…

定义在mian函数之外的数组的自动初始化

【题目描述】 开灯问题。有n盏灯&#xff0c;编号为1&#xff5e;n。第1个人把所有灯打开&#xff0c;第2个人按下所有编号为2的倍数的开关&#xff08;这些灯将被关掉&#xff09;&#xff0c;第3个人按下所有编号为3的倍数的开关&#xff08;其中关掉的灯将被打开&#xff0…

Unity Shader 流光 边缘光

前言 Unity2021.3.23 一、实现原理 Time控制UV的变化,再采样一张流光贴图.即可实现流光效果。 二、效果及源码展示 1.流光效果 效果描述: 1.边缘光(菲尼尔), 2.从上到下扫描光. 效果图如下: 代码如下: Shader "Unlit/ScanCode" {Properties{_MainTex ("T…

JavaEE企业开发新技术5

目录 2.18 综合应用-1 2.19 综合应用-2 2.20 综合应用-3 2.21 综合应用-4 2.22 综合应用-5 Synchronized &#xff1a; 2.18 综合应用-1 反射的高级应用 DAO开发中&#xff0c;实体类对应DAO的实现类中有很多方法的代码具有高度相似性&#xff0c;为了提供代码的复用性,降低…

MoneyPrinterTurbo-利用AI大模型,一键生成高清短视频

MoneyPrinterTurbo-利用AI大模型&#xff0c;一键生成高清短视频 在今天的信息爆炸的时代&#xff0c;短视频已经成为最受欢迎的信息传递方式之一。无论是分享生活瞬间&#xff0c;还是传递重要信息&#xff0c;短视频都是最直观&#xff0c;最具影响力的手段。但是&#xff0…

SpringBoot:正常启动,Controller 无法访问

一、server.servlet.context-path配置的作用 定义&#xff1a; server.servlet.context-path # Context path of the application. 应用的上下文路径&#xff0c;也可以称为项目路径&#xff0c;是构成url地址的一部分。 server.servlet.context-path不配置时&#xff0c;默认…

问题 E: 实验11_9_链表归并

题目描述 已知有两个递增的正整数序列A和B&#xff0c;序列中元素个数未知&#xff0c;同一序列中不会有重复元素出现&#xff0c;有可能某个序列为空。现要求将序列B归并到序列A中&#xff0c;且归并后序列A的数据仍然按递增顺序排列。如果序列B中某些数据在序列A中也存在&am…

微软 SDL 安全研发生命周期详解

微软SDL&#xff08;Security Development Lifecycle&#xff09;是一种安全软件开发的方法论&#xff0c;它强调在整个产品开发过程中融入安全考虑因素。SDL 是一个动态的过程&#xff0c;包括多个阶段和活动&#xff0c;以确保产品的安全开发、测试、部署和运行。Microsoft 要…

11.哀家要长脑子了!

目录 1.453. 最小操作次数使数组元素相等 - 力扣&#xff08;LeetCode&#xff09; 2.665. 非递减数列 - 力扣&#xff08;LeetCode&#xff09; 3. 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 4. 3114. 替换字符可以得到的最晚时间 - 力扣&#xff08;LeetCode…

说说我理解的数据库中的Schema吧

一、SQL标准对schema如何定义&#xff1f; ISO/IEC 9075-1 SQL标准中将schema定义为描述符的持久命名集合&#xff08;a persistent, named collection of descriptors&#xff09;。 大部分的网上资料定义Schema如下&#xff1a; schema是用来组织和管理数据的一种方式。它…

activiti7.0集成人大金仓数据库

说明 人大金仓数据库和mysql数据库比较相似&#xff0c;部分语法也类似。activiti中默认集成的是mysql数据源&#xff0c;而且并没有集成过人大金仓数据库。所以想要集成人大金仓数据库就要将该类的的数据源配置到其中去。这里的思路就是在流程引擎初始化数据库datasource的时…

对中小企业来说,一次的勒索事件有可能造成致命的伤害

勒索攻击越来越频繁 去年的勒索事件数据呈现出显著的增长趋势。具体来说&#xff0c;全球范围内的勒索软件攻击活动愈演愈烈&#xff0c;受害者数量创下历史新高&#xff0c;同比增长了46%。 例如&#xff0c;2023年伊始&#xff0c;英国皇家邮政成为了勒索团伙LockBit的大型…

QT 使用redis ,连接并使用

一.redis安装 链接&#xff1a;https://pan.baidu.com/s/17fXKOj5M4VIypR0y5_xtHw 提取码&#xff1a;1234 1.下载得到文件夹如图 course_redis为安装包。 2.启动Redis服务 把安装包解压到某个路径下即可。 打开cmd窗口&#xff0c;切换到Redis安装路径&#xff0c;输入 r…

LLM激活稀疏性加速

相关工作 Deja vu Contextual sparsity for efficient llms at inference time LLM in a flash Efficient Large Language Model Inference with Limited Memory ReLU Strikes Back Exploiting Activation Sparsity in Large Language Models ReLU2 Wins: Discovering Effi…