Jetpack Compose 基础环境安装和应用

作者: 我要让全世界知道我狠低调
来源: 51数据库
2021-08-15

环境搭建

开发工具

由于 Jetpack Compose 目前还没有出正式版，所以要想开发体验，需要下载最新 Canary 版的 Android Studio 预览版。

创建新项目

打开最新 Canary 版的 Android studio 预览版，创建一个新项目，你会发现创建新项目模板有一个 Empty Compose Activity 的模板，选择它创建一个项目就可以体验 Jetpack Compose 了。

在创建 Jetpack Compose 你会发现 _minimumSdkVersion _最小只能选择 API level 21 ，也就是 Jetpack Compose 支持的最小版本。

项目创建好了，先不着急开发，先看看配置，是如何让项目支持 Jetpack Compose 开发的，以便以后我们把 Jetpack Compose 添加到以前的项目中去。

Jetpack Compose 是基于kotlin语言开发的框架，那么你的项目至少要确保支持 kotlin，如果你的项目还不支持，请查看官网教程将 Kotlin 添加到现有应用自行配置。( 😲 啥，都2021年了项目还不支持 kotlin 😝 )。
打开项目的 app/build.gradle 文件，关于 Jetpack Compose 的相关配置如下

android {
    defaultConfig {
        ...
        // Jetpack Compose 最小支持版本 21 
        minSdkVersion 21
    }

    buildFeatures {
        // 此 module 启动 Jetpack Compose
        compose true
    }
    ...

    //kotlin 相关参数配置
    kotlinOptions {
        jvmTarget = "1.8"
        // 0?? 启用新的 jvm IR 
        useIR = true
    }

    // Jetpack compose 相关参数配置
    composeOptions {
        //kotlin 额外编译版本 和Jetpack Compose 版本一致
        kotlinCompilerExtensionVersion compose_version
        //kotlin编译版本，要1.4及以上
        kotlinCompilerVersion kotlin_version
    }
}


dependencies {
   	...
    // Jetpack compose 相关依赖
    // 基础组件
    implementation "androidx.compose.ui:ui:$compose_version"
    // Material Design 组件相关实现
    implementation "androidx.compose.material:material:$compose_version"
    // ui相关工具，比如视图预览
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
}

关于 0?? 配置处参考 kotlin 1.4 新特性 | 新的 JVM IR backend 。
本文 Jetpack compose 版本compose_version = ‘1.0.0-alpha09’ , kotlin 版本 kotlin_version=‘1.4.21’
?? 由于 Jetpack compose 没有推出正式版，api 可能会有变化，本文后期尽量跟进最新api，如果没有来得及更新，发现下文中部分 api 不可以用了请多多包涵，或留言告知本人多谢 🙏 。

看看 Jetpack Compose 长啥样

打开 MainActivity.kt 文件，如果编译顺利的话，你应该看到类似下面的样子

① 刷新视图，当代码发生变化是，点击它可以刷新视图
②进行交互模式，比如视图上有个按钮，就可以不用运行直接点击并作出对应的响应。
③ 和 ④可以把当前视图直接部署到设备上看效果，这个还是挺方便的。
更多关于布局预览工具的使用，可以查看官网上关于此内容的介绍 https://developer.android.google.cn/jetpack/compose/preview

仔细看上图，你会发现 ~~Text~~() 是过时的，此处建议替换成 androidx.compose.material.Text 。在没有稳定版本，经常 api用着用着过时、改名、或者直接被删掉都是很正常的 😁 。

在 Jetpack Compose 作为构建原生界面的工具包，我们还是用 Activity/Fragment 来加载视图，在以前 XML 布局模式下，Activity 关联视图使用 setContentView() 函数。在 Jetpack Compose 中加载关联视图使用 setContent 函数，如下所示

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //添加一个 Jetpack Compose 视图
             Greeting("Android")
        }
   }

可组合 (Composable) 函数

在以前 View 视图模式下，我们编写视图都是在 XML 文件中去书写，在 Jetpack Compose 中我们都用被加上 @Composable 注解的 kotlin 函数来构建界面，如下代码所示

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

可组合函数的函数名一般首字母大写，以便和普通函数区分。
可组合函数只能在其他可组合函数中调用，这一点有点类似协程 suspend 函数。
虽然函数用 @Composable 注解，但 Jetpack Compose 并不是一个注入处理器。Compose 在 Kotlin 编译器的类型检测与代码生成阶段依赖 Kotlin 编译器插件工作。此说法来自深入详解 Jetpack Compose | 实现原理这篇文章中，感兴趣可以去看一看。

学习第一个组件Text

上面创建的 Jetpack Compose 项目实例中就用到 Text 这个组件，在 Jetpack Compose 所有的组件都是可以组合函数，所以Text 也不例外，源码如下

@Composable
fun Text(
    text: String,//显示的内容
    modifier: Modifier = Modifier, // 关于布局的设置
    color: Color = Color.Unspecified,// 文字颜色
    fontSize: TextUnit = TextUnit.Unspecified,//文字大小
    fontStyle: FontStyle? = null, //文字风格
    fontWeight: FontWeight? = null,//文字粗细
    fontFamily: FontFamily? = null, //字体风格
    letterSpacing: TextUnit = TextUnit.Unspecified,//字间距
    textDecoration: TextDecoration? = null,//文字装饰、比如下划线
    textAlign: TextAlign? = null,//对齐方式
    lineHeight: TextUnit = TextUnit.Unspecified,//行高
    overflow: TextOverflow = TextOverflow.Clip,// 文字显示不完的处理方式
    softWrap: Boolean = true,// 文本是否应在换行符处中断,对中文没啥用
    maxLines: Int = Int.MAX_VALUE,//最大行数
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = AmbientTextStyle.current
) {
	……
}

我们需要设置个性化 Text 组件，只要传入对应的参数就行了，和 XML 添加对应属性差不多。

比如把文字改成蓝色

@Composable
fun TestText(){
    Text(text = "Hello Android",color= Color.Blue)
}

想看效果就在setContent调用此函数，或者在预览函数中调用

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //将视图添加到Acitivity
            TestText()
        }
    }   
}


  @Preview(showBackground = true)
  @Composable
  fun DefaultPreview() {
     TestText()
  }

预览效果

再学一个 Button 组件

@Composable
fun Button(
    onClick: () -> Unit,// 按钮的点击事件
    modifier: Modifier = Modifier,
    enabled: Boolean = true, //是否启用
    interactionState: InteractionState = remember { InteractionState() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),//海拔
    shape: Shape = MaterialTheme.shapes.small,//形状
    border: BorderStroke? = null,//边框
    colors: ButtonColors = ButtonDefaults.buttonColors(),//颜色
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,//内边距
    content: @Composable RowScope.() -> Unit //内容
) { …… }

这个 Button 组件点击事件 onClick 和内容 content 是必填参数外，好像没有设置 Button 文字的参数。这和我们以前在 XML 构建视图不太一样。那么我们怎么让 Button 显示文字呢？我们在content 添加一个Text组件就可以了。

@Composable
fun TestButton() {
    Button(onClick = { }) {
        Text(text = "button")
    }
}

最后一个参数 content 是函数类型，为了让这个函数体里面能调用可组合函数所以在这个参数还加个 @Composable 表示是一个可以组合函数类型，所以 Button 的 content 的函数体中可以调用其它可组合函数。

如果我们让Button显示图片，那么我们就把 Text 换成 Image 就行了。Jetpack Compose 给我提供了简单Button、Text、Image 组件(组合函数) 通过我们不同的组合方式就创造了一些新的组件。

动态改变Text的文本内容

@Composable
fun TestButton() {
    //声明一个可变状态值
    val  text =mutableStateOf("button")
    Button(onClick = { text.value = "我被点击了" /*改变值*/}) {
        Text(text = text.value/*使用值*/)
    }
}

我们声明一个声明一个可变状态值text，让 Text 的内容设置为 text.value 当我们点击按钮的时候，text.value 的值被改变 Jetpack Compose 就会帮我们重新渲染用到 text.value 的地方。

Jetpack Compose 的灵活性

Jetpack Compose 都是用 kotlin 函数，那么就可以用 kotlin 语法来构建界面了

@Composable
fun TestForView() {
    val names = listOf("knight", "Tom", "Jack","kk")
    Column {
        names.forEach { Text(text = it) }
    }
}

Column 是一种布局方式，让子级垂直顺序排列，这些子级我们现在直接用循环语法就可以了

预览效果

当然，如果条目多的话这样写就不合适了，我们可以把 Column 替换成 LazyColumn , LazyColumn 只会加载当前显示的条目和 RecyclerView 类似。它的用法也很简单，如下

    val names = listOf("knight", "Tom", "Jack", "kk")
    LazyColumn {
        items(names) { Text(text = it) }
    }

总结

本文叙述了如何搭建 Jetpack Compose 环境及工程，简单了解了一下 Jetpack Compose 是什么样子，学习了两个组件 Text 和 Button 。也看到了 Jetpack Compose 在 kotlin 的加持下如此的灵活。Jetpack Compose 作为 Android 新的界面工具包，功能还是挺丰富的。本文只能说和 Jetpack Compose 的初探，混个脸熟，关于什么是声明式？、布局如何构建、界面状态和数据如何处理等等，等以后我们在慢慢探讨。