首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从0上手Jetpack Compose,看这一篇就够了~

了解到许多小伙伴还没开始学习Compose,所以我写了一篇基础文章,让我们一起轻松上手Compose~ 在这篇文章中我们将初步了解 Jetpack Compose,并学习可组合函数、基本布局和状态以及主题等基础知识...Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...在上面的图中我们看到,两个Text紧紧的贴在一起了,在XML布局中我们可以使用padding或者margin来解决这个问题,在Compose中如何处理呢?以及我们如何为文字设置颜色、大小等样式呢?...这就需要使用Compose的Modifier修饰符。 Compose中的Modifier修饰符 使用Compose修饰符可以更改大小、布局、外观与添加点击事件等。我们先来解决上面遗留的问题。...我们都知道在RecycleView中还提供了网格布局布局和流布局,在Compose中也分别对应LazyGrid与LazyVerticalStaggeredGrid,感兴趣的大家可自行了解。

59131
您找到你想要的搜索结果了吗?
是的
没有找到

深度解析 Jetpack Compose 布局

Jetpack Compose 是用于构建原生 Android 界面的新工具包。...接下来,我们来看看 Compose 的布局模型 是如何实现这些目标的。 Jetpack Compose 可将状态转换为界面,这个过程分为三步: 组合、布局、绘制。...△ 菜单项的尺寸不相同 我们很容易想到,让每个菜单项都占用允许的最大尺寸即可: △ 每个菜单项都占有允许的最大尺寸 但这么做也没能完全解决问题,因为菜单窗口会扩大到其最大尺寸。...如需详细了解固有特性测量,请参阅 Jetpack Compose 中的布局 Codelab 中的 "固有特性" 部分。...如需了解更多,请查阅以下列出的资源: Jetpack Compose 使用入门文档 Jetpack Compose 学习路线图 Jetpack Compose 相关示例

2K30

Jetpack Compose开篇 之 HelloWorld

前言 此前我更新了Jetpack Architecture系列的文章,如果你还不了解Jetpack,可以移步至 Android JetPack系列文章 ,持续更新中 从即日起,我将开始持续更新Jetpack...Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...Jetpack Compose相比,更喜欢和Android相比,并得出了一些结论,那些结论我不去评判对错,我也没有资格去评判,但是如果你问我,一个Android开发者 Flutter、Jetpack Compose...这里两个Text重叠了,显然不是我们想要的结果,那么如果我们想让文字垂直或者水平排列改如何去做呢。...垂直或水平布局 垂直排列 我们可以使用Column布局将组合函数包裹起来,修改setContent的代码如下所示: setContent { Column { Greeting(

1.8K20

Jetpack Compose终于能稳定支持Wear OS,并带来了适用于手机和平板的1.2版本更新

作者 | 罗燕珊 近日,谷歌安卓团队发布 Jetpack Compose 1.2 版本,该版本提供了开发者所需要的更多 API,以支持更高级的用例。...在发布 Jetpack Compose 1.2 版本的同时,官方还发布了 Compose for Wear OS 1.0 ——使得 Compose 也支持 Wear OS 应用开发。...Jetpack Compose 是官方推荐的为手机、平板和可折叠设备开发新安卓应用的框架。...智能手机应用程序开发人员在 Compose 1.2 中获得了一些重要更新。Lazy grids,通过只对网格的可见部分进行合成来提高性能,已经从实验阶段转为稳定阶段。...不过,Jetpack Compose 是最接近原生解决方案的那个,它为安卓功能提供了很好的支持,而无需尝试跨平台(尽管用 Kotlin 编写的非可视代码也可以在其他地方使用)。

1.4K20

Jetpack Compose 使用前后对比

为了包含 Jetpack Compose 1.0.0-beta05 的更新内容,这篇文章在第一次发布后做出了更新。如果您希望查看 原始版本,请点击 这里。...2020 年,我开始了缓慢迁移 Tivi UI 的任务,目标是使其转为由 Jetpack Compose 编写。大约 12 个月之后,任务完成!...最近在 Paging3 支持了 Compose 后,我迁移了最后的界面: "列表" 网格: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec8cbece28db4f6dae759b1fb520a243...APK 大小分析 在将迁移后的应用与接入 Compose 前的应用做比较后,我们发现 APK 大小缩减了 **41%**,方法数减少了 **17%**。...您可以查看我们发布的文章来了解更多: 深入详解 Jetpack Compose | 优化 UI 构建 深入详解 Jetpack Compose | 实现原理 注意事项 关于上面的所有结果,有些事项需要注意

1K30

一起看 IO | Jetpack Compose 中的新特性

与此同时,Twitter 也已经在应用的不同部分使用了 Jetpack Compose 并从中受益,因为 "Compose 让我们更容易定义自己的组件,并使它们的 API 更明确、灵活和直观。"...Airbnb 团队同样也采用了 Compose: "Jetpack Compose 是我们技术战略的重要组成部分,生产力因此获得了大幅提高。"...布局功能和改进 惰性布局 惰性布局在不断发展,随着网格 API LazyVerticalGrid 和 LazyHorizontalGrid 顺利通过实验性使用阶段,我们新增了一个实验性 API——LazyLayout...如需了解更多,请查阅 将 Compose 与现有界面集成 技术文档。 窗口大小类 为了更简单地设计、开发以及测试可调整尺寸布局,我们发布了窗口大小类——一组主观的视窗断点。...在 I/O 演讲 Jetpack Compose 中常见的性能问题 中,Compose 团队介绍了常见的性能错误以及这些错误的解决方法。

2.2K20

Row本身是不支持滚动,如何实现滚动

注意:compose似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计 此外,提及下,如果想使用像ListView或RecyclerView那样的列表组件,在Compose....size(100.dp)) { } } Column 此布局和Row布局的参数一样,只是名字有所区别,使用方法和上面都一样 verticalArrangement 垂直方向排列...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 backgroundColor 背景色 contentColor 内容的背景色 border 边框,使用详见Jetpack...Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation 阴影高度 复制Card(modifier

1.8K30

谷歌大佬强势分享《Jetpack Compose 权威指南》,带你参透声明式UI的终极奥义!

Android Jetpack 的支持 在 Compose 刚刚发布的时候,Android Jetpack 中的很多其他库都第一时间给予了 Compose 支持,从而丰富了 Compose 的开发生态。...在谷歌官方的 《Jetpack Compose 使用前后对比》 一文说道:Tivi应用在使用了 Compose 后,我们发现 APK 大小缩减了 41%,方法数减少了 17%。...二 如何快速学习Compose 接下来,我将给大家介绍一份谷歌大佬强势分享《Jetpack Compose 权威指南》,手把手教大家Jetpack Compose从入门到精通。...Android Jetpack Compose 最全上手指南 Jetpack Compose 环境准备和Hello World 布局 使用Material design 设计 Compose 布局实时预览...Jetpack Compose应用1 开始前的准备 创建DEMO 遇到的问题 2. Jetpack Compose应用2 3.

4.1K30

Jetpack Compose for Desktop: 里程碑1发布

在深入详解 Jetpack Compose | 优化 UI 构建 中谷歌介绍了为什么要设计 Jetpack Compose 来完成原生 Android 的开发,如今 Jetpack Compose for...2020年11月5日 Jetpack Compose for Desktop 终于发布了第一个里程碑版本,作为新一代的 Kotlin UI 框架,Jetpack Compose 可快速地构建高性能和美观的用户界面...该项目是基于 Google 的 Jetpack ComposeJetpack Compose 一个用于在 Android 的 UI开发工具包,Compose for Desktop 可以让在 Android...上使用 Jetpack Compose 的能力直接转移到 Compose for Desktop ,反之亦然。...一样,可让开发者的应用程序对鼠标指针等事件做出反应,查询和操做应用的窗口大小和位置,创建任务栏图标或菜单栏条目等。

4.6K30

使用 Jetpack Compose 提升 Play 商店的用户体验

为了让 Jetpack Compose 的使用体验更上一层楼,以及了解大家对 Compose 开发、学习方面的内容需求,这里诚邀您参与 Jetpack Compose 使用情况调研, 点击这里 即刻参与调研...从那时起,Google Play 商店与 Jetpack Compose 团队密切合作,发布并完善了满足我们特定需求的 Jetpack Compose 版本。...开发者的工作效率 一年多来 ,我们一直在使用 Jetpack Compose 编写用户界面代码,也得益于 Jetpack Compose 让界面开发变得更加简单。...性能 Play 商店和 Jetpack Compose 团队密切合作,以确保 Compose 可以像视图框架一样快速运行并且没有卡顿。...由于我们 Compose 迁移策略的性质,我们无法准确衡量 APK 大小 变化或构建速度等,但是我们看到的所有迹象都非常积极!

3.2K40

为任意屏幕尺寸构建 Android 界面

我们推荐您使用窗口大小断点来做出高级应用布局决策,对于布局网格列的变化,它们还能映射到 Material Design 布局断点。...△ 基于高度的窗口大小类的表示 总而言之,窗口大小类的出现,代表了 Android 在自适应和响应式布局开发中的一大进步,包括更新和优化的指南、Jetpack WindowManager 中的新 API...,它的优势在于可以轻松复用现有的布局代码,以下是目前更新后的导航图: △ 更新后的导航图 我们可以通过 NavigationRailView 导航到应用任意一个顶层布局,但仍然可以通过选择界面中某个单项任务而导航到详情页面的...Jetpack Compose Jetpack Compose 在 2021 年 7 月发布了 1.0 版本后,在 Android 开发者社区产生了巨大反响,成千上万的应用已经在生产环境中使用了 Compose...Jetpack Compose 本身是一种声明式的界面工具包,通过它您可以根据页面状态进行描述,Compose 会自行进行所有必要的更新。

4.1K20

折叠屏上应用设计规范,了解一下?

本文将重点讨论 View 系统中的适配,如需了解更多有关如何利用 Compose 构建大屏幕应用的信息,请参阅文章《为任意屏幕尺寸构建 Android 界面》。...△ Fortnightly 遵循指南对内容进行分隔和分组 网格系统 现在,许多应用将屏幕视作一个大画布或单栏,以水平和垂直的方式按相互关系绘制元素,有些应用也会在一侧整体留出边距。...△ 响应式界面可根据屏幕尺寸变化而调整内容布局 设想一下,当您调整浏览器窗口大小时,如果浏览器回退了一个页面,或者重定向到另一个页面,又或者修改了历史记录,这种体验非常奇怪。...△ 通过更换 RecyclerView 的 LayoutManager 来改变其展现形式 主页横幅 我们还可以改变单项布局,使某些项比其他项更高或更宽,以此凸显其重要性,打造更有趣的视觉效果。...△ 平均分布在铰链两侧的八栏网格 (蓝背景) 适配示例 现在我们来看如何在运行期间利用好折叠状态。Jetpack Window Manager 库提供了相应的 API,可以检测应用窗口是否存在折叠。

4.3K20

设计图转Compose代码,Relay帮你轻松搞定

开发者:使用 Relay for Android Studio 插件导入界面软件包,并生成完美的 Jetpack Compose 代码。...安装Relay for Figma插件 借助 Relay for Figma 插件,使用 Figma 的任何用户都可以为其设计添加注解,并分享给使用 Android Studio 和 Jetpack Compose...我们直接将下载好的HelloFigma.fig拖入到Figma中,我们可以看到示例是一个图片与文本组件垂直摆放。 创建组件 我们首先需要将其转换为一个组件。...这里添加说明为:“图文垂直排列”。 然后点击 Share with developer 与开发人员共享。然后输入文件名称和说明,如下图所示。...hello_card/fonts/* 在 Jetpack Compose 中支持相应组件所需的所有字体文件。

29610
领券