Android Jetpack Compose 引入示例工程

AnRFDev 发表于 2021/11/02 20:14:51 2021/11/02
【摘要】 使用Android Studio获取并打开Jetpack Compose示例工程。设置as,升级gradle。

引入 Jetpack Compose 示例工程

去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
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 链接: https://pan.baidu.com/s/1yGfUjSn6LcUyJiBb2cEfRQ 提取码: hcbp

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。