(一)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;…

基于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--------------------------------------------------------*…

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…

微软 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是用来组织和管理数据的一种方式。它…

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

勒索攻击越来越频繁 去年的勒索事件数据呈现出显著的增长趋势。具体来说&#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…

量子飞跃:从根本上改变复杂问题的解决方式

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨王珩 编译/排版丨沛贤 深度好文&#xff1a;1000字丨5分钟阅读 利用多功能量子比特的量子计算机已处于解决复杂优化问题的最前沿&#xff0c;例如旅行商问题&#xff0c;这是一个典型的…

10、【代理模式】通过引入一个代理对象来控制对原始对象的访问的方式。

你好&#xff0c;我是程序员雪球。 今天我们了解代理模式的原理、静态代理和动态代理的区别、Spring AOP 和动态代理的关系、代理模式的使用场景&#xff0c;以及用 Java 实现一个动态代理示例 一、代理模式的原理 代理模式是一种设计模式&#xff0c;它提供了一种通过引入一个…

手把手带你搞懂电压跌落测试DIP

针对很多入门小白不懂元器件&#xff0c;一些老工程师上班很多年有的也不懂得总结知识点&#xff0c;以及想学习不知道怎么系统学习的这一类人群&#xff0c;前方知识点来袭&#xff0c;请君放心食用~ 一&#xff0c;项目背景介绍 最近做项目过程中&#xff0c;客户要求要做电…

wps使用Latex编辑公式没有Latex formula

wps使用Latex编辑公式没有Latex formula 1. 下载CTEX2. 下载LaTeXEE3. 配置Miktex4. 配置latexee5. 用管理员权限运行latexeqedit.exe6. wps插入latex公式 1. 下载CTEX 下载CTEX网址&#xff0c;我下载的下图这个&#xff0c;下载完了之后运行exe文件安装ctex。 2. 下载LaTe…

【Entity Framework】你要知道EF中功能序列与值转换

【Entity Framework】你要知道EF中功能序列与值转换 文章目录 【Entity Framework】你要知道EF中功能序列与值转换一、序列1.1 基本用法1.2 配置序列设置 二、值转换2.1 配置值转换器2.2 批量配置值转换器2.3 预定义的转换2.4 ValueConverter类2.5 内置转换器 三、应用3.1 简单…

Java中的TCP通信

TCP通信 TCP通信Socket客户端ServerSocket服务端 例子&#xff1a;一发一收例子&#xff1a;多发多收异常捕获 例子&#xff1a;服务器与多个客户端同时通信多客户端通信架构服务端代码ServerReaderThread 服务端读数据线程 TCP通信 特点&#xff1a;面向连接、可靠通信 通信双…

动态数据源实现分表走shardingsphere,不分表走其他

shardingsphere从4.1.1升级到5.2.1但是还没有完结&#xff0c;因为在执行存储过程的时候&#xff0c;系统提示错误如下。shardingsphere是不支持存储过程呢&#xff0c;但项目中不能避免使用存储过程&#xff0c;因为有大量的数据需要初始化&#xff0c;这种情况该如何应对&…