Jetpack Compose Glimmer 基于 Jetpack Compose 构建,包含 专为带显示屏的 AI 眼镜设计的可组合项、组件、行为和主题。借助 Glimmer,您可以使用 Compose 为显示眼镜构建原生界面,并使用更少的代码、强大的工具和直观的 Kotlin API,打造生动而精彩的应用体验。
Jetpack Compose Glimmer 可组合项
Jetpack Compose Glimmer 提供了 @Composable 函数,专为 AI
眼镜显示屏量身定制,例如 Text、Button 和 ListItem。以下是 Jetpack Compose Glimmer 可组合项的一些独特特征:
- 简化的样式:例如,
Surface组件默认使用 黑色或透明背景,以优化光学显示效果。 - 优化的默认颜色:Jetpack Compose Glimmer 默认根据背景颜色计算内容 颜色,因此开发者很少需要 手动设置文本颜色,从而在无需额外工作的情况下提高可读性。
差异化焦点:焦点使用基于轮廓的视觉 反馈(而不是涟漪效果)来指示,从而提高清晰度。
图 1.Jetpack Compose Glimmer 中的三种焦点状态,使用基于轮廓的视觉反馈进行区分。 优化的 Elevation:Jetpack Compose Glimmer 使用有限的框阴影 进行视觉分离
图 2.Jetpack Compose Glimmer 中的五个 Elevation 级别,使用有限的框阴影进行区分。
Jetpack Compose Glimmer 组件
Jetpack Compose Glimmer 具有自己的一组自定义设计的组件, 与 Jetpack Compose 中的组件类似,但专门针对显示眼镜的独特视觉和互动需求进行了优化 。Jetpack Compose Glimmer 组件可以使用 Jetpack Compose Glimmer 的 主题进行自定义,并基于较低级别的 Compose 功能构建,以默认支持点按和滑动等用户输入 方法。
如需详细了解如何使用特定组件,请参阅以下指南:
如果其中一个高级组件不适用于您的用例,您可以使用
surface构建自定义组件。投放途径是 Jetpack Compose Glimmer 中最基本的智能模块,是您要构建的任何特定自定义设计或互动的空白画布。
Jetpack Compose Glimmer 修饰符
Jetpack Compose Glimmer 中的修饰符的功能与 Compose 修饰符完全相同,可让您通过自定义可组合项的布局、 外观和行为来增强可组合项。Jetpack Compose Glimmer 包含修饰符和独特的默认值,用于眼镜特定的视觉反馈和性能。
Jetpack Compose Glimmer 的主题
Jetpack Compose Glimmer 具有专为显示眼镜设计的主题系统。
Jetpack Compose Glimmer 的主题实现了简化且优化的颜色、排版和形状调色板。这有助于最大限度地提高显示眼镜的可见性和简洁性。所有 Jetpack Compose Glimmer 组件都旨在与眼镜特定的输入方法自动集成。Jetpack Compose
Glimmer 的主题使用 GlimmerTheme 类公开。
与其他 Jetpack Compose 主题一样,GlimmerTheme 包含多个
子系统,这些子系统及其
可自定义的属性将在以下部分中简要介绍:
- 颜色
- 排版
- 组件间距值
- 形状
- 深度效果级别
- 图标大小
颜色
Jetpack Compose Glimmer 的 颜色系统 专为加法显示屏
和真实环境而设计。与标准 Android 主题不同,GlimmerTheme
Colors 优先使用半透明的深色背景和鲜艳的
强调色,以确保内容在不可预测的现实世界光照条件下清晰可辨。
该系统使用三部分调色板,包含主要颜色、次要颜色和中性颜色。中性颜色通常用作空间界面的物理表面,而主要颜色和次要颜色则为互动和品牌宣传提供清晰的视觉提示。
GlimmerTheme 中的颜色概览。排版
Jetpack Compose Glimmer 的排版系统包含各种排版样式,以确保在显示眼镜上清晰可辨且简洁明了。这些样式旨在通过更粗的字重、更宽的字间距和适当的行高来最大限度地提高对比度并提升文本可读性。这些样式通过
GlimmerTheme.typography公开。
组件间距值
这些值用于确保 Jetpack Compose Glimmer 组件之间的间距一致。这包括组件内边距、组件之间的间距和其他间距元素。请注意,更改这些值会影响大多数组件的默认大小。
形状
Jetpack Compose Glimmer 的形状系统为组件定义了一组标准圆角
处理和几何形状,旨在在显示眼镜界面上创建一致
且简约的视觉语言,所有形状都通过 GlimmerTheme.shapes 公开。
深度效果级别
Jetpack Compose Glimmer 组件使用“深度”来表示层次结构,这有助于在视觉上区分显示在其他卡片上方(之上)的元素。 显示眼镜上的深度由 z 轴空间中的放置位置与阴影共同构成。对于大多数高级组件(例如列表项),系统会根据焦点状态自动应用深度。当组件获得焦点时,它会获得深度;当它失去焦点时,它会恢复到正常状态。不过,对于
使用自定义组件,您可以使用
Modifier.surface上的 depthEffect 参数或 depthEffect。
图标大小
Jetpack Compose Glimmer 的图标系统旨在与 显示眼镜界面的简化视觉语言相一致地集成,通常会利用 像 Material Symbols Rounded 这样的圆形形式,以实现最佳可读性。