写点什么

iOS 暗黑模式适配的完美解决方案

  • 2019-12-26
  • 本文字数:2695 字

    阅读完需:约 9 分钟

iOS暗黑模式适配的完美解决方案

一 背景

在 2019WWDC 的开场演讲中,苹果公布了即将推出的 iOS13 DarkMode 的新特性。此新特性不仅可以在夜晚保护视力,而且对于使用 OLED 的最新一代设备而言,也可以帮助用户节省电量消耗。不过此特性只支持 iOS13 以上的系统,为了给全系统所有用户最好的体验,研发出了一套皮肤主题框架,不仅可以全系统支持 DarkMode,还可以扩展多套皮肤主题;

二 皮肤主题框架的诞生 BDPAppearance

2.1 业务方使用方式

  • 目前系统所有控件及其 Color 属性和 Image 属性均已支持, 此处只列举两个例子:


// UIColorview.backgroundColor = BDPAppearanceColor(@"C1");
// UIImageimageV.image = BDPAppearanceImage(@"icon");
复制代码


业务方只需如上使用简单的 API 设置 Color 和 Image,即可实现主题换肤;

2.2 实现原理

先来看一下 BDPAppearance 设计方案的架构图



在项目初始化时,会先加载当前主题所使用的色值资源到内存中,相关控件通过 BDPAppearanceColor 用色名去找出对应主题下的色值,实例化出 UIColor 对象,并赋值给这些相关控件;


而内置的 UIImage 图片是存放在 Assets 中的,通过 BDPAppearanceImage 用图片名去加载当前主题下的 UIImage 对象即可;


  • UIColor 分类和 UIImage 分类

  • 可以看到图中,给 UIColor 分类添加了 ColorName 属性: 通过 BDPAppearanceColor 方式获取 UIColor 实例对象时,通过分类会记录当前 Color 对象所使用的色号名;

  • 同理,通过 BDPAppearanceImage 获取 UIImage 时,通过分类会记录当前 Image 对象所使用的图片名;

  • changeTheme 刷新主题

  • 每一个控件初始化添加到父视图的时候,在- (void)didMoveToSuperview 的时机将其添加到 NSHashTable 中, 点击切换主题时,通过 NSHashTable 拿到当前视图树上所有的视图控件,取出控件属性中的 UIColor 和 UIImage, 判断其 colorName 和 imageName 是否有值,有值即代表当前控件需要适配主题,则用此 colorName 或者 imageName 去加载当前主题的新色值和新图片,重新赋值给当前控件即完成了主题切换。

三 设计思路

设计此皮肤主题框架的原则:


业务方在现有业务的基础上以最低成本的方式进行适配:即只需更换获取颜色和图片的方式


那么在基于上述原则的前提下,我们应该如何在切换主题时,让所有的控件重新刷新主题呢?


在项目初期时,采用通知的方案:在 didMoveToSuperview 方法中给当前控件添加一个通知,当收到切换主题的通知时,则刷新当前控件的相关色值及图片;


但是在做性能测试时,发现采用通知方式初始化,不仅会有一定 CPU 消耗,同时也会增加初始化的耗时,视图层级越多,性能损耗越明显,所以放弃了此方案; 我们的目的其实就是可以让当前所有的视图可以触发刷新逻辑,最终采用了 NSHashTable 弱持有控件的方案;


两种方式性能测试数据:


以下数据均是测试 20 次以上取的平均值;


压力测试环境:视图层级 1w 个 View:


真机iphone5s初始化CPU消耗初始化耗时
正常50%3312ms
HashTable50%3341ms
Notification99%5115ms


由以上测试数据得出: 在上万个视图量级下, HashTable 性能是远远优于通知的方式

四 业界开源框架对比

以下是目前业界 GitHub 排名靠前的开源库对比:



同时对比 iOS13 系统 API 适配的方式:


UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {            return [UIColor blackColor];        } else {            return [UIColor whiteColor];        }    }];
view.backgroundColor = dynamicColor;
复制代码


对比可以看出:BDPAppearance 使用方式是在保留 RD 开发习惯上的基础上最接近系统方式的,改动代码量是最小的;

五 客户端整体主题通信设计

百度 App 涉及到主题相关模块技术形态有:NA、H5、RN、HN 等,而在多种技术形态下主题模式又是如何通信呢?可以参考下边这张图:



如图所示:


  • 初始化 WKWebView 时采用的方案:在 UserAgent 中拼接 Key-Value 的方式初始化 WebView,达到在渲染时,最早时机拿到主题模式;

  • 主题变化通信采用的方案:数据通道和端能力,其本质是 JS 交互;

六 项目工程色值配置

  • 6.1 端内色值表的管理


整个百度 App 涉及近百个业务,组件近三百个,色号表的管理也显得尤为重要;


每个组件内部所使用到的色号仅仅是有限个, 如果所有组件用到的色值都统一放入一个色值表中管理,显然是不合理的,不利于解耦也更不利于组件化输出;那么最优的色值管理方式是什么呢?



如上图所示,组件各自管理自己所需的色值表,在项目编译时,会通过脚本将所有组件的色值表进行色值去重后,合并成一个总的色值表存储在 Themes 仓库下,然后初始化主题资源时读取 Themes 里边总的色值表即可; 此种处理方式则达到了组件间解耦的目的;


  • 6.2 Sketch 插件:ThemeMeasure


早期的开发中,UE 出图都是用的 Sketch 导出 HTML 格式标注图,而根据百度 App iOS 相关 CRD、FE 对实现技术的选型及配合要求,UE 需要提供并维护一套 NA+H5 色表,标注界面时标颜色的编号而非色值。为了达到此种效果,我们同期研发出了 Sketch 插件,可以在标注界面直接显示出色号,解决了 UE 标注色号的痛点,大大提高了效率; 如下图:



此插件共包含三种能力:


  • 1.多种便捷方式助力色号标注

  • Theme Measure 可以让设计师根据系统的推荐选择色号进行标注,还有贴心的批量标注向导,改变了过去设计师手动写色号进行标注的方式

  • 2.一键转换深色、夜间等主题

  • Theme Measure 能够让设计师一键将默认主题转换为深色、夜间或者其他主题(需要有相应的色值数据,正确的色号标注),改变了过去设计师需要手动逐一调整产出深色、夜间设计稿的方式,大幅提升设计师对多主题适配的工作效率及体验

  • 3.熟悉的标注导出方式,所有标注均在一处

  • 还是使用熟悉的工具导出标注,色号、布局、字号等标注均在同一个 HTML 文档内,改变了过去需要额外提供一份色号标注的方式,提升设计与研发的协同效率与体验


在整套皮肤主题机制下业务方仅仅花了不到两周的时间即完成了整个手百的主题适配,也从侧面证实此框架的优点:轻量级,使用成本低;


资源配置同时也支持云端下发,可动态新增多种主题;

七 支持自动跟随系统主题变化以及动画切换

00:00 / 00:00
    1.0x
    • 3.0x
    • 2.5x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00

    八 总结

    本文主要从皮肤主题框架实现、色值表的管理以及配套工具链等方面详细的介绍了百度 App iOS 暗黑模式的适配,欢迎业内的朋友一起交流学习;


    本文转载自公众号百度 App 技术。


    原文链接


    https://mp.weixin.qq.com/s?__biz=MzUxMzk2ODI1NQ==&mid=2247483925&idx=1&sn=90a668648fa9c57e8b6a2adac0556bb7&chksm=f94c5305ce3bda13745d6fce34661dd3a5720958bae5376a34de8087b3d6da508649c752ac0c&scene=27#wechat_redirect


    2019-12-26 09:305748

    评论

    发布
    暂无评论
    发现更多内容

    商城风格也可以很多变,DIY 了解一下!

    CRMEB

    面试官:你简历上说精通mysql,那你说下聚簇/联合/覆盖索引、回表、索引下推

    Java全栈架构师

    MySQL 数据库 程序员 面试 java架构

    记一次给OpenHarmony提交代码的过程

    坚果

    OpenHarmony 6月月更

    语法"陷阱"

    fy

    c 语法陷阱

    绕过技术聊"跨端"......

    hiisea

    前端架构 前端框架 跨端开发 小程序框架 跨端框架

    读配置、讲原理、看面试真题,我只能帮你到这了。。。

    阿Q说代码

    redis 主从架构 增量同步 全量同步 过期key处理

    SDN系统方法 | 9. 接入网

    俞凡

    架构 网络 sdn SDN系统方法

    模块五(微博评论)

    Geek_701557

    地理位置数据存储方案——Redis GEO

    程序员架构进阶

    redis 源码剖析 geo 6月日更 6月月更

    程序猿职业发展9项必备软技能

    慕枫技术笔记

    职业发展 6月月更

    Object.defineProperty也能监听数组变化?

    德育处主任

    JavaScript Vue 原理分析 数据变更跟踪 6月月更

    牛客java选择题每日打卡Day2

    京与旧铺

    6月月更

    词法陷阱(C)

    fy

    c C陷阱与缺陷

    Mysql 源码阅读(二)登录连接调试

    MySQL 源码

    说下你对方法区演变过程和内部结构的理解

    阿Q说代码

    Java JVM 方法区 元空间 永久代

    学习React源码的五个层次

    郭明

    React

    Neat Syntax Design of an ETL Language (Part 2)

    Bright

    数据开发 ETL 大数据开发 EasySQL

    16 种企业架构策略

    涛哥 数字产品和业务架构

    企业架构

    揭秘GaussDB(for Redis):全面对比Codis

    华为云开发者联盟

    数据库 后端 算力

    不要小看了积分商城,它的作用可以很大!

    CRMEB

    Wireshark的HTTP请求包和响应包如何对应

    程序员欣宸

    Wireshark 6月月更

    Rxjs TakeUntil 操作符的学习笔记

    汪子熙

    typescript 响应式编程 angular RXJS 6月月更

    编程技巧│提高 Javascript 代码效率的技巧

    JavaScript 编程效率 6月月更 美化程序

    2022年首期Techo Day腾讯技术开放日将于6月28日线上举办

    科技热闻

    论一个优秀红队人员的自我修养

    穿过生命散发芬芳

    6月月更 攻防演练 自我修养

    Linux网络编程_网卡操作指令与TCP协议介绍

    DS小龙哥

    6月月更 socket网络编程

    《睡眠公式》:怎么治睡不好?

    郭明

    读书笔记

    DevEco Studio 3.0编辑器配置技巧篇

    坚果

    OpenHarmony 6月月更

    Google I/O 2022: Android Jetpack 最新进展

    fundroid

    android Google android jetpack

    vue项目的创建和托管【ForVue3】

    Python研究所

    6月月更

    DDD概念复杂难懂,实际落地如何设计代码实现模型?

    Java全栈架构师

    程序员 后端 领域驱动设计 DDD 架构师

    iOS暗黑模式适配的完美解决方案_架构_liushaohua_InfoQ精选文章