[Swift And OC] 聊一聊換膚方案

一、前言

一個App發展到后期,沒有幾套主題,完全拿不出手啊。特別是toB的公 司,客戶要求自己的個性更是正常不過的需求了。換膚是個細活、細活、細活,重要的事說三遍,方案設計也是相當關鍵。

二、方案對比

2.1 換膚要處理的問題

1.配置抽離。
2.已存在界面的動態變換。

2.2 分析

針對第一點,確實沒太多說道,主要是和UI撕抽取公共配置和細節配置,這是一個細活。而界面的動態變換,這是一個麻煩事。

2.2.1 通知切換主題

這個事我們首先想到的就是通知,但是用通知太麻煩了,監聽移除一個改變寫兩地。而且一個大型app,很多view其實并沒有屬性引用,使用通知又需要把這些view屬性引用出來,無形中增加了很多工作量。既然已經有通知保底了,我們何不嘗試一下其它方案。

2.2.2 RX OR RAC

針對上面所說關于通知的兩個問題,我們使用 ReactiveCocoa 或 RXSwift 來優雅的處理這個問題。不過大部分項目并沒有使用鏈式編程,為了換膚導入貌似不太劃算。

2.2.3 使用block來處理

在項目中建一個單例來管理配置,將所有顏色配置代碼塊放入block中并加入到單例的數組中管理,在切換主題時,遍歷數組執行一遍block即可。當然使用時要注意block引用問題,保證視圖的正常釋放,隨著app的使用block會越來越多,要及時清理已釋放view的block。

三、block方案的實現

寫了個小Demo具體可看 github -ArtChangeTheme 下面做一些簡單的講解。

3.1 配置的模塊劃分

換膚是個細活,項目過大就需要進行模塊劃分,每個人負責自己的模塊,看似麻煩的事分到個人也就不多了。Demo寫了 Module1到Module4 四個模塊,每個模塊下都建了一個UIStyle文件夾用于管理當前模塊的配置。公共UIStyle則和模塊目錄同級。通過分類擴展。

- (NSString *)getStyleName_Module1;
每個模塊都要寫該方法,用于返回本模塊使用的配置文件plist。
方法的命名規則是  getStyleName_模塊名。 以此解耦,解耦思路是參考
測試用例執行所有 以test開頭的方法,為此寫了個分類NSObject+ArtPrefix。

3.2 配置的解析

配置plist圖示

如上圖模塊下配置分為 Image 與 Style,Image為圖片配置,

3.2.1 圖片的配置

toPath表示圖片所在的相對文件夾,imageConfigs里面包含了需要動態配置的文件名以及備注,這是一個規范,我們可以很清楚的看到處理了哪些圖片,如果打包動態替換主題,也可通過該配置去替換需要的圖片。

3.2.2 Style樣式配置

color:000000,0.5 前面表示 Hex設置 0.5表示透明度。
font: 表示字體大小。
還有 ArtLayoutInfo 類對應的屬性 是用于描述約束關系配置的,比如某些客戶可能對 banner 的寬高比有所要求,這個可以在這做擴展配置。

3.3 block方案接口設計

- (void)saveStrongSelf:(id)strongSelf block:(void(^)(id weakSelf))aBlock;

如上:考慮代碼的調用方便,和block及時的清理標記,設計了如上的調用接口,這樣大家不用寫__weak typeof(self) weakSelf = self,這么麻煩,但是如果block內有用非weakSelf. 調用的view請注意弱引用聲明。
ArtUIStyleManager內部開啟了定時器(默認60s可設置clearInterval控制間隔)去檢測清理無用的block。實現原理是將 strongSelf 弱引用存儲,檢測其被釋放后刪除對應的block。至于弱引用存儲的實現大家可以看看 iOS - 如何實現弱引用字典,我這里使用的是block封裝與解封。這種小技巧平時用不到,關鍵時刻還是能幫你一把的。

  - (void)reloadStylePath:(NSString *)aStylePath;
  - (void)reloadStyleBundleName:(NSString *)aStyleBundleName;
  - (void)reloadStyleBundle:(NSBundle *)aStyleBundle;
  這三個方法是用于加載其它樣式的,具體可看demo中ArtModule4ViewController。

四、幾個小技巧

4.1 能用Color解決的就別麻煩UI出新圖了

很多UI控件都有個 tintColor 屬性,很多圖片是純色的,大家直接通過tintColor渲染就好了。Demo也提供了一個分類UIImage+ArtDraw來進行渲染繪制。不過我遇到了一個坑,我把渲染的圖做了拉伸,點擊了返回時,顏色還原成圖片本身的顏色。大家使用時注意一下即可。

4.2 iOS 8后系統自動會將@3x圖片自動適配圖片

如題,大家搜一下即可,也就是說來張@3x即可,要適配iOS8 一下的話,自己用代碼切一下也是沒問題的。不過雖說系統自動適配,但是我在1x的老iPad上出現了圖片虛化有毛邊的情況,加了1x圖就好很多,這個大家自己看著辦。

4.3 為什么不用iconfont呢

在iOS開發中使用iconfont圖標
為什么不用呢?唉,長嘆一聲。

五、來個HotReloader

HotReloader演示

換膚這個事,最蛋疼的應該是,改一點跑一次代碼,這個耗時太久了,加一個小插件ArtUIStyleHotReloader 修改之后,command+s ,就能動態變了,當然只能模擬器使用。代碼很簡單,感謝VKCssProtocol

六、結尾

2017.08.28,今天是個好日子,但是出了點事,心情不太好,這篇文章也就簡單的寫寫了。這個OC在原有的一些上面擴展的ArtUIStyle看著可能有些臃腫。改天抽空寫個swift版的,還是這個 github -ArtChangeTheme。趕緊去github給個小星星吧。
換膚這個事,UI自己要有套設計規范,如果前期沒有規范不要緊,做個換膚看他還有沒規范,再沒規范大家就GG了。最后來個擴展閱讀 VKCssProtocol

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,247評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,520評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,362評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,805評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,541評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,896評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,887評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,062評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,608評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,356評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,555評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,077評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,769評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,175評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,489評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,289評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,516評論 2 379

推薦閱讀更多精彩內容