降Compose十八掌之『亢龙有悔』

公众号「稀有猿诉」

Jetpack Compose是新一代的声明式的UI开发框架,由Google在2019年推出,最初是作为Android的新式UI开发框架,但它本质是一个声明式UI开发框架,并不受制于底层的平台,现在的Compose已有跨平台开发能力,但Android上的UI开发仍是最主要的使用领域,深受Android开发者喜爱。计划将用一系列文章,并开辟专栏来学习Compose,此为开篇。

注意:最初是叫做Jetpack Compose,作为Jetpack套件中的一个,后来与Jetpack独立开来了,现在Compose发展成为一个独立的声明式的UI开发框架,与Jetpack中其他组件并不是同一个概念,也并不在Jetpack套件里面。所以现在更多的称为Compose,为了方便后续统一称为Compose。

Hello, Compose!

老规矩,先来个简单的『Hello, world!』,以快速上手体验:

首先,用Android Studio创建一个新的项目,选择『Phone and Tablet』,选择『Empty Activity』,然后Next。

在项目配置页面填入项目名字和包名等信息,其余的用默认就好。

等一会儿后,项目就创建好了,与常规的Android项目一样的,也有AndroidManifest,是项目运行时的主要配置,以及一个系统组件MainActivity作为入口。打开MainActivity.kt,可以发现里面已经默认用了Compose,并且有东西,我们稍改一下,改成下面的样子:

Kotlin 复制代码
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android with Compose!")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello, $name",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HelloComposeTheme {
        Greeting("Android")
    }
}

然后构建并运行项目,就能得到一个『Hello, Android with Compose!』:

样子略丑,我们来优化一下,修改Greeting函数:

Kotlin 复制代码
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = "Hello, $name",
            modifier = modifier
                .padding(16.dp)
                .align(Alignment.Center),
            style = MaterialTheme.typography.headlineLarge,
            color = MaterialTheme.colorScheme.inverseSurface
        )
    }
}

这下好了一丢丢!

除了在手机或者模拟器运行应用以外,还可以直接用Android Studio进行预览(用@Preview标记的函数才会被预览),不过这不算新功能,因为很久以前打开一个XML文件(如布局),也可以直接在AS里预览的:

好了,现在我们已经成功学会用Compose来撸安卓UI了。如果有时间还可以试试官方的入门Demo

注意:不同版本的Android Studio可能会略不一样。详见下节『开发环境配置』。

配置开发环境

新一点的Android Studio如Giraffe,如果是新建的项目,默认就是用Compose了,不用再怎么搞(如果是上古时代的AS估计还是基于View的,建议直接升级AS吧,都4202年了)。

如果是现有的项目,想要添加Compose支持,可以这样做,先给android的buildFeatures中添加compose为true,并指定kotlin compiler extension的版本,注意这个并不是kotlin的版本,跟它没关系:

Kotlin 复制代码
android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.13"
    }
}

然后再配置一坨依赖:

Kotlin 复制代码
dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2024.05.00")
    implementation(composeBom)

    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")

    // Material Design 3
    implementation("androidx.compose.material3:material3")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}

为了方便管理Compose依赖的版本,谷歌搞了一个叫做『物料清单』(Bill of Materials BOM),简单来说就是把Compose所有library的版本放到一个叫做BOM的library中,我们只需要指定一个BOM,这样,就能指定一坨Compose libraries的版本。详细的内容以及困难解决可以参考官方文档

理解Compose的基本原理

从我们的『HelloCompose』中可以看出Compose的特点,它是纯代码,Compose就是一个坨函数声明,不用再撸XML了;它是声明式的,也就是说你只是告诉框架需要什么,期望的样子是什么;它是响应式的,也就是说拿到最新的数据和状态,然后用相应的UI元素进行展示。这与以往用XML写UI是完全不同的,用XML是命令式的,你要拿到View,设置具体的细节。

用Compose撸UI主要分为两部分,一是元素,如布局和具体的渲染元素如文字图片;另一个则是样式控制,所有元素都能接受一个Modifier对象来控制元素的样式,如大小,位置,偏移,对齐等等。会在后面的文章中对这些概念进行详细的讨论。

另外需要注意,Compose就是一坨函数,上面例子中看到的『setContent』,『HelloComposeTheme』,『Suface』,『 Greeting』,『GreetingPreview』,『Box』,『Text』都是函数,虽然它们不符合Kotlin的函数命令规范。这里面套娃式的结构如:

Kotlin 复制代码
    setContent {
        HelloComposeTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                 Greeting("Android with Compose!")
            }
       }
    }

是借助于尾部lambda实现的内部DSL,本质上也都是函数调用,视为函数调用就好了。感觉不熟悉的同学可以看看前面的文章以加深理解。

为啥要使用Compose

就Android开发来说明明已经有比较完善的View和XML来撸UI,为啥还要搞一个Compose呢?

首先,声明式编程范式是最新式的UI构建方式,较原始方式(View和XML)它更加接近于人的思维。开发者只需要告诉架构『我要什么』以及『该如何响应』就可以了,其他事情都交给框架。像Flutter, React, SwiftUI等都是声明式的。一旦我们熟悉了以后,就会发现声明式UI可以极大的提高开发效率,最重要的是它能提高可扩展性(Scalability)。

再有,Compose与各种最新的libraries粘合的特别好,像JetpackMaterialDesign等等,都可以直接在Compose中使用,非常的方便。

最后,最重要的原因是Google在大力的布道Compose,已经把Compose设置为默认的UI开发方式,作为MAD(Modern Android Development)的一块拼盘,新推出的有关于UI的文章都是基于Compose的。并且Google还在不断大力开发Compose,推出新功能以及提升渲染性能。从前面的例子也可以看出,现在默认新建一个项目就是用的Compose,相反,如果想要弄一个只用View的项目,还比较麻烦,要去除一系列配置参数。

作为开发者,肯定要顺应潮流,迎头敢上(对的,是敢而不是赶)。

迁移建议

Compose虽然新式且好用,但我们在做迁移的时候要谨慎。对于新的技术(无论是新的编程语言,新的框架,还是新的编程范式)切忌不要一刀切或者搞大跃进。对于,纯新的功能,或者说纯新的项目,当然可以直接就用Compose来开发;但是对于现有的功能,暂时不要去动它,万不可上来就想着用Compose重写一遍。等到对Compose比较熟悉了,人力较富余时,以及现在功能仍会有新的较大的改动时才考虑去重写。对于比较成熟且稳定的功能,建议就不要去折腾它了,因为不会带来价值和收益。

官方也有迁移建议,可以看一看。

优质教程与实例

Google对Compose还是很上心的,写了大量的文档,此外还有很多教程(CodeLabs),以及很多Demo app。并且Compose作为MAD的一块拼盘,也融合进了MAD里面,特别是架构层面的文章中用的都是Compose。

未完,待续

本文从快速上手的Demo开始,解释一些核心概念,并给出一些有用的资源链接。相信通过此文,能对Compose有一个很好的了解。后续会继续深入探讨各个话题,以练成降Compose十八掌!

欢迎搜索并关注 公众号「稀有猿诉」 获取更多的优质文章!

原创不易,「打赏」「点赞」「在看」「收藏」「分享」 总要有一个吧!

相关推荐
枯骨成佛42 分钟前
Android中Crash Debug技巧
android
kim56596 小时前
android studio 更改gradle版本方法(备忘)
android·ide·gradle·android studio
咸芝麻鱼6 小时前
Android Studio | 最新版本配置要求高,JDK运行环境不适配,导致无法启动App
android·ide·android studio
无所谓จุ๊บ6 小时前
Android Studio使用c++编写
android·c++
csucoderlee7 小时前
Android Studio的新界面New UI,怎么切换回老界面
android·ui·android studio
kim56597 小时前
各版本android studio下载地址
android·ide·android studio
饮啦冰美式7 小时前
Android Studio 将项目打包成apk文件
android·ide·android studio
夜色。7 小时前
Unity6 + Android Studio 开发环境搭建【备忘】
android·unity·android studio
ROCKY_8178 小时前
AndroidStudio-滚动视图ScrollView
android
趴菜小玩家9 小时前
使用 Gradle 插件优化 Flutter Android 插件开发中的 Flutter 依赖缺失问题
android·flutter·gradle