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

compose--初入compose、资源获取、标准控件与布局

compose,也可以查看官方文档-快速入门:https://developer.android.google.cn/jetpack/compose/setup 1.创建项目 我这边尝鲜使用MD3风格的项目...,实际开发google也推荐:UI设计从MD2转变为MD3 2.BOM 对于compose的版本管理,官方推荐使用BOM,导入BOM后的好处是:导入compose其他库组,都将使用BOM定义的版本...在xml,我们常常会使用资源id获取到资源文件,比如:color、drawable、string等,在compose,通过以下函数获取,这些函数都位于androidx.compose.ui.res...Composable fun MyBox() { Box( modifier = Modifier .sizeIn(50.dp, 70.dp),//设置内容组件的最小宽度高度为...50dp、70dp,配合propagateMinConstraint=true使用 propagateMinConstraints = true,//使内容组件最小宽度高度生效

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

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

△ 基于宽度的窗口大小类的表示 除了以上三种基于宽度的断点外,我们还引入了具有相同类别名称的基于高度的断点,以便适用于更高级别的布局场景,并赋予更多的灵活性。...假设我们需要使用较小的高度断点来对横屏手机界面进行布局优化,虽然这听起来很复杂,但是别担心,根据我们同许多 Android 开发者进行深谈后,大部分情况下只需要根据宽度进行布局适配就可以了。...△ 基于高度的窗口大小类的表示 总而言之,窗口大小类的出现,代表了 Android 在自适应和响应式布局开发的一大进步,包括更新和优化的指南、Jetpack WindowManager 的新 API...Jetpack Compose Jetpack Compose 在 2021 年 7 月发布了 1.0 版本后,在 Android 开发者社区产生了巨大反响,成千上万的应用已经在生产环境中使用了 Compose...Jetpack Compose 本身是一种声明式的界面工具包,通过它您可以根据页面状态进行描述,Compose 会自行进行所有必要的更新。

4.1K20

Jetpack Compose 自定义 好看的TabRow Indicator

背景Jetpack Compose 提供了强大的 Material Design 组件,其中 TabRow 组件可以用于实现 Material Design 规范的选项卡界面。...Jetpack Compose 中使用 TabRow简单使用 TabRow 一般可以分为以下几步:定义 Tab 数据模型每个 Tab 对应一个数据类,包含标题、图标等信息:    data class ...)在 TabRow 添加 Tab 项使用 Tab 组件添加选项卡,传入标题、图标等:    TabRow {       tabItems.forEach { item ->          Tab... }             }          )        }    }处理 Tab 选择事件通过 selectedTabIndex 跟踪选中的 tab,在 onTabSelected 回调处理点击事件...的宽度及百分比计算indicator 的起始 x 轴坐标根据切换进度在当前 tab 和前/后 tab 之间插值indicator 的高度是整个 Canvas 的高度,即占据了 TabRow 的全高fraction

1.2K00

原创|Android Jetpack Compose 最全上手指南

因为Android Studio 4.0 添加了对Jetpack Compose 的支持,新的Compose 模版和Compose 及时预览。...创建一个支持Jetpack Compose的新应用 比起在现有应用接入Jetpack Compose ,创建一个支持Jetpack Compose 的新项目则简单了许多,因为Android Studio...为LayoutSize.Expand即表示Column宽度应为其父组件允许的最大宽度,相当于传统布局的match_parant ,还有一个值为LayoutSize.Wrap,看名字就知道,包裹内容,相当于传统布局的...height : 设置Container容器的高度,height属性的优先级高于expanded,因此会覆盖expanded,如上面的例子,设置height为180dp,也就是容器宽为父控件宽度,高为180dp...本例所示,我们设置显示最大行数为2,多于的部分截断处理: Text("我超❤️JetPack Compose的!写起来简单,复用性又强,可以抽取很多组件来复用,不用管理复杂的状态变更!"

6.1K20

欢迎体验 | Wear OS 版 Compose 开发者预览版

作者 / 开发者关系工程师 Jeremy Walker 在今年的 Google I/O 大会 上,我们宣布将 Jetpack Compose 的优秀特性引入 Wear OS。...除此之外,您在使用 Jetpack Compose 构建移动应用的经验,也可以直接运用在 Wear OS 版本上。...这就意味着面向 Wear OS 设计时,您搭配 Jetpack Compose 使用的许多依赖项不会发生变化。例如,UI、运行时间、编译器和动画依赖项都将保持不变。...开发者可以继续使用其他与 Material 相关的开发库, Material 涟漪和通过 Wear Compose Material 开发库进行扩展的 Material 图标。...我们还为列表提供了一个针对 Wear 优化的可组合项 ScalingLazyColumn,扩展了 LazyColumn并添加了缩放和透明度更改,以更好地支持圆形界面。

1.6K10

无缝构建跨设备体验 | Google IO 大会精彩回顾

tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp △ 在 Samsung Galaxy Z Fold2 上使用桌面模式的 Disney+ 示例 幸运的是,设计可无缝缩放以适配任何设备尺寸的应用也变得更加容易...——包括在 Chrome OS 和可折叠设备上动态调整大小,以及利用 Jetpack Compose 或 ConstraintLayout 构建 响应式布局。...UI 拉伸问题; Jetpack WindowManager 可让您轻松运用新硬件功能,铰链和折叠。...版 您还可以查看我们之前的推文《一起看 I/O | Wear 更新一览》了解更多详情,也可以通过演讲视频了解 Spotify 如何在 Wear 上进行构建。...Android for Cars Android Auto 支持应用程序与许多现代汽车内置的信息娱乐显示器连接。

1.7K10

Android | Compose 初上手

Compose ,在构建界面的时候,无需在像之前那么构建 XML 布局,只需要调用 Jetpack Compose 函数来声明你想要的的元素,Compose 编译器就会自动帮你完成后面的工作。...widthDp: Int: 在Compose渲染的最大宽度,单位为dp。 heightDp: Int: 在Compose渲染的最大高度,单位为dp。...Compose 编程思想 Jetpack COmpose 是一个适用于 android 的新式声明性界面工具包。...组合函数 Jetpack Compose 是围绕可组合函数构建的,这些函数就是要显示在界面上的元素,在函数只需要描述应用界面形状和数据依赖关系,而不用去关系界面的构建过程, 如果需要创建组合函数,只需要将...开始布局的方向 widthIn,heightIn,sizeIn 设置布局的宽度高度的最大值和最小值 gravity:元素的位置, 等等 需要注意的是 Modifier 系列的方法都支持链式调用 Column

5.2K20

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

似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动嵌套水平滚动),所以相应布局需要合理设计 此外,提及下,如果想使用像ListView或RecyclerView那样的列表组件,在Compose可以使用LazyRow...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 backgroundColor 背景色 contentColor 内容的背景色...border 边框,使用详见Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation...阴影高度 复制Card(modifier = Modifier.fillMaxWidth().padding(20.dp),elevation = 10.dp) { Text(text = "

1.8K30

响应式设计

(线上保存功能是需要收费的) 基本的思路 图片自适应 去掉高度宽度,只给一个max-width 固定宽度高度,使图片按照自身比例缩放 固定宽度高度,使图片按照自身比例缩放 使用容器的padding-top...,录播课btn、尖括号、人数的图标可以用伪类实现,这样就省去了图标的请求了,而且绝对不会模糊。...: 100%; height: 100%; } SVG 可缩放的矢量图形,和算法有关,做图标很爽,所以只能做一些偏简单的图形,图像就算了 三方库,polyfill <img src="path-to-default-image.jpg...算是当前积木系统<em>中</em>的课程卡片的核心原理了,通过将屏幕<em>宽度</em>分成12份,每块内容占制定的份数来展示内容。...这里开发老师模块的时候发现,交互和设计不<em>按</em>常理出牌,一块内容占3块嫌少,占4块嫌多,然后就很尴尬了。

2.4K100

Android Jetpack组件 Compose 使用介绍

Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....,我们需要图形界面和xml去创建布局,通过预览达到我们想要的效果,而Jetpack推出的新组件Compose就解决了这个痛点,下面让我们来了解它,使用它。...正文   Jetpack Compose是一个用于构建原生Android UI的现代工具包。...Jetpack Compose 通过更少的代码、强大的工具和直观的 Kotlin API 简化并加速了 Android 上的 UI 开发。   听起来好像老牛逼了!!!...这个演示效果在预览是看不出来的,我们用真机来看一下: 从上面这个图来看,你会发现点击有默认的水波纹效果,这一点很好,还有就是点击的区域是包裹你当前这个item的内容,而不是占满屏幕宽度

2.6K20

Jetpack Compose Beta 版现已发布!

时机正好,不妨趁现在开始学习 Compose,并着手规划今年 1.0 版发布之后,您将如何在接下来的项目或功能中使用该工具包。...我们会提供各种指南来帮助您快速入门, 架构、无障碍功能 和 测试 相关的指导内容,以及针对 动画、列表 或 Compose 的编程思想 的深入探讨。...第二周挑战正在进行,点击此处 了解详情。 随着 Jetpack Compose Beta 版的推出,针对 1.0 版的稳定 API 和功能均已构建完成。...现在时机正好,不妨开始学习 Jetpack Compose,并规划如何在接下来的项目中使用该工具包。...我们期待收到您对在应用采用 Compose 的 反馈,您也可以在 Kotlin Slack 的 #compose 频道参与讨论或在下方留言区和我们分享。

5.6K10

响应式设计

(线上保存功能是需要收费的) 基本的思路 图片自适应 去掉高度宽度,只给一个max-width 固定宽度高度,使图片按照自身比例缩放 固定宽度高度,使图片按照自身比例缩放 使用容器的padding-top...,录播课btn、尖括号、人数的图标可以用伪类实现,这样就省去了图标的请求了,而且绝对不会模糊。...: 100%; height: 100%; } SVG 可缩放的矢量图形,和算法有关,做图标很爽,所以只能做一些偏简单的图形,图像就算了 三方库,polyfill <img src="path-to-default-image.jpg...算是当前积木系统<em>中</em>的课程卡片的核心原理了,通过将屏幕<em>宽度</em>分成12份,每块内容占制定的份数来展示内容。...这里开发老师模块的时候发现,交互和设计不<em>按</em>常理出牌,一块内容占3块嫌少,占4块嫌多,然后就很尴尬了。

1.9K30

掌握 Jetpack Compose 的 State,看这篇就够了

,不要错过 :-)Jetpack Compose 的状态State是什么在 Jetpack ,state表示一个和 UI 状态相关的值。...通过修改状态更新可组合项目随着我们越多地使用 Compose 自带的可组合项(Scaffolds、BottomSheet、Drawer等),我们会意识到在 Jetpack Compose 状态是无处不在的...这是 Jetpack Compose 很常见的修改状态的模式。...这些拓展方法会帮我们把响应式的实例转换成 Jetpack Compose 的状态实例。如何在 Jetpack Compose 中使用 Kotlin 的 Flow?...:InputText 的延迟和对应的规避方式如何在 ViewModel 中表示状态如何将 Android 其他表示类型的状态转成 Jetpack Compose 的状态希望能对你有帮助。

7.1K111
领券