baidu APP iOS暗黑模式適配的完美解決方案是怎樣的

baidu APP iOS暗黑模式適配的完美解決方案是怎樣的，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

一 背景

在2019WWDC的開場演講中，蘋果公布了即將推出的iOS13 DarkMode的新特性。此新特性不僅可以在夜晚保護(hù)視力，而且對于使用OLED的最新一代設(shè)備而言，也可以幫助用戶節(jié)省電量消耗。不過此特性只支持iOS13以上的系統(tǒng),為了給全系統(tǒng)所有用戶最好的體驗(yàn),研發(fā)出了一套皮膚主題框架,不僅可以全系統(tǒng)支持DarkMode，還可以擴(kuò)展多套皮膚主題;

二 皮膚主題框架的誕生 BDPAppearance

2.1 業(yè)務(wù)方使用方式

• 目前系統(tǒng)所有控件及其Color屬性和Image屬性均已支持, 此處只列舉兩個例子:

// UIColor
view.backgroundColor = BDPAppearanceColor(@"C1");

// UIImage
imageV.image = BDPAppearanceImage(@"icon");

業(yè)務(wù)方只需如上使用簡單的API設(shè)置Color和Image，即可實(shí)現(xiàn)主題換膚；

2.2 實(shí)現(xiàn)原理

先來看一下BDPAppearance設(shè)計(jì)方案的架構(gòu)圖

在項(xiàng)目初始化時，會先加載當(dāng)前主題所使用的色值資源到內(nèi)存中，相關(guān)控件通過 BDPAppearanceColor 用色名去找出對應(yīng)主題下的色值，實(shí)例化出UIColor對象，并賦值給這些相關(guān)控件;

而內(nèi)置的UIImage圖片是存放在Assets中的，通過BDPAppearanceImage用圖片名去加載當(dāng)前主題下的UIImage對象即可；

• UIColor分類和UIImage分類

可以看到圖中，給UIColor分類添加了ColorName屬性: 通過BDPAppearanceColor方式獲取UIColor實(shí)例對象時，通過分類會記錄當(dāng)前Color對象所使用的色號名;

同理，通過BDPAppearanceImage獲取UIImage時，通過分類會記錄當(dāng)前Image對象所使用的圖片名;

• changeTheme刷新主題

每一個控件初始化添加到父視圖的時候，在- (void)didMoveToSuperview的時機(jī)將其添加到NSHashTable中， 點(diǎn)擊切換主題時，通過NSHashTable拿到當(dāng)前視圖樹上所有的視圖控件，取出控件屬性中的UIColor和UIImage， 判斷其colorName和imageName是否有值，有值即代表當(dāng)前控件需要適配主題，則用此colorName或者imageName去加載當(dāng)前主題的新色值和新圖片，重新賦值給當(dāng)前控件即完成了主題切換。

三 設(shè)計(jì)思路

設(shè)計(jì)此皮膚主題框架的原則：

業(yè)務(wù)方在現(xiàn)有業(yè)務(wù)的基礎(chǔ)上以最低成本的方式進(jìn)行適配:即只需更換獲取顏色和圖片的方式

那么在基于上述原則的前提下，我們應(yīng)該如何在切換主題時，讓所有的控件重新刷新主題呢？

在項(xiàng)目初期時，采用通知的方案：在didMoveToSuperview方法中給當(dāng)前控件添加一個通知，當(dāng)收到切換主題的通知時,則刷新當(dāng)前控件的相關(guān)色值及圖片；

但是在做性能測試時，發(fā)現(xiàn)采用通知方式初始化，不僅會有一定CPU消耗，同時也會增加初始化的耗時，視圖層級越多，性能損耗越明顯，所以放棄了此方案; 我們的目的其實(shí)就是可以讓當(dāng)前所有的視圖可以觸發(fā)刷新邏輯，最終采用了NSHashTable弱持有控件的方案;

兩種方式性能測試數(shù)據(jù):

以下數(shù)據(jù)均是測試20次以上取的平均值;

壓力測試環(huán)境：視圖層級1w個View:

由以上測試數(shù)據(jù)得出: 在上萬個視圖量級下， HashTable 性能是遠(yuǎn)遠(yuǎn)優(yōu)于通知的方式

四 業(yè)界開源框架對比

以下是目前業(yè)界GitHub排名靠前的開源庫對比:

同時對比iOS13系統(tǒng)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開發(fā)習(xí)慣上的基礎(chǔ)上最接近系統(tǒng)方式的，改動代碼量是最小的;

五 客戶端整體主題通信設(shè)計(jì)

百度App涉及到主題相關(guān)模塊技術(shù)形態(tài)有：NA、H5、RN、HN等，而在多種技術(shù)形態(tài)下主題模式又是如何通信呢？可以參考下邊這張圖:

如圖所示：

• 初始化WKWebView時采用的方案：在UserAgent中拼接Key-Value的方式初始化WebView,達(dá)到在渲染時，最早時機(jī)拿到主題模式;

• 主題變化通信采用的方案：數(shù)據(jù)通道和端能力，其本質(zhì)是JS交互；

六 項(xiàng)目工程色值配置

• 6.1 端內(nèi)色值表的管理

整個百度App涉及近百個業(yè)務(wù),組件近三百個,色號表的管理也顯得尤為重要;

每個組件內(nèi)部所使用到的色號僅僅是有限個, 如果所有組件用到的色值都統(tǒng)一放入一個色值表中管理,顯然是不合理的,不利于解耦也更不利于組件化輸出;那么最優(yōu)的色值管理方式是什么呢？

如上圖所示，組件各自管理自己所需的色值表,在項(xiàng)目編譯時,會通過腳本將所有組件的色值表進(jìn)行色值去重后,合并成一個總的色值表存儲在Themes倉庫下,然后初始化主題資源時讀取Themes里邊總的色值表即可; 此種處理方式則達(dá)到了組件間解耦的目的;

• 6.2 Sketch插件:ThemeMeasure

早期的開發(fā)中，UE出圖都是用的Sketch導(dǎo)出HTML格式標(biāo)注圖,而根據(jù)百度App iOS相關(guān) CRD、FE 對實(shí)現(xiàn)技術(shù)的選型及配合要求，UE 需要提供并維護(hù)一套 NA+H5 色表，標(biāo)注界面時標(biāo)顏色的編號而非色值。為了達(dá)到此種效果，我們同期研發(fā)出了Sketch插件，可以在標(biāo)注界面直接顯示出色號，解決了UE標(biāo)注色號的痛點(diǎn)，大大提高了效率; 如下圖:

此插件共包含三種能力:

1.多種便捷方式助力色號標(biāo)注

• Theme Measure 可以讓設(shè)計(jì)師根據(jù)系統(tǒng)的推薦選擇色號進(jìn)行標(biāo)注，還有貼心的批量標(biāo)注向?qū)В淖兞诉^去設(shè)計(jì)師手動寫色號進(jìn)行標(biāo)注的方式

2.一鍵轉(zhuǎn)換深色、夜間等主題

• Theme Measure 能夠讓設(shè)計(jì)師一鍵將默認(rèn)主題轉(zhuǎn)換為深色、夜間或者其他主題（需要有相應(yīng)的色值數(shù)據(jù)，正確的色號標(biāo)注），改變了過去設(shè)計(jì)師需要手動逐一調(diào)整產(chǎn)出深色、夜間設(shè)計(jì)稿的方式，大幅提升設(shè)計(jì)師對多主題適配的工作效率及體驗(yàn)

3.熟悉的標(biāo)注導(dǎo)出方式，所有標(biāo)注均在一處

• 還是使用熟悉的工具導(dǎo)出標(biāo)注，色號、布局、字號等標(biāo)注均在同一個 HTML 文檔內(nèi)，改變了過去需要額外提供一份色號標(biāo)注的方式，提升設(shè)計(jì)與研發(fā)的協(xié)同效率與體驗(yàn)

在整套皮膚主題機(jī)制下業(yè)務(wù)方僅僅花了不到兩周的時間即完成了整個手百的主題適配，也從側(cè)面證實(shí)此框架的優(yōu)點(diǎn)：輕量級，使用成本低;

資源配置同時也支持云端下發(fā)，可動態(tài)新增多種主題;

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。