![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Jetpack Compose
文章平均质量分 87
fundroid
Android GDE(谷歌开发者专家)| 互联网大厂移动端架构师
展开
-
Jetpack Compose 1.5 发布:全新 Modifier 系统助力性能提升
Jetpack Compose 1.5 发布,性能终于得到大幅提升,这得益于全新的 Modifier 实现方式原创 2023-09-11 08:30:00 · 2020 阅读 · 6 评论 -
深入浅出 Compose Compiler(1) Kotlin Compiler & KCP
Compose 的语法简洁、代码效率非常高,这主要得益于 Compose Compiler 的一系列编译期魔法,帮开发者生成了很多样板代码。但编译期插桩也阻碍了我们对于 Compose 运行原理的认知,想要真正读懂 Compose 就必须先了解它的 Compiler。本系列文章将带大家揭开 Compose Compiler 的神秘面纱。Compose 是一个 Kotlin Only 框架,所以 Compose Compiler 的本质是一个 KCP(Kotlin Compiler Plugin)。原创 2023-04-29 12:00:54 · 1675 阅读 · 4 评论 -
Jetpack Compose 中添加 click 事件的几种方法
Compose 中添加 click 有多总方法,本文做一个简单总结,包括 Modifier.clickable, combinedClickable, pointerInput, ViewConfiguration 等原创 2023-04-10 08:30:00 · 5288 阅读 · 1 评论 -
Compose 为什么可以跨平台?
Compose Multiplatform 本质上是一个 Kotlin 跨平台库。在各个平台共享 Compose Compiler 和 Compose Runtime原创 2022-12-26 11:52:37 · 2039 阅读 · 0 评论 -
Compose 横竖屏切换时状态如何保存?rememberSaveable 实现原理分析
rememberSaveable 可以帮助 Composable 在横竖屏切换甚至进程切换后恢复状态,这主要是通过 SaveableStateRegistry 实现的,在 Activity onSaveInstance 时通过 registry 收集我们需要保存的状态并写入 Bundle,待到下次 Activity 重新 onCreate 的时候恢复。原创 2022-10-24 09:00:00 · 2096 阅读 · 0 评论 -
Compose Compiler 与 Kotlin 的版本兼容性
有时 Android Studio 的 build.gradle 中会提示 Compose 有了新版本,但是如果升级不当可能会出现编译错误,比如下面这样的搭配就会出现 build error比如当我试图将 1.2.0-rc02 升级到 1.2.0 时,会发生以下编译错误原因是 Kotlin 与 Compose Compiler 版本不匹配。原创 2022-09-23 09:00:00 · 5915 阅读 · 5 评论 -
深入理解 Compose Navigation 实现原理
Compose 中的 NavHost 本质上是一个 Composable 函数,与中的同名接口没有派生关系,但职责是相似的,主要目的都是构建 NavGraph。NavGraph 创建后会被 NavController 持有并在导航中使用,因此 NavHost 接受一个 NavController 参数,并为其赋值 NavGraph//... //设置 NavGraph navController . graph = graph //... }...原创 2022-09-01 08:30:00 · 3541 阅读 · 4 评论 -
《Jetpack Compose 从入门到实战》带你踏上 Compose 开发之旅~
Jetpack Compose 从入门到实战,新书上架,谷歌开发者社区 & Kotlin中文社区 & Compose中文社区 联合推荐原创 2022-08-02 09:00:00 · 3217 阅读 · 7 评论 -
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
前面基于代码片段进行了一些对比,最后以CounterDemo为例,看一个完整功能下Flutter、Compose和Swift的代码对比,React与其他三者代码风格差异较大,就不参加比较了。FlutterComposeSwiftUI可以感觉到Compose代码最简洁也最直观,SwiftUI通过ViewBuilder机制也可以实现与Compose类似的DSL,表现也非常不错,Flutter由于模板代码较多,在简洁程度上表现最差。httpshttpshttps。...原创 2022-08-01 09:00:00 · 2178 阅读 · 6 评论 -
Compose 类型稳定性注解:@Stable & @Immutable
Compose会针对稳定类型进行编译期优化,通过对输入参数的比较跳过不必要的重组稳定类型包括所有的基本型、String类型、函数类型,以及符合以下条件的非基本类型非interface所有public属性均为final所有public属性均为稳定类型或者MutableState通过添加@Stable或者@Immutable注解可以提升重组性能,注解的使用要慎重跨Module引用数据类型时,需要通过辅助手段提升其稳定性。...原创 2022-07-28 09:00:00 · 3794 阅读 · 6 评论 -
深入理解 Jetpack Compose 内核:SlotTable 系统
Compose 的绘制有三个阶段,组合 > 布局 > 绘制。从组合到上屏的一系列过程中主要是依靠 SlotTable 系统来完成,SlotTable 记录了 Composiiton 的状态,当 SlotTable 的状态发生变化时,会触发 LayoutNode 树的更新,实现 UI 重新渲染。......原创 2022-06-27 15:28:22 · 2221 阅读 · 5 评论 -
Jetpack Compose 动画开发实践:微博长按点赞彩虹
Compose 在动画方面下足了功夫,提供了种类丰富的 API。但也正由于 API 种类繁多,如果想一气儿学下来,最终可能会消化不良,导致似懂非懂。结合例子学习是一个不错的方法,本文就带大家边学边做,通过实现一个微博长按点赞的动画效果,学习和了解 Compose 动画的常见思路和开发技巧。|原版效果高仿效果1. Compose 动画 API 概览Compose 动画 API 在使用场景的维度上大体分为两类:高级别 API 和低级别 API。就像编程语言分为高级语言和低级语言原创 2022-05-30 01:39:09 · 1191 阅读 · 0 评论 -
带你了解 Jetpack Compose 快照系统
Compose 通过名为“快照(Snapshot)”的系统支撑状态管理与重组机制的运行。快照具备对 State 的读写感知和隔离的作用,可以保证并发安全,提升性能原创 2022-05-09 00:43:15 · 1497 阅读 · 0 评论 -
Jetpack Compose 动画 API: AnimatedVisibility & AnimatedContent
Jetpack Compose 的动画相关的 API 数量众多,分为低级别 API 和高级别 API,其中高级别 API 便于使用者针对具体场景开箱即用 ,其中最常用的当属 AnimatedVisibility 和 AnimatedContent 这两个了。1. AnimatedVisibilityAnimatedVisibility 顾名思义是用动画的方式改变 UI 元素的 Visibility,具体来说就是针对让其内部的 Composable 以动画的形式进入或退出屏幕AnimatedVisi原创 2022-01-24 09:00:00 · 1454 阅读 · 2 评论 -
Jetpack Compose 无限加载列表(滚到底部自动加载更多)
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢?两种方法可供选择:基于 paging-compose自定义实现方法一: paging-composeJetpack 的 Paging 组件提供了对 Compose 的支持dependencies { ... // Paging Compose implementation "androidx.pagin原创 2022-01-16 17:26:48 · 5937 阅读 · 6 评论 -
Compose Multiplatform 正式版将于年内发布
近日,JetBrains 公司发布了 Compose Multiplatform 的 Beta 版本,这距离此前 Alpha 版本的发布才过去两个多月。这个版本中包含了许多新的改进,在桌面端与Web端分别增加了新的 API ,并对已有的部分 APIs 进行了稳定。Beta 版的发布意味着距离 1.0 正式版更近了一步,另据官方透漏正式版最早将于年内发布。Jetpack Compose 是 Android 最新推出的声明式 UI 工具包。JetBrains 受到 Jetpack Compose 的启发,原创 2021-11-28 23:11:32 · 2250 阅读 · 0 评论 -
Jetpack Compose 易犯错误之:在 LazyColumn 中访问 LazyListState
我们在使用 LazyColumn 或者 LazyRow 时,应该避免在 LazyListScope 中访问 LazyListState,这可能会造成隐藏的性能问题,看下面的代码:@Composablefun VerticalList(items: List<String>, onReachedBottom: () -> Unit) { val listState = rememberLazyListState() LazyColumn(state = listStat原创 2021-11-27 21:51:01 · 3701 阅读 · 1 评论 -
【Android】实战图像识别:Compose + MLKit + CameraX
MLKit 是 Google 提供的移动端机器学习库,可以在 Andorid 或 iOS 上低成本地实现各种 AI 能力,例如图像、文字、人脸识别等等,而且很多能力可以在手机端离线完成。https://developers.google.com/ml-kit下面通过代码示例展示 MLKit 的以下功能:图像识别(Image Labeling)目标检测(Object Detection)目标追踪(Object Tracking)1. 图像识别(Image Labeling)图像识别是原创 2021-11-25 13:57:35 · 9816 阅读 · 3 评论 -
Jetpack Compose 动态权限申请(Permission Request)
在 Jetpack Compose 动态申请权限可以使用两种方法rememberLancherForActivityResultAccompanist 的 Permissions接下来分贝展示一下两种用法代码环境如下:Kotlin 1.5.2Jetpack Compose 1.0.2Android Studio Chipmunk | 2021.2.1要使用 Accompanist 需要额外引入dependencies { ... implementation "co原创 2021-11-13 20:28:47 · 7819 阅读 · 3 评论 -
ComposeOptions.kotlinCompilerVersion is deprecated
我为我的 Compose 工程升级 AGP 后 (7.0.0 > 7.0.2)重新编译发生下面错误ComposeOptions.kotlinCompilerVersion is deprecated. Compose now uses the kotlin compiler defined in your buildscript.以前需要通过该 composeOptions 指定 Kotlin 版本升级后,直接复用 buildScript 的 Kotlin 版本, composeOptio原创 2021-11-06 20:23:37 · 3313 阅读 · 0 评论 -
展望2022:Android开发技术动向
每年9/10月份 Google 都会举行为期约2天的 Android Dev Summit,在活动上 Google 的技术专家们会分享一些 Android 领域的技术动向以及开发心得。今年 Summit 的 Slogan 是 “Excellent apps,across devices” , 即使用 Jetpack 等 MAD Skill (Moden Android Development) 开发出更优秀的应用,并通过 Android 系统落地到更多种类的智能设备。本次活动围绕这一主旨做了 30 多场原创 2021-11-04 18:37:13 · 1948 阅读 · 0 评论 -
Compose Multiplatform 实战:联机五子棋
1. 认识 Compose MultiplatformJetpack Compose 作为 Android 端的新一代UI开发工具,得益于 Kotlin 优秀的语法特性,代码写起来十分简洁,广受开发者好评。作为 Kotlin 的开发方,JetBrains 在 Compose 的研发过程中也给与了大量帮助,可以说 Compose 是 Google 和 JetBrains 合作的产物。在参与合作的过程中,JetBrains 也看到了 Compose 在跨平台方面的潜力,Compose 良好的分层设计使得原创 2021-10-24 21:32:55 · 9061 阅读 · 0 评论 -
Jetpack Compose 实现波浪加载效果
最近用 Compose 实现了一个波浪效果的进度加载,如上图所示。API 在设计上符合 Compose 的编码风格,使用非常简便。1. 使用方式在 root 的 build.gradle 中引入 jitpack,allprojects { repositories { ... maven { url 'https://jitpack.io' } } }在 module 的 build.gradle 中引入 ComposeWaveLoading 的最新版本dependenc.原创 2021-10-01 09:04:20 · 1525 阅读 · 0 评论 -
Jetpack Compose 中使用 Lottie 动画
从事 Android 开发的 都知道 airbnb 的 Lottie 库,如今它也支持在 Jetpack Compose 中使用了原创 2021-09-27 03:44:26 · 1761 阅读 · 0 评论 -
100行代码写一个Compose版华容道
之前写过几个 Compose 的 demo,但一直没使用到 Gesture, Theme 等特性,于是写了一个华容道的小程序来展示上述这些特性。写完后又一次被 Compose 的生产力所折服,整个程序的完成不足百行代码,这在传统开发方式中是难以想象的。代码地址:https://github.com/vitaviva/compose-huarongdao基本思路游戏逻辑比较简单,所以没有使用 MVI 之类的框架,但是整体仍然遵从数据驱动UI的设计思想:定义游戏的状态基于状态的UI绘制用户.原创 2021-08-27 15:08:30 · 6544 阅读 · 7 评论 -
Compose Multiplatform 正式官宣,与 Flutter 迟早必有一战?
7月底 Compose for Android 1.0 刚刚发布,紧接着 8月4日 JetBrains 就宣布了 **Compose Multiplatform** 的最新进展,目前已进入 alpha 阶段。原创 2021-08-10 10:39:59 · 9191 阅读 · 10 评论 -
Jetpack Compose Runtime 与 NodeTree 管理
Jetpack Compose 不只是一个 UI 框架,更是一个通用的 NodeTree 管理引擎。本文介绍 compose.runtime 如何通过 NodeTree 为compose.ui 提供支持。大家知道 Jetpack Compose 不仅限于在 Android 中使用 ,Compose For Desktop、 Compose For Web 等项目也已相继发布,未来也许还会出现 Compose For iOS 。Compose 能够在不同平台上实现相似的声明式UI开发体验,这得益于其分..原创 2021-06-22 00:30:05 · 1480 阅读 · 2 评论 -
Jetpack All In Compose ?看各种Jetpack库在Compose中的使用
Jeptack Compose 主要目的是提高 UI 层的开发效率,但一个完整项目还少不了逻辑层、数据层的配合。幸好 Jetpack 中不少组件库已经与 Compose 进行了适配,开发者可以使用这些 Jetpack 库完成UI以外的功能。Bloom 是一个 Compose 最佳实践的 Demo App,主要用来展示各种植物列表以及详细信息。接下来以 Bloom 为例,看一下如何在 Compose 中使用 Jetpack 进行开发1. 整体架构:App Architecture在架构上,Blo原创 2021-06-15 12:47:46 · 14146 阅读 · 34 评论 -
Jetpack Compose 架构比较:MVP & MVVM & MVI
本次 I/O 大会上曝出了 Compose 1.0 即将发布的消息,虽然 API 层面已趋于稳定,但真正要在项目中落地还少不了一套合理的应用架构。传统 Android 开发中的 MVP、MVVM 等架构在声明式UI这一新物种中是否还依旧可用呢?本文以一个简单的业务场景为例,试图找出一种与 Compose 最契合的架构模式Sample : Wanandroid SearchApp基本功能:用户输入关键字,在 wanandroid 网站中搜索出相关内容并展示功能虽然简单,但是集合了数据请求、U.原创 2021-06-01 00:55:46 · 4516 阅读 · 38 评论 -
Compose 1.0 将于7月正式发布,还不了解一下?
前几天结束的 Google I/O 大会上释放了 Compose 1.0 即将于7月发布的消息。其实从年初 Beta 版的一系列造势活动就能看出 Google 在 Compose 推广上的决心之大。如今随着稳定版的到来,现在正是学习 Compose 的好时机,本文将带大家了解一下 Compose 将为 Android 开发带来哪些变化。1. 为什么要用 Compose ?Jetpack Compose is Android’s modern toolkit for building native.原创 2021-05-26 03:21:33 · 700 阅读 · 11 评论 -
Jetpack Compose: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from DecorView
问题升级了一下Compose版本(1.0.0-beta01 -> 1.0.0-beta05),当打开Activity或者Fragment时报出如下错误: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from DecorView@58d6ed7[MainActivity] at androidx.compose.ui.platform.WindowRecomposer_androidKt.c原创 2021-05-23 20:56:19 · 2356 阅读 · 7 评论 -
用Jetpack Compose做一个俄罗斯方块游戏机
本文介绍如何使用Jetpack Compose打造一个经典版的俄罗斯方块游戏。玩过上面这种游戏机的朋友应该会对本文内容感到亲切,废话不多说,先看东西:1. 为什么Compose适合做游戏?通常一个游戏程序的执行流程如下所示:简单说就是一个不断等待输入、渲染界面的过程。这种模型非常符合当下前端的开发思想:数据驱动UI。 因此基于各种前端框架的小游戏层出不穷。相比之下,用客户端开发同类应用成本则会高出不少。如今有了Compose,客户端终于在开发范式上追上了前端的步伐,像前端那样开发小游戏成原创 2021-04-20 10:00:22 · 2425 阅读 · 19 评论 -
Jetpack Compose:理解composable的重组范围(Recomposition Scope)
不少初学Compose的同学都会对Composable的Recomposition(重组or重绘)机制心生顾虑,担心大范围的Recomposition是否会影响性能。其实Compose的Compiler在编译期做了大量工作,保证了Recomposition的范围尽可能的小,从而避免无效开销。那么Recomposition的范围究竟是怎样的呢?我们通过一个例子来了解一下@Composablefun Foo() { var text by remember { mutableStateOf("")原创 2021-04-12 21:08:20 · 2219 阅读 · 2 评论 -
告别GIF,使用Jetpack Compose打造可爱的天气动画
1. 项目背景最近,为了参加Jetpack Compose挑战赛的终极挑战,使用Compose完成了一个天气app。之前几轮挑战也都有参与,每次都能学到不少新东西。如今迎来最终挑战,希望能将这段时间的积累活学活用,做出更加成熟和出色的作品。项目中的挑战因为没有美工协助,所以我考虑基于代码实现app中的所有UI元素例如各种icon等,这样的UI在任何分辨率下都不会失真,更灵活地实现各种动画效果。为了降低实现成本,我将app的UI元素定义成偏卡通的风格,这样可以更容易通过代码绘制,如文章顶部展示的那些.原创 2021-03-28 21:08:42 · 2670 阅读 · 17 评论 -
告别XML,使用Compose Theme为你的app轻松换皮
1. Compose挑战赛第三周关注过我前面文章的朋友应该对最近举行的Compose挑战赛有所了解,本周挑战赛进入到第三轮。#AndroidDevChallenge Week 3与前两轮规则不同,本轮主要是比拼速度。只有第一个按要求完成并提交的人能胜出,奖品是Pixel 5手机一台。题目要求基于Compose完成以下三个页面,Google会提供完成页面必须的一些资源以及视觉设计稿。题目本身难度不高,主要是拼手速。自从结婚后老夫的手速退化严重,top1出线就不指望了,但本着重在参与的精神仍然坚持完原创 2021-03-14 01:54:58 · 3656 阅读 · 21 评论 -
LaunchedEffect:在Jetpack Compose中使用协程
LaunchedEffectLaunchEffect允许我们在Composable中使用协程@Composable fun DisposableEffect( vararg keys: Any?, effect: DisposableEffectScope.() -> DisposableEffectResult): Unit像DisposableEffect一样,当Composable进入composition时执行block当Composable从树上detac.原创 2021-03-08 00:06:00 · 8302 阅读 · 1 评论 -
使用Jetpack Compose竟能做出如此漂亮的倒计时APP
Jetpack Compose开发者挑战赛迎合Jetpack Compose beta版的发布,Google官方发起了Compose开发者挑战赛活动,目前已经入第二周。第二周的题目是一个完成一个倒计时APP ,可能涉及到state以及animation的使用: android-dev-challenge-2我的作品废话少说,先看一下我提交的项目...原创 2021-03-07 02:32:56 · 3317 阅读 · 8 评论 -
对Jetpack Compose设计的初步解读与思考
原文链接:https://www.jianshu.com/p/7bff0964c767Jetpack Compose前段时间进入了Alpha阶段。经过去年年底至今剧烈的api变化后,现在Compose整体上大致稳定,所以我们也能对于Compose的设计进行初步的解读和评价了。Compose从整体技术风格上来说是这样一个产物:在语法上激进模仿SwiftUI,编译/运行过程充满Svelte风格,同时也综合了各方包括Android开发组自身对UI框架的思考结果。使用Compose时,最值得关注的就是C..转载 2021-03-02 15:15:23 · 903 阅读 · 2 评论 -
Jetpack Compose Animations 超简单教程
Node:本文基于Jetpack Compose 1.0.0-beta01Animation是由state驱动的Compose的核心思想状态驱动UI刷新,这一思想同样体现在动画上。Compose动画主要是通过不断计算最新的state值来刷新UI,这类似于传统的ValueAnimator,根据动画的插值器和估值器计算当前value,在映射到View的对应属性。Compose天然是基于state驱动的,相关API变得更加简单、合理。AnimateAsState:属性动画AnimateAs..原创 2021-03-02 02:55:46 · 3565 阅读 · 0 评论 -
Jetpack Compose迎来Beta版!!快来参加Android开发挑战赛!!
Jetpack Compose迎来Beta版本近日,Jetpack Compose发布了第一个beta版本1.0.0-beta01,官方Samples也第一时间进行了同步升级。通过Release Note可以看到,本次新版本跟之前历次alpha版本的迭代一样依然以大量API的调整为主,很多API名字或接口签名发生变化,此外就没什么里程碑式的更新了,所以beta01说是alpha13也不为过。这宣布着Compose进入了一个新的阶段,按照目前进度,有可能在年底之前迎来正式版的发布AndroidDevC原创 2021-02-28 00:58:04 · 574 阅读 · 4 评论