Android Jetpack Compose 超快速上手指南

关注

原创 2022-12-28 15:14:52 545 阅读 AI 写同款· GEO 优化 ›

Android全新UI编程 - Jetpack Compose 超详细教程第1弹各行各样都会淘汰一些能力差的，不仅仅是IT这个行业，所以，不要被程序猿是吃青春饭等等这类话题所吓倒，也不要觉得，找到一份工作，就享受安逸的生活，你在安逸的同时，别人正在奋力的向前跑，这样与别人的差距也就会越来越遥远，加油，希望，我们每一个人，成为更好的自己。BAT大厂面试题、独家面试工具包,资料包括数据结构、Kotlin、计算机网络、Framework源码、数据结构与算法、小程序、NDK、Flutter，《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》阅读详情

Compose 介绍

Jetpack Compose发布也快有一年的时间了，虽然目前仍是DEV阶段，但是距离可用已经不远了。Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码，更强大的功能，能提高开发速度（可以参考几乎一模一样的Flutter，开发速度确实很快）。

Jetpack Compose对于没有接触过声明式UI的小伙伴可能会学习曲线有点陡峭，对于已经能熟练开发Flutter应用的小伙白来说几乎没有难度。（Compose就是参考flutter的模式开发的，代码中还可以看到Flutter的相关注释）

这篇文章不回去解释过多的原理与技巧，只要是让你能够快速上手开发项目。

Compose 如何使用

因为目前（2020年09月27日）Compose仍处于开发阶段，所以需要使用最新 Canary 版的 Android Studio 预览版。

可以选择直接创建Empty Compose Activity来创建一个全新的Compose应用，或者可以选手动修改gradle的方式来创建Compose应用

修改Gradle

在模块的build.gradle文件中新增：

android {
    ...
    
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.0'
    }
}

dependencies中新增：

implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"

目前最新的Compose版本是1.0.0-alpha03 使用Compose最低的buildTools版本要求为29

使用

`@Compose`

所有关于构建View的方法都必须添加@Compose的注解才可以。并且@Compose跟协程的Suspend的使用方法比较类似,被@Compose的注解的方法只能在同样被@Comopse注解的方法中才能被调用

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

@Preview

加上@Preview注解的方法可以在不运行App的情况下就可以确认布局的情况。 @Preview的注解中比较常用的参数如下：

name: String: 为该Preview命名，该名字会在布局预览中显示。
showBackground: Boolean: 是否显示背景，true为显示。
backgroundColor: Long: 设置背景的颜色。
showDecoration: Boolean: 是否显示Statusbar和Toolbar，true为显示。
group: String: 为该Preview设置group名字，可以在UI中以group为单位显示。
fontScale: Float: 可以在预览中对字体放大，范围是从0.01。- widthDp: Int: 在Compose中渲染的最大宽度，单位为dp。
heightDp: Int: 在Compose中渲染的最大高度，单位为dp。

更加详细具体的说明可以看 Google关于@Preview的文档

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

上面的代码会在预览界面生成：

注意：强烈建议您不要向生产函数（即使其不带参数）添加 @Preview 注释，而是编写一个封装函数并在其中添加 @Preview 注释。

setContent

setContent和xml时候的setContentView是类似的在setContent中写入关于UI的@Compopse方法，即可在Activity中显示。

···
  override fun onCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContent { 
            ComposeTheme {
                Greeting("Android")
            }
        }
    }
···

主题

Jetpack Compose 提供了 Material Design 的实现， Material Design 组件（按钮、卡片、开关等）在 Material Theming 的基础上构建而成.

Jetpack Compose 使用 MaterialTheme 可组合项实现这些概念：

MaterialTheme(
  colors = …,
  typography = …,
  shapes = …
) {
  // app content
}

关于主题，建议阅读Google的官方文档

布局、组件

Compose提供了常见的布局与丰富的组件。

布局常见的有Column、Row、Stack。还有Material 支持的 Scaffold看到这里熟悉Flutter的朋友应该已经看出来了，Compose提供的自建跟布局和Flutter是非常相似的。

Column:

@Composable
fun ArtistCard() {
  Column {
    Text("Alfred Sisley")
    Text("3 minutes ago")
  }
}

Scaffold:

@Composable
fun HomeScreen(...) {
    Scaffold (
        drawerContent = { ... },
        topBar = { ... },
        bodyContent = { ... }
    )
}

事实也的确如此，Compose提供的布局和组件跟Flutter的组件与布局除了名字作用相似之外，连属性也是非常相似的。比如TextStyle这个控制Text样式的属性直接使用Flutter的代码，把Dart语法修改成Kotlin语法就能直接使用。

我建议需要这些布局、组件相关属性的朋友直接去看Flutter相关的文章，Flutter经过这么久的发展，相关的文档、说明比现在的Compose要详细的多.

Compose 如何集成到现有项目

对于很多现有的项目，从头开始使用Compose是不现实的，我肯可以根据上面提到的手动修改gradle的方式，使项目支持Compose。

在XML中使用

我们可以直接把Compopse作为一个普通View使用

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

  findViewById<ComposeView>(R.id.compose_view).setContent {
            ComposeTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }

Activity、Fragment

作为独立的界面使用Compopse直接使用setContent方法即可。

当前最新版本的Kotlin存在bug，kotlin-android-extensions（用于直接在代码中使用XML中View的Id的扩展）存在bug,Kotlin官方表示在1.4.20版本修复

作者：huclengyue
链接：https://juejin.cn/post/6877056735018745863

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
在这里插入图片描述
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。