Android|Android Jetpack Compose 引入示例工程
引入 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
文章图片
用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.
示例工程效果图
文章图片
仓库里有多个示例工程,下面我们先看JetNews示例。
JetNews as打开JetNews目录,可能会下载gradle-7.1.1-bin.zip或gradle-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: 18An 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。再尝试运行工程。
运行效果
文章图片
注意
修改这个地方有可能造成其他旧工程编译出错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
【Android|Android Jetpack Compose 引入示例工程】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)
}
}
}
这里使用到JetnewsApplication与JetnewsApp
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
注解,控制着右边的预览画面@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
是本地预置的测试内容post3
在PostsData.kt中,里面还有更多的模拟内容
@Composable
注解。调用 Jetpack Compose 函数来声明想要的元素,Compose 编译器即会完成后面的所有工作。
参考 android-studio-2020.3.1.24-mac.dmg 链接: https://pan.baidu.com/s/1yGfUjSn6LcUyJiBb2cEfRQ 提取码: hcbp
- 将 Android Studio 与 Jetpack Compose 配合使用
- Android Studio 版本说明
推荐阅读
- android第三方框架(五)ButterKnife
- Android中的AES加密-下
- 带有Hilt的Android上的依赖注入
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- Android事件传递源码分析
- RxJava|RxJava 在Android项目中的使用(一)
- Android7.0|Android7.0 第三方应用无法访问私有库
- 深入理解|深入理解 Android 9.0 Crash 机制(二)
- android防止连续点击的简单实现(kotlin)