【首发】根据壁纸修改 App 主题，它真的来了

作者：yechaoa

2022 年 6 月 09 日
本文字数：3186 字
阅读完需：约 10 分钟

1、前言

曾经产品经理的奇思妙想，现在终于可以实现了...

2、效果

效果中，原本是红色壁纸对应的红色 App 主题，在改成绿色壁纸之后，App 主题也相应的变成绿色了。

模拟器演示略微小卡...

3、介绍

这个效果主要是使用了 Material You 中的动态颜色功能。

3.1、什么是 Material You

Material You也称 Material3 或 M3，是第三代 Material Design 设计语言。

Material You 将颜色重新定义为更加个性化的体验，助力于构建出色且富有表现力的应用。

3.2、什么是动态颜色

动态颜色（Dynamic Color）是 Material You 的关键部分，通过动态配色提取算法从用户的壁纸中派生出颜色方案，且符合无障碍使用的标准，亦或是自定义的个性化颜色方案，然后应用于系统 UI 和应用程序，从而让设备变得更加个性化。

3.3、动态颜色的原理是什么

首先，从用户的壁纸上提取一种源颜色，并推算出 5 中关键颜色，比如 primary、Secondary、Tertiary 等。
然后，将每个关键颜色转化为由 13 种色调组成的调色板，且每种色调会生成对应的浅、深色方案。
最后，通过系统 Token 将从壁纸提取的颜色方案和 App Theme 关联起来，在 DynamicColorsActivityLifecycleCallbacks 中判断是否需要覆盖。

4、实现

4.1、迁移到 M3

4.1.1、更新 Gradle 依赖

升级material库版本到1.5.0及以上

implementation 'com.google.android.material:material:1.5.0'

复制代码

4.1.2、修改版本

修改compileSdkVersion和targetSdkVersion到31及以上

android {    compileSdkVersion 31    defaultConfig {        applicationId "com.yechaoa.materialdesign"        minSdkVersion 23        targetSdkVersion 31        ...    }    ... }

复制代码

备注：在Android12上，为增强安全性，需要对所有的四大组件（带有 intent-filter）添加android:exported属性。

4.1.3、修改 App 主题

将Theme.AppCompat.*或Theme.MaterialComponents.* 改为 Theme.Material3.*

    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">            </style>

复制代码

4.2、添加动态颜色

4.2.1、应用动态颜色

class App: Application() {
    override fun onCreate() {        super.onCreate()
        // apply dynamic color        DynamicColors.applyToActivitiesIfAvailable(this)    }}

复制代码

在Application中应用动态颜色能力，除 applyToActivitiesIfAvailable(@NonNull Application application)方法之外主要还有：

applyToActivitiesIfAvailable(@NonNull Application application, @StyleRes int theme) 第二个参数表示自定义的覆盖系统的 theme
applyIfAvailable(@NonNull Activity activity) 或是某一个 Activity
applyIfAvailable(@NonNull Activity activity, @StyleRes int theme) 或是只有某一个 Activity 覆盖
等等

这里直接整个 App 都使用动态颜色。也可以在 App 中通过开关的形式来决策。

4.2.2、注册到 manifest

通过android:name来注册我们自定义的 Application

    <application        android:name=".App"        ...        android:theme="@style/AppTheme">        ...    </application>

复制代码

4.2.3、使用动态颜色

我们过去在使用颜色时可能是硬编码，比如这样：

android:background="@color/colorPrimary"

复制代码

现在颜色的色值不确定了，应改为动态访问的方式：

android:background="?attr/colorPrimary"

复制代码

OK，至此已经可以在 Android 12 上试试动态颜色的效果了。

Author：yechaoa

4.3、Material Theme Builder

在4.2.1中，我们提到 applyIfAvailable(@NonNull Activity activity, @StyleRes int theme) ，可以通过第二个参数只给某一个 Activity 覆盖 Theme。

场景还是有很多的，比如某个特殊的页面就是需要不一样的主题，再比如在国庆节这天 App 的首页一定要是红色的。

官方其实也考虑到了这种场景，并提供了Material Theme Builder（Figma&Web）工具进行可视化自定义。

下面主要介绍Material Theme Builder在 Web 上的使用。

4.3.1、壁纸预览

截图是自带的效果，在右下角可以点击add your wallpaper添加你的壁纸并查看显示效果。

4.3.2、自定义 Theme

点击顶部的CUSTOM Tab 可以进入自定义页面。

左边的核心颜色可以自定义修改，并可以添加扩展颜色。

中间是实时效果，右边是调色板。

在右上角有一个EXPORT导出按钮

除了可以应用 Android，还有Flutter和Web。

导出的文件包含日间模式和夜间模式的 Color 和 Theme 文件，可以直接 copy 到项目中使用。

4.3.3、Theme 覆盖

基于规范，覆盖的主题最好是加上overlay标示，比如：

    <style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">        <item name="colorPrimary">@color/overlay_colorPrimary</item>        ...    </style>

复制代码

代码应用：

    DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme.Overlay)

复制代码

也可以添加一个开关，让用户可以在动态颜色和自定义颜色来回切换。

4.4、是否支持动态颜色

基于 Android 的开源，可能并不是每个厂商的 Android12 设备都支持动态颜色。

所以官方也提供了 Api 进行判断：

  @SuppressLint("DefaultLocale")  @ChecksSdkIntAtLeast(api = VERSION_CODES.S)  public static boolean isDynamicColorAvailable() {    if (VERSION.SDK_INT < VERSION_CODES.S) {      return false;    }    DeviceSupportCondition deviceSupportCondition =        DYNAMIC_COLOR_SUPPORTED_MANUFACTURERS.get(Build.MANUFACTURER.toLowerCase());    if (deviceSupportCondition == null) {      deviceSupportCondition = DYNAMIC_COLOR_SUPPORTED_BRANDS.get(Build.BRAND.toLowerCase());    }    return deviceSupportCondition != null && deviceSupportCondition.isSupported();  }

复制代码

截止目前，跟进的厂商有：

    deviceMap.put("oppo", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("realme", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("oneplus", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("vivo", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("xiaomi", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("motorola", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("itel", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("tecno mobile limited", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("infinix mobility limited", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("hmd global", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("sharp", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("sony", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("tcl", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("lenovo", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("lge", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("google", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("robolectric", DEFAULT_DEVICE_SUPPORT_CONDITION);    deviceMap.put("samsung", SAMSUNG_DEVICE_SUPPORT_CONDITION);

复制代码

5、总结

总的来说，这个功能还是非常 nice 的，可以让你的 App 在 Android12 上表现的更加个性化且富有表现力。

但还是能识别出很多成本的，比如 targetSdkVersion 升级到 31，Theme 迁移到 Material3，以及升级后的整包回归。

所以，个人建议，对于老项目最好是申请专项来做，其实更建议用新项目来尝鲜。

6、Github

https://github.com/yechaoa/MaterialDesign

7、文档

8、最后

写作不易，感谢点赞支持 ^ - ^

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=pyfutl3ynk2b

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/feeffeea6204d6b17021175f1】。

yechaoa

关注

优质作者 2018.10.23 加入

知名互联网大厂技术专家，多平台博客专家、优秀博主、人气作者，博客风格深入浅出，专注于Android领域，同时探索于大前端方向，持续研究并落地前端、小程序、Flutter、Kotlin等相关热门技术

发布

暂无评论

创作场景

【首发】根据壁纸修改 App 主题，它真的来了

1、前言

2、效果

3、介绍

3.1、什么是 Material You

3.2、什么是动态颜色

3.3、动态颜色的原理是什么

4、实现

4.1、迁移到 M3

4.1.1、更新 Gradle 依赖

4.1.2、修改版本

4.1.3、修改 App 主题

4.2、添加动态颜色

4.2.1、应用动态颜色

4.2.2、注册到 manifest

4.2.3、使用动态颜色

4.3、Material Theme Builder

4.3.1、壁纸预览

4.3.2、自定义 Theme

4.3.3、Theme 覆盖

4.4、是否支持动态颜色

5、总结

6、Github

7、文档

8、最后

yechaoa

评论