前言
此前我更新了Jetpack Architecture系列的文章,如果你还不了解Jetpack,可以移步至 Android JetPack系列文章 ,持续更新中
从即日起,我将开始持续更新Jetpack Compose系列的文章,Compose将会是原生开发的下一个重大改变!
Jetpack Compose是什么
Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型,因此您只需描述界面的外观,Compose 会负责完成其余工作,界面会随着应用状态的变化而自动更新。
上述是官方的描述,简单的说,在此之前,我们如何实现一个功能?我们是在Activity中编写Java/Kotlin的代码,在xml中编写布局代码,这种方式是我们已经使用了很久的方式,而Jetpack Compose完全抛弃了之前的方式,新创造了一种“使用代码”编写页面的方式,而这种方式,有一个好听的名字,叫做声明式UI。
Flutter VS Jetpack Compose
说到声明式UI,你肯定想到了最近“热火朝天”的 Flutter技术,号称跨各种平台,和Android比优势****,很多人不仅喜欢将Flutter和Jetpack Compose相比,更喜欢和Android相比,并得出了一些结论,那些结论我不去评判对错,我也没有资格去评判,但是如果你问我,一个Android开发者 Flutter、Jetpack Compose或者Android 我该怎么选,我觉得这两种东西根本没有任何可比较性,因为根本就不是一个东西,对于个人选择可以分下面两种情况考虑:
1、公司无跨平台业务需求
如果你的公司无跨平台业务需求,除了跳槽到有Flutter需求的公司,学习Flutter的意义并不大,你可能会反驳说,技多不压身,我不赞同但我也不反驳,但你要知道的是公司是以业务为导向的,你会的再多,所谓一身才华无处施展便也无济于事。
2、公司新增跨平台业务需求
如果你的公司新增了跨平台的业务需求,需要你不得不去学习Flutter,这个时候你要知道的是,从Android转到了Flutter相当于转行,如果你看好公司的发展并打算长久战斗,你就可以去学习并且用在公司业务中,如果你不看好公司的发展或者不想转行,那么只有删库跑路了~
而Compose是Google近两年的大动作之一,如果你想坚持在Android开发的道路上,那么学习或了解Compose定是必不可少的,只是或早或晚的问题。
Jetpack Compose HelloWorld
新建项目
使用Compose我们需要下载Android studio4.2的最新预览版本,我们可以直接新建一个Compose项目,也可以在已有项目中添加配置,这里我们来直接新建一个项目
我们选择新建一个空的Compose Activity项目,依次输入项目位置、填写包名即可。
我们先来运行一下生成项目的默认效果,效果如下图所示:
项目配置
新建成功后,我们首先来看一下build.gradle中几个比较特殊的配置,这也是我们在已经项目中添加Compose所需要配置的
defaultConfig { minSdkVersion 21 } buildFeatures { // 开启compose compose true } //设置编译版本为1.8 compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = "1.8" useIR = true } composeOptions { kotlinCompilerVersion '1.4.0' kotlinCompilerExtensionVersion '1.0.0-alpha05' } } //compose 工具包 dependencies { implementation 'androidx.compose.ui:ui:1.0.0-alpha05' implementation 'androidx.ui:ui-tooling:1.0.0-alpha05' implementation 'androidx.compose.foundation:foundation:1.0.0-alpha05' implementation 'androidx.compose.material:material:1.0.0-alpha05' implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha05' implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha05' implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha05' implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha05' androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha05' }
这里我们使用的compose版本为05版本,compose支持的最低版本是Api 21,所以我们设置最低版本为21.
MainActivity代码
接下来我们来看MainActivity默认生成的代码
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ConposeSimpleTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { Greeting("Android") } } } } } @Composable fun Greeting(name: String) { Text(text = "Hello $name!") } @Preview(showBackground = true) @Composable fun DefaultPreview() { ConposeSimpleTheme { Greeting("Android") } }
在compose中,所有的组合函数 都要使用@Composable注解 ,conposable注释可告知 Compose 编译器,此函数需要转化为页面显示,并且和协程中suspend函数一样,只能在compose注解函数中调用另外一个compose注解函数,@Preview注解是方便开发者在不运行的前提下可预览效果,也就是说DefaultPreview这个函数是开发者自己用的,onCreate中setContent包含的是页面的内容,主题这里我们先忽略,后面再讲解。
Greeting这个函数中,接收一个string类型的name参数,并显示在Text上,这里要注意的是 这里的Text组件和原生的TextView并没有关系,同样的方法我们自定来定义一个HelloWorld,代码如下所示:
setContent { Greeting("Android") HelloWorld() }
@Composable fun HelloWorld() { Text(text = "Hello World!") }
运行结果如下所示:
这里两个Text重叠了,显然不是我们想要的结果,那么如果我们想让文字垂直或者水平排列改如何去做呢。
垂直或水平布局
垂直排列 我们可以使用Column布局将组合函数包裹起来,修改setContent的代码如下所示:
setContent { Column { Greeting("Android") HelloWorld() } }
运行结果如下图所示:
水平排列,我们只需要将Column修改为Row即可,代码如下所示:
setContent { Row { Greeting("Android") HelloWorld() } }
运行结果如下所示:
由此我们的Compose HelloWorld就完成了~