Android 样式系统 | 常见的主题背景属性


在前一篇 Android 样式系统文章中,我们介绍了主题背景与样式的区别,以及如何编写灵活的样式与布局代码用于抽离可变化部分。

我们建议使用主题背景属性来间接引用资源,您可以在不同的模式下 (比如在深色主题背景) 实现灵活地切换。如果您发现在布局或样式代码中直接引用了资源或者是硬编码了具体的值,请考虑使用主题背景属性来替代之前用法。

  • 深色主题背景

    https://developer.android.google.cn/guide/topics/ui/look-and-feel/darktheme

<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->
<ConstraintLayout ...
-  android:foreground="@drawable/some_ripple"
-  android:background="@color/blue" />
+  android:foreground="?attr/selectableItemBackground"
+  android:background="?attr/colorPrimarySurface" />

但是我们还可以使用哪些主题背景属性的功能呢?这篇文章列举了您应该知道的关于主题背景属性的通用功能,它们广泛应用在 Material、AppCompact,或者是平台 (Platform) 中。本文并未完整列举所有属性,只列举了我所使用的,建议您浏览下面的属性文件的定义链接来获取更多信息。
颜色

这些颜色大部分来自于 Material 颜色系统 (Material color system) ,它们给每个颜色取了语义化的名称可以让您在应用中使用它们 (体现为主题背景属性) 。

  • Material 颜色系统

    https://material.io/design/color/the-color-system.html#color-usage-and-palettes

  • 体现为主题背景属性

    https://material.io/develop/android/theming/color/

  • ?attr/colorPrimary 应用的主要颜色;
  • ?attr/colorSecondary 应用的次要颜色,通常作为主要颜色补充;
  • ?attr/colorOn[Primary, Secondary, Surface etc] 对应颜色的相反色;
  • ?attr/color[Primary, Secondary]Variant 给定颜色的另一种阴影;
  • ?attr/colorSurface 部件的表面颜色,如: 卡片、表格、菜单;
  • ?android:attr/colorBackground 屏幕的背景颜色;
  • ?attr/colorPrimarySurface 在浅色主题中的 colorPrimary 与深色主题背景中的 colorSurface 中做切换;
  • ?attr/colorError 显示错误时的颜色。

其他常用的颜色:

  • ?attr/colorControlNormal 正常状态下设置给 icon/controls 的颜色;
  • ?attr/colorControlActivated 激活模式下设置给 icons/controls 的颜色 (如: 单选框被勾选);
  • ?attr/colorControlHighlight 设置给高亮控制界面的颜色 (如: ripples,列表选择器);
  • ?android:attr/textColorPrimary 设置给文本的主要颜色;
  • ?android:attr/textColorSecondary 设置给文本的次要颜色。

大小

  • ?attr/listPreferredItemHeight 列表项的标准高度 (最小值);
  • ?attr/actionBarSize 工具栏的高度。

Drawables

  • ?attr/selectableItemBackground 可交互条目在 ripple 或者是高亮时的背景颜色 (针对外观);
  • ?attr/selectableItemBackgroundBorderless 无边界的 ripple;
  • ?attr/dividerVertical 用于垂直分割可视化元素的 drawable;
  • ?attr/dividerHorizontal 用于水平分割可视化元素的 drawable。

TextAppearance

Material 定义了缩放类型,它是在整个应用中使用的一组由文本样式组成的离散集合,集合中的每个值都是一个主题背景属性,可以被设置为 textApperance。请点击 Material type scale generator 获得更多关于生成不同字体缩放的帮助。

  • Material type scale generator

https://material.io/design/typography/the-type-system.html#type-scale

  • ?attr/textAppearanceHeadline1 默认为 96sp light 文本;
  • ?attr/textAppearanceHeadline2 默认为 60sp light 文本;
  • ?attr/textAppearanceHeadline3 默认为 48sp regular 文本;
  • ?attr/textAppearanceHeadline4 默认为 34sp regular 文本;
  • ?attr/textAppearanceHeadline5 默认为 24sp regular 文本;
  • ?attr/textAppearanceHeadline6 默认为 20sp medium 文本;
  • ?attr/textAppearanceSubtitle1 默认为 16sp regular 文本;
  • ?attr/textAppearanceSubtitle2 默认为 14sp medium 文本;
  • ?attr/textAppearanceBody1 默认为 16sp regular 文本;
  • ?attr/textAppearanceBody2 默认为 14sp regular 文本;
  • ?attr/textAppearanceCaption 默认为 12sp regular 文本;
  • ?attr/textAppearanceButton 默认为 14sp 全大写 medium 文本;
  • ?attr/textAppearanceOverline 默认为 10sp 全大写 regular 文本。

形状

Material 采用了形状系统 (Shape system),它是由主题背景属性实现了 small、medium、large 等不同的部件。请注意,如果您想给自定义的部件设置形状外观,您应该使用 MaterialShapeDrawable 作为它的背景,因为它能够理解并能实现具体形状。

  • Shape system

https://material.io/design/shape/

  • 实现

https://material.io/develop/android/theming/shape/

  • ?attr/shapeAppearanceSmallComponent 默认圆角为 4dp,用于 Buttons、Chips、TextFields 等;
  • ?attr/shapeAppearanceMediumComponent 默认圆角为 4dp,用于 Cards、Dialogs、Date Pickers 等;
  • ?attr/shapeAppearanceLargeComponent 默认圆角为 0dp (其实是方形),用于 Bottom Sheets 等。

按钮风格

Material 提供了三种不同类型的按钮: Contained、Text 以及 Outlined。MDC 提供了主题背景属性,您可以使用它们给 MaterialButton 设置样式:- ?attr/materialButtonStyle defaults 默认是 Contained 类型 (或者直接省略样式);

  • ?attr/borderlessButtonStyle 设置为 Text 样式的按钮;

  • ?attr/materialButtonOutlinedStyle 设置为 Outlined 样式的按钮。

  • Contained

https://material.io/components/buttons/#contained-button

  • Text

https://material.io/components/buttons/#text-button

  • Outlined

https://material.io/components/buttons/#outlined-button

Floats

  • ?android:attr/disabledAlpha 默认关闭 Widget 的 alpha;
  • ?android:attr/primaryContentAlpha 设置给 foreground 元素的 alpha 值;
  • ?android:attr/secondaryContentAlpha 设置给 secondary 元素的 alpha 值。

应用命名空间 vs Android 命名空间

您可能注意到有些属性的引用是通过 ?android:attr/foo 而有些只是通过 ?attr/bar。这是因为一些属性是由 Android 平台定义的,所以您需要使用 android 命名空间来引用由它们自己定义的属性 (类似于布局中使用 View 属性 android:id) 。编译到您的应用但不是来自于静态库的属性 (AppCompact 或者 MDC) ,使用它们时不需要命名空间 (类似于布局中使用 app:baz) 。平台跟库有时候定义了相同的属性,如 colorPrimary。这时候系统优先使用非平台版本的属性,它们可以被所有级别的 API 使用。为了向后兼容,它们会被完整的复制到库中。我在上面列举的都是非平台版本的案例。

优先使用非平台版本的属性,它们可以被所有级别的 API 使用

更多资源

为了获取可以使用的全部主题背景属性,请查阅以下信息:

  • Android platform

    https://android.googlesource.com/platform/frameworks/base/+/refs/he
    ads/master/core/res/res/values/attrs.xml

  • AppCompat

https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev/appcompat/appcompat/src/main/res/values/attrs.xml

Material 设计的部件:

  • Color

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/res/values/attrs.xml

  • Shape

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/shape/res/values/attrs.xml

  • Type

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/typography/res/values/attrs.xml

自己动手

当您想使用主题背景功能抽象某个东西的时候,发现没有现成的主题背景可用时,您可以自定义一个。您可以参考 Google I/O 应用,它实现了在两个界面中显示主题演讲的列表:

  • Google I/O 应用

    https://github.com/google/iosched

这两个界面大部分看起来比较相似,除了左边界面有个显示时间的功能而右边是没有的。

将 item 的对齐部分抽象成一个主题背景属性,给不同界面使用的同一个布局中使用主题背景来区分它们的差异:1. 在 attrs.xml 中定义主题背景属性:

  • attrs.xml

    https://github.com/google/iosched/blob/89df01ebc19d9a4649
    5baac4690c2ebfa74946dc/mobile/src/main/res/values/attrs.xml#L41

<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->
<attr name="sessionListKeyline" format="dimension" />

2. 在不同的主题背景中使用不同的值:

  • 不同的值 1 https://github.com/google/iosched/blob/89df01ebc19d9a46495baac4
    690c2ebfa74946dc/mobile/src/main/res/values/themes.xml#L51

  • 不同的值2 https://github.com/google/iosched/blob/89df01ebc19d9a46495baac4
    690c2ebfa74946dc/mobile/src/main/res/values/themes.xml#L78

<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->
<style name="Theme.IOSched.Schedule">
  …
  <item name="sessionListKeyline">72dp</item>
</style>

<style name="Theme.IOSched.Speaker">
  …
  <item name="sessionListKeyline">16dp</item>
</style>

3. 给两个界面使用的布局文件中使用主题背景属性:

  • 使用主题背景属性

    https://github.com/google/iosched/blob/89df01ebc19d9a46495baac4
    690c2ebfa74946dc/mobile/src/main/res/layout/item_session.xml#L61

<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->
<Guideline …
  app:layout_constraintGuide_begin="?attr/sessionListKeyline" />

保持探索

了解了能够使用的主题背景属性功能后,您可以在编写布局、样式、drawables 时使用它们。
使用主题背景属性功能更容易实现主题功能 (如深色主题背景),而且让您编写出更灵活,更易于维护的代码。更多关于此部分的内容,敬请关注本系列的下一篇的文章。

  • 深色主题背景

    https://developer.android.google.cn/guide/topics/ui/look-and-feel/darktheme

- - - - - -


https://mp.weixin.qq.com/s/bPIXbaqr2-6Huyr_h8S62g

Android 深色模式适配原理分析

从Android10(API 29)开始,在原有的主题适配的基础上,Google开始提供了Force Dark机制,在系统底层直接对颜色和图片进行转换处理,原生支持深色模式。深色模式可以节省电量、改善弱势及强光敏感用户的可视性,并能在环境亮度较暗的时候保护视力,更是夜间活跃用户的强烈需求。对深色模式的适配有利于提升用户口碑。

发布于:2天以前  |  45次阅读  |  详细内容 »

百度APP-Android H5首屏优化实践

百度App自2016年上半年尝试Feed流业务形态,至2017年下半年,历经10个版本的迭代,基本完成了产品形态的初步探索。在整个Feed流形态的闭环中,新闻详情页(文中称为落地页)作为重要的组成部分,如果打开页面后,loading时间过长,会严重影响用户体验。因此我们针对落地页这种H5的首屏展现速度进行了长期优化,本文会详细阐述整个优化思路和技术细节

发布于:11天以前  |  113次阅读  |  详细内容 »

Android 10分区存储介绍及百度APP适配实践

Google于 2019年9月3日发布了Android10 release版本,为了更好的保护用户数据并限制设备冗余文件增加,Android 10版本变更了设备外部存储访问方式,外部存储新特性称为分区存储(Scoped Storage), 分区存储遵循以下三个原则对外部存储文件访问方式重新设计,便于用户更好的管理外部存储文件

发布于:12天以前  |  111次阅读  |  详细内容 »

深入探究Android应用启动起点

开发者文档中提到,Android应用有三种启动状态,每种状态都会影响应用向用户显示所需的时间:冷启动、温启动或热启动。三种启动状态中,冷启动耗时最久,系统和App有较多初始化的工作。如果启动时间过长,可能会导致用户在应用商店打低分,甚至完全弃用app,所以冷启动速度是各个app非常重要的性能指标之一。

发布于:12天以前  |  117次阅读  |  详细内容 »

一文搞懂Android JetPack组件原理之Lifecycle、LiveData、ViewModel与源码分析技巧

Lifecycle、LiveData和ViewModel作为AAC架构的核心,常常被用在Android业务架构中。在京东商城Android应用中,为了事件传递等个性化需求,比如ViewModel间通信、ViewModel访问Activity等等,以及为了架构的扩展性,我们封装了BaseLiveData和BaseViewModel等基础组件,也对Activity、Fragement和ViewHolder进行了封装,以JDLifecycleBaseActivity、LifecycleBaseFragment和LifecycleBaseViewHolder等组件强化了View层功能,构建出了各业务线统一规范架构的基石。

发布于:23天以前  |  130次阅读  |  详细内容 »

Android 记一次解决问题的过程

之前我写过一篇文章,介绍我在GitHub开源的滑动控件 ConsecutiveScroller 是如何实现布局吸顶功能的。有兴趣的朋友可以去看一下:Android滑动布局ConsecutiveScrollerLayout实现布局吸顶功能。

发布于:25天以前  |  196次阅读  |  详细内容 »

Android内存异常机制(用户空间)_NE

常见的Android稳定性异常,有内核异常和Android层异常。内核异常也就是常说的“kernel panic”,简称KE异常;Android层异常又分为java层crash和Native层crash,简称JE、NE异常。 上篇文章介绍了JE异常的抓取机制和处理方式,本文再讲一下NE异常。

发布于:2月以前  |  494次阅读  |  详细内容 »

Android-模块化-面向接口编程

随着业务的发展,工程的逐渐增大与开发人员增多,很多工程都走向了模块化、组件化、插件化道路,来方便大家的合作开发与降低业务之间的耦合度。现在就和大家谈谈模块化的交互问题,首先看下模块化的几个优势。

发布于:2月以前  |  813次阅读  |  详细内容 »

Android SurfaceView 播放gif

Android SurfaceView 是Android系统中的高级组件,它有自己的绘制界面,可以在一个独立的线程进行UI的绘制, 因此不会阻塞主线程,这也是我们使用SuefaceView播放gif图片的原因。

发布于:3月以前  |  605次阅读  |  详细内容 »

Android Studio 生成so文件 及调用

so文件是C、C++的函数库,在Android中 调用这些库,使用的是JNI( Java Native interface) JNI 可以使Java程序调用本地程序或者库(一般是使用C、C++ 或者汇编语言编写)。 这篇文章 会介绍 使用Android Studio 如何生成so文件,及如何使用so

发布于:3月以前  |  781次阅读  |  详细内容 »

Android 保活从入门到放弃:乖乖引导用户加白名单吧(附7大机型加白示例)

IM在Android上的保活问题经常在即时通讯网的论坛和技术群里被讨论,自从Android 8.0后系统大大降低了后台运行应用的保活容忍度(详见《Android P正式版即将到来:后台应用保活、消息推送的真正噩梦》),保活从黑科技横行的时代进入了技术蛮荒阶段,真要实现保活,技术难度越来越大。

发布于:3月以前  |  797次阅读  |  详细内容 »

安居客 Android APP 走向平台化 | 开发者说·DTalk

安居客 Android App 距离上次的模块化/组件化重构已经两年多了,重构之后很好的支撑了两年多以来的业务发展。但这个世界总是在向前走的,没有任何一种架构能够一劳永逸的解决所有问题,外部环境的不断变化相应的也要求项目架构做出改变,以此来应对环境变化所带来的挑战。

发布于:3月以前  |  602次阅读  |  详细内容 »

Android View 体系竟然还能这么理解?

很多小伙伴可能在学习view的绘制流程源码的时候有点抓不住重点,所以在分析代码的时候绕来绕去脑袋晕乎乎的。今天我就来给大家化繁为简,只关注它最核心的东西。

发布于:3月以前  |  780次阅读  |  详细内容 »

移动端常见崩溃指标

崩溃分析,是将 Android 和 iOS 平台常见的 APP 崩溃问题进行归类分析,帮助企业根据崩溃指标快速发现、定位问题。

发布于:3月以前  |  779次阅读  |  详细内容 »

最多阅读

简化Android的UI开发 11月以前  |  286084次阅读
Android设计与开发工作流 11月以前  |  2808次阅读
Google Enjarify:可代替dex2jar的dex反编译 1年以前  |  2681次阅读
30分钟搭建一个android的私有Maven仓库 1年以前  |  2440次阅读
Android多渠道打包工具:apptools 1年以前  |  2255次阅读
Google Java编程风格规范(中文版) 1年以前  |  2244次阅读
Android UI基本技术点 1年以前  |  2193次阅读
Android权限 - 第一篇 1年以前  |  2177次阅读
Stetho 1年以前  |  2105次阅读
2015 Google IO带来的新 Android 开发工具 1年以前  |  1991次阅读
你应该知道的布局和属性 1年以前  |  1962次阅读
听FackBook工程师讲*Custom ViewGroups* 1年以前  |  1938次阅读
MVP在Android平台上的应用 1年以前  |  1935次阅读
Gradle小知识#3:任务的顺序 1年以前  |  1908次阅读