引入 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.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。再尝试运行工程。

运行效果

注意

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

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注解,控制着右边的预览画面

@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

Android Jetpack Compose 引入示例工程的更多相关文章

  1. Android Kotlin Jetpack Compose UI框架 完全解析

    前言 Q1的时候公司列了个培训计划,部分人作为讲师要上报培训课题.那时候刚从好几个Android项目里抽离出来,正好看到Jetpack发布了新玩意儿--Compose,我被它的快速实时打包给吸引住了, ...

  2. Android全新UI编程 - Jetpack Compose 超详细教程

    1. 简介 Jetpack Compose是在2019Google i/O大会上发布的新的库.Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码,更强大的功能,能提高开发速 ...

  3. 学习Android Jetpack? 入门教程和进阶实战这里全都有!

    前言 2018年谷歌I/O,Jetpack横空出世,官方介绍如下: Jetpack 是一套库.工具和指南,可帮助开发者更轻松地编写优质应用.这些组件可帮助您遵循最佳做法.让您摆脱编写样板代码的工作并简 ...

  4. 谷歌内部流出Jetpack Compose最全上手指南,含项目实战演练!

    简介 Jetpack Compose是在2019Google i/O大会上发布的新的库.Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码,更强大的功能,能提高开发速度. ...

  5. 乘风破浪,遇见Android Jetpack之Compose声明式UI开发工具包,逐渐大一统的原生UI绘制体系

    什么是Android Jetpack https://developer.android.com/jetpack Android Jetpack是一个由多个库组成的套件,可帮助开发者遵循最佳做法.减少 ...

  6. Jetpack Compose 1.0 终于要投入使用了!

    前言 Jetpack Compose 是用于构建原生界面的「新款 Android 工具包」.2021 Google IO 大会上,Google宣布:「Jetpack Compose 1.0 即将面世」 ...

  7. Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用

    原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...

  8. Jetpack Compose学习(6)——关于Modifier的妙用

    原文: Jetpack Compose学习(6)--关于Modifier的妙用 | Stars-One的杂货小窝 之前学习记录中也是陆陆续续地将常用的Modifier的方法穿插进去了,本期就来详细的讲 ...

  9. 高效动画实现原理-Jetpack Compose 初探索

    一.简介 Jetpack Compose是Google推出的用于构建原生界面的新Android 工具包,它可简化并加快 Android上的界面开发.Jetpack Compose是一个声明式的UI框架 ...

随机推荐

  1. 【PHP数据结构】图的遍历:深度优先与广度优先

    在上一篇文章中,我们学习完了图的相关的存储结构,也就是 邻接矩阵 和 邻接表 .它们分别就代表了最典型的 顺序存储 和 链式存储 两种类型.既然数据结构有了,那么我们接下来当然就是学习对这些数据结构的 ...

  2. 后台开发 3个题目 array_chunk, 100块钱找零钱(动态规划 dynamic programming), 双向循环链表 llist 删除节点

    1. array_chunk 实现 http://php.net/manual/en/function.array-chunk.php <?php function my_array_chunk ...

  3. js 模板方法模式

    * 分离出共同点 function Beverage() {} Beverage.prototype.boilWater = function() { console.log("把水煮沸&q ...

  4. Loj#2769-「ROI 2017 Day 1」前往大都会【最短路树,斜率优化】

    正题 题目链接:https://loj.ac/p/2769 题目大意 给出\(n\)个点\(m\)条地铁线路,每条线路是一条路径. 求\(1\)到\(n\)的最短路且在最短路径的情况下相邻换乘点的距离 ...

  5. P4643-[国家集训队]阿狸和桃子的游戏【结论】

    正题 题目链接:https://www.luogu.com.cn/problem/P4643 题目大意 给出\(n\)个点\(m\)条边的无向图,两个人轮流选择一个未被选择的点加入点集. 然后每个人的 ...

  6. YbtOJ#752-最优分组【笛卡尔树,线段树】

    正题 题目链接:http://www.ybtoj.com.cn/problem/752 题目大意 \(n\)个人,每个人有\(c_i\)和\(d_i\)分别表示这个人所在的队伍的最少/最多人数. 然后 ...

  7. P4542-[ZJOI2011]营救皮卡丘【费用流,Floyd】

    正题 题目链接:https://www.luogu.com.cn/problem/P4542 题目大意 给出\(n+1\)个点\(m\)条边的无向图,\(k\)个人开始在\(0\)号点,一个人进入\( ...

  8. 3.docker容器常用命令

    docker容器的常用命令 docker有很多命令,让我们一个一个全部背下来,基本是不可能的,帮助文档的作用就很大了,想要查询那个命令,直接去找帮助文档,帮助文档地址:https://docs.doc ...

  9. MySQL数据库提权(一)

    一.获取Mysql登录账号和密码 1.数据库提权需要知道数据库的账号密码.以及它的配置文件,一般配置文件都在网站的根目录下,这些配置文件命名有鲜明的特征,如:conn.config.data.sql. ...

  10. JavaEE & Tomcat 介绍

    目录 企业开发介绍 JavaEE 规范 Web 概述 系统结构简介 C/S 结构 B/S 结构 两种结构的区别及优略 Tomcat Tomcat 介绍 关于服务器 Tomcat下载与安装 Tomcat ...