Android Jetpack Compose 引入示例工程

1,216 阅读3分钟

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

引入 Jetpack Compose 示例工程

去GitHub上找到Compose的示例工程 github.com/android/com… ,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 as-fox.png

用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.

示例工程效果图 jetpack-compose-samples.png

仓库里有多个示例工程,下面我们先看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。 Gradle JDK选择使用as带的 Java 11

as-settings-gradle-jdk-11.png

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

运行效果 app-run1.png

注意

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

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中,使用了各UI组件,把主界面定义好了,其中包括侧滑抽屉

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

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

ui

对于ui组件,可以在as中使用预览功能 preview-1.png

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

注意左边代码中的@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 链接: pan.baidu.com/s/1yGfUjSn6… 提取码: hcbp