Skip to content

引入 Jetpack Compose 示例工程

更新日期: 2021-11-9
  • 2021-11-9 更新目录
  • 2021-11-2 创建文档

去GitHub上找到Compose的示例工程 https://github.com/android/compose-samples ,clone到本地

网络不好的同学也可以去gitee上面搜索「compose-samples」,也能找到这个示例工程。

我的AndroidStudio(后文简称“as”)是4.1.1。示例工程要求Android Studio Arctic Fox。升级一下as。

版本说明

在以前的编号系统中,此版本应为 Android Studio 4.3 或 4.3.0.1。采用全新的编号系统后,现在版本为 Android Studio - Arctic Fox | 2020.3.1 或 2020.3.1。

升级到 Arctic Fox

用4.1.1打开会报错

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project,
 please retry with version 2020.3.1 or newer.

示例工程效果图

samples

仓库里有多个示例工程,下面我们先看JetNews示例。

JetNews

as打开JetNews目录,可能会下载gradle-7.1.1-bin.zipgradle-7.1.1-all.zip,会耗费一些时间。 gradle下载完毕后,还会下载很多库,也需要时间。

gradle跑完后,运行一下报错

Android Gradle plugin requires Java 11 to run
Build file '/Users/rustfisher/Desktop/ws/androidProjects/compose-samples/JetNews/app/build.gradle' line: 18

An exception occurred applying plugin request [id: 'com.android.application']
> Failed to apply plugin 'com.android.internal.application'.
> Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
    You can try some of the following options:
    - changing the IDE settings.
    - changing the JAVA_HOME environment variable.
    - changing `org.gradle.java.home` in `gradle.properties`.

更改as的设置 Preferences > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK。 选择使用as带的 Java 11

Gradle JDK

修改成as自带的11,重启一次as。再尝试运行工程。

运行效果

run

注意

修改这个地方有可能造成其他旧工程编译出错

gradle

观察一下gradle。

项目的gradle

buildscript {
    ext.kotlin_version = '1.5.31'
    ext.compose_version = '1.1.0-beta01'
    ext.coroutines_version = '1.5.2'
    ext.accompanist_version = '0.21.0-beta'
}
定义了多种库的版本

模块gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
plugins之前写成apply plugin: 'com.android.application'

dependencies里也引用了多个androidx.compose的依赖

activity

manifest中仅仅注册了一个MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        val appContainer = (application as JetnewsApplication).container
        setContent {
            val windowSizeClass = rememberWindowSizeClass()
            JetnewsApp(appContainer, windowSizeClass)
        }
    }
}
这里使用到JetnewsApplicationJetnewsApp

AppContainer

从设计上来说,AppContainer给应用提供数据仓库,统一了数据来源。

// AppContainerImpl.kt
interface AppContainer {
    val postsRepository: PostsRepository
    val interestsRepository: InterestsRepository
}

AppContainerImpl是数据实现类,提供了具体的数据仓库

class AppContainerImpl(private val applicationContext: Context) : AppContainer {

    override val postsRepository: PostsRepository by lazy {
        FakePostsRepository() // 模拟数据
    }

    override val interestsRepository: InterestsRepository by lazy {
        FakeInterestsRepository() // 模拟数据
    }
}

JetnewsApp

JetnewsApp是一个方法,定义在JetnewsApp.kt里。它需要2个参数。

@Composable
fun JetnewsApp(
    appContainer: AppContainer, // 数据仓库
    windowSize: WindowSize // 屏幕尺寸类型
)   {
    JetnewsTheme {
        ProvideWindowInsets { }
    }
}

方法中调用JetnewsTheme方法,其中使用了MaterialTheme

ProvideWindowInsets中,把主界面定义好了,其中包括侧滑抽屉

如此一层套一层,构成了app的入口界面。

代码风格上,compose,flutter,swift UI 这三者非常接近。

ui

对于Compose,可以在as中使用预览功能

预览

右边能预览亮和暗两种风格

注意左边代码中的@Preview注解,控制着右边的预览画面

@Preview("Post content")
@Preview("Post content (dark)", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun PreviewPost() {
    JetnewsTheme {
        Surface {
            PostContent(post = post3)
        }
    }
}

  • @Preview("Post content")里的字符串是预览的名字,显示在相应的预览上方
  • uiMode设定模式,默认是UI_MODE_TYPE_UNDEFINED,这里是明亮
  • 设置为UI_MODE_NIGHT_YES 即暗色风格
  • 风格定义在UiMode
  • PostContent是实际工作的代码,传入的post3是本地预置的测试内容
  • post3PostsData.kt中,里面还有更多的模拟内容

我们可以注意到很多@Composable注解。

调用 Jetpack Compose 函数来声明想要的元素,Compose 编译器即会完成后面的所有工作。

参考

android-studio-2020.3.1.24-mac.dmg 链接: https://pan.baidu.com/s/1yGfUjSn6LcUyJiBb2cEfRQ 提取码: hcbp

本文也发布在

掘金 华为云社区 cnblog


Compose系列

  1. 引入 Jetpack Compose 示例工程
  2. 现有工程使用Compose


作者: rustfisher.com | rf.cs@foxmail.com
示例: AndroidTutorial Gitee, Tutorial Github
本文链接: https://www.an.rustfisher.com/android/jetpack/compose/compose-sample-proj1/
一家之言,仅当抛砖引玉。如有错漏,还请指出。如果喜欢本站的内容,还请支持作者。也可点击1次下方的链接(链接内容与本站无关),谢谢支持服务器