baidu APP iOS暗黑模式適配的完美解決方案是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專(zhuān)注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站定制方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及成都塑料袋等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶(hù)的尊重與認(rèn)可。
在2019WWDC的開(kāi)場(chǎng)演講中，蘋(píng)果公布了即將推出的iOS13 DarkMode的新特性。此新特性不僅可以在夜晚保護(hù)視力，而且對(duì)于使用OLED的最新一代設(shè)備而言，也可以幫助用戶(hù)節(jié)省電量消耗。不過(guò)此特性只支持iOS13以上的系統(tǒng),為了給全系統(tǒng)所有用戶(hù)最好的體驗(yàn),研發(fā)出了一套皮膚主題框架,不僅可以全系統(tǒng)支持DarkMode，還可以擴(kuò)展多套皮膚主題;
目前系統(tǒng)所有控件及其Color屬性和Image屬性均已支持, 此處只列舉兩個(gè)例子:
// UIColor view.backgroundColor = BDPAppearanceColor(@"C1"); // UIImage imageV.image = BDPAppearanceImage(@"icon");
業(yè)務(wù)方只需如上使用簡(jiǎn)單的API設(shè)置Color和Image，即可實(shí)現(xiàn)主題換膚；
先來(lái)看一下BDPAppearance設(shè)計(jì)方案的架構(gòu)圖
在項(xiàng)目初始化時(shí)，會(huì)先加載當(dāng)前主題所使用的色值資源到內(nèi)存中，相關(guān)控件通過(guò) BDPAppearanceColor 用色名去找出對(duì)應(yīng)主題下的色值，實(shí)例化出UIColor對(duì)象，并賦值給這些相關(guān)控件;
而內(nèi)置的UIImage圖片是存放在Assets中的，通過(guò)BDPAppearanceImage用圖片名去加載當(dāng)前主題下的UIImage對(duì)象即可；
UIColor分類(lèi)和UIImage分類(lèi)
可以看到圖中，給UIColor分類(lèi)添加了ColorName屬性: 通過(guò)BDPAppearanceColor方式獲取UIColor實(shí)例對(duì)象時(shí)，通過(guò)分類(lèi)會(huì)記錄當(dāng)前Color對(duì)象所使用的色號(hào)名;
同理，通過(guò)BDPAppearanceImage獲取UIImage時(shí)，通過(guò)分類(lèi)會(huì)記錄當(dāng)前Image對(duì)象所使用的圖片名;
changeTheme刷新主題
每一個(gè)控件初始化添加到父視圖的時(shí)候，在- (void)didMoveToSuperview的時(shí)機(jī)將其添加到NSHashTable中， 點(diǎn)擊切換主題時(shí)，通過(guò)NSHashTable拿到當(dāng)前視圖樹(shù)上所有的視圖控件，取出控件屬性中的UIColor和UIImage， 判斷其colorName和imageName是否有值，有值即代表當(dāng)前控件需要適配主題，則用此colorName或者imageName去加載當(dāng)前主題的新色值和新圖片，重新賦值給當(dāng)前控件即完成了主題切換。
設(shè)計(jì)此皮膚主題框架的原則：
業(yè)務(wù)方在現(xiàn)有業(yè)務(wù)的基礎(chǔ)上以最低成本的方式進(jìn)行適配:即只需更換獲取顏色和圖片的方式
那么在基于上述原則的前提下，我們應(yīng)該如何在切換主題時(shí)，讓所有的控件重新刷新主題呢？
在項(xiàng)目初期時(shí)，采用通知的方案：在didMoveToSuperview方法中給當(dāng)前控件添加一個(gè)通知，當(dāng)收到切換主題的通知時(shí),則刷新當(dāng)前控件的相關(guān)色值及圖片；
但是在做性能測(cè)試時(shí)，發(fā)現(xiàn)采用通知方式初始化，不僅會(huì)有一定CPU消耗，同時(shí)也會(huì)增加初始化的耗時(shí)，視圖層級(jí)越多，性能損耗越明顯，所以放棄了此方案; 我們的目的其實(shí)就是可以讓當(dāng)前所有的視圖可以觸發(fā)刷新邏輯，最終采用了NSHashTable弱持有控件的方案;
兩種方式性能測(cè)試數(shù)據(jù):
以下數(shù)據(jù)均是測(cè)試20次以上取的平均值;
壓力測(cè)試環(huán)境：視圖層級(jí)1w個(gè)View:
由以上測(cè)試數(shù)據(jù)得出: 在上萬(wàn)個(gè)視圖量級(jí)下， HashTable 性能是遠(yuǎn)遠(yuǎn)優(yōu)于通知的方式
以下是目前業(yè)界GitHub排名靠前的開(kāi)源庫(kù)對(duì)比:
同時(shí)對(duì)比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;對(duì)比可以看出：BDPAppearance使用方式是在保留RD開(kāi)發(fā)習(xí)慣上的基礎(chǔ)上最接近系統(tǒng)方式的，改動(dòng)代碼量是最小的;
百度App涉及到主題相關(guān)模塊技術(shù)形態(tài)有：NA、H5、RN、HN等，而在多種技術(shù)形態(tài)下主題模式又是如何通信呢？可以參考下邊這張圖:
如圖所示：
初始化WKWebView時(shí)采用的方案：在UserAgent中拼接Key-Value的方式初始化WebView,達(dá)到在渲染時(shí)，最早時(shí)機(jī)拿到主題模式;
主題變化通信采用的方案：數(shù)據(jù)通道和端能力，其本質(zhì)是JS交互；
6.1 端內(nèi)色值表的管理
整個(gè)百度App涉及近百個(gè)業(yè)務(wù),組件近三百個(gè),色號(hào)表的管理也顯得尤為重要;
每個(gè)組件內(nèi)部所使用到的色號(hào)僅僅是有限個(gè), 如果所有組件用到的色值都統(tǒng)一放入一個(gè)色值表中管理,顯然是不合理的,不利于解耦也更不利于組件化輸出;那么最優(yōu)的色值管理方式是什么呢？
如上圖所示，組件各自管理自己所需的色值表,在項(xiàng)目編譯時(shí),會(huì)通過(guò)腳本將所有組件的色值表進(jìn)行色值去重后,合并成一個(gè)總的色值表存儲(chǔ)在Themes倉(cāng)庫(kù)下,然后初始化主題資源時(shí)讀取Themes里邊總的色值表即可; 此種處理方式則達(dá)到了組件間解耦的目的;
6.2 Sketch插件:ThemeMeasure
早期的開(kāi)發(fā)中，UE出圖都是用的Sketch導(dǎo)出HTML格式標(biāo)注圖,而根據(jù)百度App iOS相關(guān) CRD、FE 對(duì)實(shí)現(xiàn)技術(shù)的選型及配合要求，UE 需要提供并維護(hù)一套 NA+H5 色表，標(biāo)注界面時(shí)標(biāo)顏色的編號(hào)而非色值。為了達(dá)到此種效果，我們同期研發(fā)出了Sketch插件，可以在標(biāo)注界面直接顯示出色號(hào)，解決了UE標(biāo)注色號(hào)的痛點(diǎn)，大大提高了效率; 如下圖:
此插件共包含三種能力:
1.多種便捷方式助力色號(hào)標(biāo)注
Theme Measure 可以讓設(shè)計(jì)師根據(jù)系統(tǒng)的推薦選擇色號(hào)進(jìn)行標(biāo)注，還有貼心的批量標(biāo)注向?qū)?，改變了過(guò)去設(shè)計(jì)師手動(dòng)寫(xiě)色號(hào)進(jìn)行標(biāo)注的方式
2.一鍵轉(zhuǎn)換深色、夜間等主題
Theme Measure 能夠讓設(shè)計(jì)師一鍵將默認(rèn)主題轉(zhuǎn)換為深色、夜間或者其他主題（需要有相應(yīng)的色值數(shù)據(jù)，正確的色號(hào)標(biāo)注），改變了過(guò)去設(shè)計(jì)師需要手動(dòng)逐一調(diào)整產(chǎn)出深色、夜間設(shè)計(jì)稿的方式，大幅提升設(shè)計(jì)師對(duì)多主題適配的工作效率及體驗(yàn)
3.熟悉的標(biāo)注導(dǎo)出方式，所有標(biāo)注均在一處
還是使用熟悉的工具導(dǎo)出標(biāo)注，色號(hào)、布局、字號(hào)等標(biāo)注均在同一個(gè) HTML 文檔內(nèi)，改變了過(guò)去需要額外提供一份色號(hào)標(biāo)注的方式，提升設(shè)計(jì)與研發(fā)的協(xié)同效率與體驗(yàn)
在整套皮膚主題機(jī)制下業(yè)務(wù)方僅僅花了不到兩周的時(shí)間即完成了整個(gè)手百的主題適配，也從側(cè)面證實(shí)此框架的優(yōu)點(diǎn)：輕量級(jí)，使用成本低;
資源配置同時(shí)也支持云端下發(fā)，可動(dòng)態(tài)新增多種主題;
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
