乐翁龙

距离上次写文章过去小半年了，开年后一直在应用下架与上架之间反复横跳，隐私合规与违规之间来回游走，真的是焦头烂额。不过好在基本摸清了国内各大应用商店上架的相关规则，以及马甲包判定的相关原理。

简直没想到啊，作为一个Android开发者，现在借助Compose Desktop开发起桌面端居然能这么的轻车熟路！

开篇闲谈这两年负责的都是面向海外（欧美、中东等）的项目，之前在View的时代下总结了一套国际化与本地化的经验，见《Android 国际化与本地化探索》，文中事无巨细的从 语言翻译 、 UI设计 、 代码规范 三个方面阐述了我的解决方案。切换到到Compose后，又完全处理了一遍国际化的流程。同时发现在适配暗黑模式中Compose提供了开箱即用的支持，大大简化了我们的开发难度，这篇文章就将经验分享给大家。文中若有纰漏之处，还望大家不吝赐教。国际化与本地化关于国际化中的翻译规范以及UI设计规范，这里就不

开篇废话无奈放假前又出了两个需求，忙活到昨天终于是上线了。 打开掘金发现大家都在创意闹新春，有放烟花的，有写福、写春联的，有年兽作战小游戏的，还有画虎的。该说不说，‘你们掘金花活儿挺多啊’！我也来参与了，真香~写这篇文章呢是看到了前端同学使用Echarts画的老虎（ 《辞旧迎新 2022 我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。》）。这老虎确实可以，我就同样直接拿来了，感谢iconfont作者Eve！实现目标这篇文章我们就利用Compose的Canvas来一块一块的绘制出一只.

前言Jetpack Compose在2021年7月底的时候正式发布了Release 1.0版本，在8月中旬的时候正好赶上公司海外项目计划重构，于是主动请缨向领导申请下来了此次开发的机会。由于之前一直在关注Compose，所以直接扬言要使用Compose来完成全部的UI（事实上也基本达到了目的）。原本的项目是2017年基于Java+MVP++等的架构，此次则全部推倒重来，基于Kotlin+MVVM/MVI+Jetpack++等的架构。​此次项目重构涉及的技术点如下：KotlinCoroutin

文章目录Compose主题需求一览默认的主题自定义主题实现需求Colors属性不够用？Compose主题Compose提供了系统化的方法来帮助我们自定义主题，这让我们在实现暗黑主题以及其他颜色主题的时候非常非常的方便。需求一览这节的需求很简单，我们的App需要有蓝，红，绿，黄四种主题色，在点击tab的时候分别切换不同的主题色，大致效果如下所示。默认的主题比如我们的工程名叫ComposeComing，那么工程建好后默认的Activity中会有如下代码：setContent { Comp

文章目录Compose如虎添翼 -- 搭配Flow、Room！！！一、需求一览二、Compose UI开发三、Room集成及使用3.1、在使用kotlin编写的gradle脚本中集成3.2、使用方式3.2.1、数据库表（Table）3.2.2、数据访问对象（DAO-DataAccessObjects ）3.2.3、数据库（Database）3.2.4、添加节气数据到数据库四、Compose + Flow五、小结Compose如虎添翼 – 搭配Flow、Room！！！Compose系列文章，请点原文阅读

文章目录Compose如虎添翼 -- 搭配ViewModel、LiveData！！！一、需求一览二、架构、流程三、Compose UI开发3.1、搜索框3.2、折线图四、ViewModel 业务开发五、Compose和ViewModel建立关系六、总结Compose如虎添翼 – 搭配ViewModel、LiveData！！！单纯的使用Compose来进行UI的展示，相信我们已经运用自如了，接下来的文章我们一起搭配其他Jetpack组件，例如LiveData，ViewModel、Room等来了解下Comp

Jetpack Compose - Canvas之BlendMode0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍关于混合模式，具体请看 官网链接。在画布上绘制时使用的算法。将形状或图像绘制到画布上时，可以使用不同的算法来混合像素。 BlendMode的不同值指定了不同的此类算法。1、属性一览关于混合模式，有多达十几种，请直接异步下文查看示例。2、使用示例我们以经典的黄色圆形，蓝色矩形混合来展

Jetpack Compose - Canvas0、介绍1、属性一览2、使用示例2.1、drawArc2.2、drawCircle2.3、drawImage2.4、drawLine2.5、drawOval2.6、drawPath2.7、drawPoints2.8、drawRect，drawRoundRect3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍Canvas 是允许您在屏幕上指定区域并在此区域上执行绘制的组件。您必须使用修饰符指定

Jetpack Compose - animateXxxAsState0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍根据官网对所有相关的animateXxxAsState()函数做了一个简单的总结。Fire-and-forget animation function（自主制导的动画函数？）。对于不同的参数类型（例如Float，Color，Offset等），此Composable函数将重载。更改提供的ta

Jetpack Compose - Scaffold、SnackBar0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍脚手架实现了Material设计的页面基本结构。该组件通过确保其适当的布局策略从而将其他的多个组件组合在一起构成页面。其实也就是说该组件提供了组合各个组件的API，包括标题栏、底部栏、SnackBar（类似吐司功能）、浮动按钮、抽屉组件、剩余内容布局等，让我们可以快速定义一个基本的页面结

Jetpack Compose - Slider0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍拖动条，默认包含了一个滑块和一个滑动轨道。其允许用户在一个数值范围内进行选择。1、属性一览【目前基于alpha 11版本】请看该函数：@Composable fun Slider( value: Float, onValueChange: (Float) -> Unit,

Jetpack Compose - Modifier入门篇0、介绍1、属性一览1.1、androidx.compose.foundation.layout包1.2、androidx.compose.ui.draw包1.3、androidx.compose.foundation包2、使用示例2.1、paddingFromBaseline2.2、background3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍一个 有序的、不可变的修饰元素

Jetpack Compose - LazyVerticalGrid0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍可以实现网格列表布局。（注意此API暂时还不稳定，有可能更改！）在alpha 10的版本中，官方提供了该API，目前基于alpha 11版本进行演示。1、属性一览【目前基于alpha 11版本】请看该函数：@Composable fun LazyVerticalGrid( c

Jetpack Compose - RadioButton0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍表示两个状态的组件，包含已选中和未选中状态在XML中RadioButton一般需要配合RadioGroup来实现单选功能。但是在Compose中，完全没有了RadioGroup的概念，因为你整个视图是数据驱动的，所以只要保证数据是你想要的即可，无论是单选还是多选，都可以实现。而且需要注意一点，这个

Jetpack Compose - TabRow、ScrollableTabRow0、介绍0.1、TabRow0.2、ScrollableTabRow0.3、Tab1、属性一览1.1、TabRow：1.2、ScrollableTabRow1.3、Tab2、使用示例2.1、TabRow3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍0.1、TabRowTabRow包含一行Tab，并在当前选定的Tab下方显示一个指示器。 TabRow将其T

Jetpack Compose - TopAppBar、BottomAppBar0、介绍1、属性一览1.1、TopAppBar1.2、 BottomAppBar2、使用示例2.1、 TopAppBar2.2、 BottomAppBar3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍关于AppBar其实就是XML中的androidx.appcompat.widget.Toolbar，关于这个控件可能我们大家用的不会很多，一般都是自己自定义的，

Jetpack Compose - DropdownMenu0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍一个下拉菜单。菜单具有一个切换按钮，它是生成菜单的元素。例如一个图标，点击该图标可以触发菜单。 DropdownMenu的内容可以是DropdownMenuItems，也可以是自定义内容。1、属性一览【目前基于alpha09版本】函数如下：@Composable fun DropdownMen

Jetpack Compose - CircularProgressIndicator、LinearProgressIndicator0、介绍1、属性一览2、使用示例2.1、 CircularProgressIndicator 无限循环：2.1、CircularProgressIndicator按进度变化2.3、LinearProgressIndicator无限循环2.4、LinearProgressIndicator按进度变化2.5、为进度添加动画3、版本更新4、未解决问题Compose系列文章，请点

Jetpack Compose - AlertDialog0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍AlertDialog是一个用紧急信息，详细信息或操作打断用户的对话框。1、属性一览【目前基于alpha09版本】请看该对话框支持的两个函数，首先看第一个函数，该函数会根据可用空间水平放置其按钮：@Composable fun AlertDialog( onDismissRequest:

Jetpack Compose - AnimatedVisibility0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！这篇文章之后就是重点学习下动画相关的内容了，Compose的动画和xml的各种动画等有很大的不同了，不要拘束于之前的想法。目前动画还在实验阶段，所以我们浅入浅出，不做过多的研究。0、介绍首先官方给了我们一个开箱即用的动画函数 AnimatedVisibility，先来看先官方给它的定义：随着

Jetpack Compose - ConstraintLayout0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文：是时候学习Compose了！0、介绍在xml的时代我们已经了解过了ConstraintLayout的强大功能，比例、相对位置、引导线、屏障、链条等让我们开发页面布局可以大展身手。那么在Compose的时代，ConstraintLayout是如何使用的呢？首先官方给它的介绍很简单：根据子项之间的约束，定位子项的布局。但是实际

Jetpack Compose - LazyRow、LazyColumn0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍前面我们学习了可以滚动的视图ScrollableRow、ScrollableColumn，当内容过长时可以使其子级进行滚动展示。但是如果遇到超长列表的情况，滚动视图就不可用了，因为滚动视图没有缓存机制，当列表过长的时候，很容易造成内存溢出的情况。所以这篇文章大就一起来看下Compose给出

Jetpack Compose - ScrollableRow、ScrollableColumn0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍前面文章我们学习了Row和Column，当子级的内容超过Row和Column的宽高时，子级内容无法全部展示出来，布局会出现异常。所以针对这种情况，官方给出了ScrollableRow、ScrollableColumn的布局方案，来看下官方的介绍。Scrollab

Jetpack Compose - Row、Column0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍首先大致了解下这两个布局：Row ：水平布局，官方介绍如下可以组合的布局，会将其子级 横向 进行放置。如果需要 竖向 进行放置，请参考Column。如果需要子级可以 横向滚动 ，请参考ScrollableRow。如果需要只展示当前可见项 的 横向滚动列表请参考 LazyRow。Colu

Jetpack Compose - Box0、介绍1、属性一览2、使用示例3、版本更新4、未解决问题Compose系列文章，请点原文阅读。原文，是时候学习Compose了！0、介绍针对Box布局，官方介绍如下：可以和内容组合的布局，Box会根据传入的限制（我理解为：Box的Modifier修饰符属性以及content包含的属性）自行调整大小以适应内容。如果需要指定content的对齐方式，请使用Alignment。如果Box中包含多个布局子级时，这些子级将按照组成顺序 “堆叠” 起来（所以

Jetpack Compose - CheckBox1、属性一览2、使用示例3、版本更新4、未解决问题1、属性一览【目前基于alpha08版本的属性】首先直接看下属性，链接在这里：@Composable fun Checkbox( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true,

Jetpack Compose - Switch1、属性一览2、使用示例3、版本更新4、未解决问题1、属性一览【目前基于alpha08版本的属性】首先直接看下属性，链接在这里：@Composable fun Switch( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, inte

Jetpack Compose - Button1、Button1.1、属性一览1.2、使用示例2、IconButton2.1、属性一览：2.2、使用示例3、IconToggleButton3.1、属性一览3.2、使用示例待补充未解决问题关于Button官方给出了很多种样式，有Button、IconButton、IconToggleButton、TextButton、OutlinedButton等，还有一个RadioButton我们会单独开文章去讲解。1、Button1.1、属性一览我们先来看下 B

Jetpack Compose - Icon1、属性一览2、使用示例3、未解决问题1、属性一览首先直接看下官网给的Icon的三种方法，链接在这里：@Composable fun Icon( imageVector: ImageVector, modifier: Modifier = Modifier, tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current)):

Jetpack Compose - TextField1、属性一览2、使用示例3、未解决问题1、属性一览关于输入框，官方提供了两种类型，TextField和OutlinedTextFiedl。先看下两种输入框最简单的效果，上面是普通的TextField效果，跟之前的EditText默认效果一致，第二种是OutlinedTextField效果，带有一个边框：首先看下TextField的两个函数，链接在这里：@Composable fun TextField( value: String,

Jetpack Compose - Image1、属性一览2、使用示例3、未解决问题注意：当前是alpha07版本的Compose，Image控件是在foundation包中的。material包中没有。1、属性一览首先直接看下官网给的方法，链接在这里：@Composable inline fun Image( asset: ImageAsset, modifier: Modifier = Modifier, alignment: Alignment = Alignmen

Jetpack Compose - TextTextText首先直接把常用的参数列出来：@Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Inherit, fontStyle: FontStyle? = null, fontWeight

是时候拥抱Compose了！！！前言计划任务1、控件2、布局前言Android上View.java的存在已经有十多年之久了，代码量也达到了惊人的3万行。而且其他很多的常用控件例如TextView、ImageView等又都直接或者间接继承自View，都说组合优于继承，所以针对View的这个设计，现在看来已经是落伍了。去年（2019）年的时候，在AndroidDevSummit上，Google推出了Compose，当时眼前一亮，觉得Android上的UI开发要有一个全新的明天了。时隔一年，目前Compos