自如iOS換膚方案探究

語言: CN / TW / HK
時間 2022-03-22 04:15:14
主題:

一、前言：

往往到了重大的節假日，例如聖誕節、春節等，各大APP都會進行換膚，烘托喜慶的氣氛。購物類APP在618或者雙11的時候也會去換上自己的特色服裝，找了幾個APP分析了一下，大致有以下3種：

  1. 圖片資源直接放到APP包裡，介面控制是否顯示
  2. 介面返回圖片的地址，APP根據圖片地址去拿圖片
  3. 下載壓縮包，解壓後替換圖片 第一種方式會增加APP的包體積，現在為了使用者體驗，還是儘量不要去給使用者增加負擔。靈活替換也是一個問題，嚴重依賴於發版。

第二種方式圖片的地址是各自獨立的，圖片是各自下載，容易出現不完整性的情況，例如tabbar有一張圖失敗了，那豈不是換膚換了一半。

綜合以上考慮，第三種採用壓縮包的方式目前來說是比較推薦的。

下面針對我們詳細說明一下自如APP的換膚過程。

二、實戰

2.1 換膚流程

面板的替換流程圖如下:

huanfuliuchengtu.png

APP啟動後直接載入對應的面板檔案，同時非同步請求後臺面板介面，介面返回一個壓縮包連結，解壓後解析包裡的config.json檔案，然後通過通知去觸發換膚。 控制面板是否顯示的邏輯完全由後臺控制，後臺返回skinSign為空則關閉換膚.

2.2 實現方式

huanfujiagou2.png

面板管理元件分為網路模組、管理模組、Category

我們將面板管理器獨立Cocoapods元件，業務層依賴換膚元件即可。

下面看一下config.json檔案的內容示例:

{ "home_navi": { "colors": { "color_background": "#ffffff" }, "images": { "image_logo": "home_topLogo" } }, "home_tabbar": { "colors": { "color_background": "#F9F9F9", "color_button_normal": "#999999", "color_button_selected": "#444444" }, "images": { "image_one_button_normal": "tab按鈕1圖片", "image_one_button_selected": "tab按鈕1選中圖片", "image_two_button_normal": "tab按鈕2圖片", "image_two_button_selected": "tab按鈕2選中圖片", "image_three_button_normal": "tab按鈕2圖片", "image_three_button_selected": "tab按鈕2選中圖片" }, "values": { "value_one_button": "tab按鈕1", "value_two_button": "tab按鈕2", "value_three_button": "tab按鈕3" } }, "loading": { "resources": { "resource_refreshImage" : "refresh.gif" } } }

我們針對首頁導航(home_navi)、首頁tabbar(home_tabbar)、載入loading(loading)三個模組進行舉例。 在每個業務模組下都可以有4個功能模組分別是顏色(colors)、圖片(images)、值(values)、資源(resources)，這4個模組根據自己的需要進行新增。colors控制的是顏色，這裡我以16進位制值為準。images控制的是圖片，最普通的png檔案。values控制的是值。resources控制的是資原始檔，例如json、gif等檔案。

針對UIView我們建立了一個Category，在這個Category中新增方法，如下：

``` - (void)configSkinMapModule:(NSString )module skinMap:(NSDictionary )skinMap;

  • (void)configSkinMapModule:(NSString )module skinMap:(NSDictionary )skinMap { if (![ZRSkinManager sharedInstance].isOpenZRSkinManager) { return; } NSMutableDictionary tempDic = [skinMap mutableCopy]; for (NSUInteger i = 0; i < tempDic.allKeys.count; i ++) { NSString key = tempDic.allKeys[i]; NSString *value = tempDic[key]; tempDic[key] = [NSString stringWithFormat:@"%@.%@",module,value]; } self.skinMap = [tempDic copy]; } ```

然後我們在需要換膚的模組上註冊一下，例如我們給tabbar的第一個按鈕新增一下換膚功能，程式碼如下:

[_tabbarButton configSkinMapModule:kSkin_MODULE_HOME_TABBAR skinMap: @{kSkinMapKey_button_image : @"image_one_button_normal", kSkinMapKey_button_selectedImage : @"image_one_button_selected", kSkinMapKey_button_titleColor : @"color_button_normal", kSkinMapKey_button_titleSelectedColor : @"color_button_selected", kSkinMapKey_button_title : @"value_one_button" }]; 執行了以上程式碼之後發生了什麼呢？我會在skinMap的set方法中給此_tabbarButton加上NSNotificationCenter

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(skinChanged) name:kZRSkinDidChangeNotification object:nil]; 當要換膚的時候，我們會觸發kZRSkinDidChangeNotification通知。

那麼skinChanged方法做了哪些操作呢？

我會建立一個SkinConstants檔案去定義一下替換的方式標識。

``` // button相關 static NSString * const kSkinMapKey_button_image = @"kSkinMapKey_button_image"; static NSString * const kSkinMapKey_button_highlightedImage = @"kSkinMapKey_button_highlightedImage"; static NSString * const kSkinMapKey_button_selectedImage = @"kSkinMapKey_button_selectedImage"; static NSString * const kSkinMapKey_button_disabledImage = @"kSkinMapKey_button_disabledImage"; static NSString * const kSkinMapKey_button_titleColor = @"kSkinMapKey_button_titleColor"; static NSString * const kSkinMapKey_button_titleHighlightedColor = @"kSkinMapKey_button_titleHighlightedColor"; static NSString * const kSkinMapKey_button_titleSelectedColor = @"kSkinMapKey_button_titleSelectedColor"; static NSString * const kSkinMapKey_button_titleDisabledColor = @"kSkinMapKey_button_titleDisabledColor"; static NSString * const kSkinMapKey_button_title = @"kSkinMapKey_button_title";

// label相關 static NSString * const kSkinMapKey_label_text = @"kSkinMapKey_label_text"; static NSString * const kSkinMapKey_label_textColor = @"kSkinMapKey_label_textColor"; static NSString * const kSkinMapKey_label_backgroundColor = @"kSkinMapKey_label_backgroundColor";

// imageview相關 static NSString * const kSkinMapKey_imageView_image = @"kSkinMapKey_imageView_image"; static NSString * const kSkinMapKey_imageView_gif = @"kSkinMapKey_imageView_gif"; // gif動畫 static NSString * const kSkinMapKey_imageView_backgroundColor = @"kSkinMapKey_imageView_backgroundColor"; ``` 相信從名字你們就能看出來，每一個定義都是UIKit裡面的一個方法。

然後我說一下剛才那個Category中加的方法，其中module對應的正是config.json中的業務模組，例如home_navi。skinMap中的key是替換的方式標識正是SkinConstants中的定義，value則是config.json中的對應的模組的key值。 也就是上面加的方法的意思是給這個home_navi業務模組中的某一個button增加了修改普通模式圖片(kSkinMapKey_button_image)、修改選中模式圖片(kSkinMapKey_button_selectedImage)、普通模式文字顏色(kSkinMapKey_button_titleColor)、修改選中模式圖片(kSkinMapKey_button_selectedImage)、修改文字值(kSkinMapKey_button_title)的功能。

我們在通知觸發方法中使用如下程式碼去執行替換過程

- (void)changeSkin { NSDictionary *map = self.skinMap; if ([self isKindOfClass:[UIButton class]]) { UIButton *obj = (UIButton *)self; if (map[kSkinMapKey_button_image]) { [obj setImage:SkinImage(map[kSkinMapKey_button_image]) forState:UIControlStateNormal]; } if (map[kSkinMapKey_button_highlightedImage]) { [obj setImage:SkinImage(map[kSkinMapKey_button_highlightedImage]) forState:UIControlStateHighlighted]; } if (map[kSkinMapKey_button_selectedImage]) { [obj setImage:SkinImage(map[kSkinMapKey_button_selectedImage]) forState:UIControlStateSelected]; } if (map[kSkinMapKey_button_disabledImage]) { [obj setImage:SkinImage(map[kSkinMapKey_button_disabledImage]) forState:UIControlStateDisabled]; } if (map[kSkinMapKey_button_titleColor]) { [obj setTitleColor:SkinColor(map[kSkinMapKey_button_titleColor]) forState:UIControlStateNormal]; } ...以下省略... } 同時我本地會存有一個localConfig.json用於管理本地的需要替換面板的模組，內容和config.json一模一樣。只是他取的都是本地預設的面板資源配置。 SkinImage是處理images模組的，這個巨集定義是pngResourceForSign:方法的巨集，用於去處理該載入哪個圖片檔案。 關於colors、resources等其他模組我就不一一介紹了，都是大同小異。 // 獲取Png資源 - (UIImage *)pngResourceForSign:(NSString *)sign; { NSArray *array = [sign componentsSeparatedByString:@"."]; NSString *module = array.firstObject; NSString *key = array.lastObject; NSDictionary *moduleDic = self.configData[module]; NSDictionary *imageDic = moduleDic[@"images"]; NSString *value = imageDic[key]; // 這裡已經在初始化的時候做了判斷，self.path有值則為後臺面板，無值則為本地預設面板。 if (!self.path.length) { return [UIImage imageNamed:value]; } NSString *filePath = [self.path stringByAppendingFormat:@"/%@",value]; UIImage *image = [UIImage imageWithContentsOfFile:filePath]; return image; } 以上就是換膚的核心思路部分，主要就是通過Category的方式，使每一個UIView都擁有換膚的能力，然後通過NSNotificationCenter的方式觸發。面板下載，面板管理等部分就不一一介紹了。

三、結語：

換膚的方式千千萬，但基於iOS的特性都離不開Category，如果你還有其他的方案，歡迎一起交流。

參考資料： 1. github·ThemeManager 2. github·SwiftTheme 3. iOS換膚方案 4. github·EasyTheme 5. 「節日換膚」通用技術方案__iOS端實現

本文作者：自如大前端研發中心-曲茵

招聘資訊

自如大前端研發中心招募新同學！

FE/iOS/Android工程師

公司福利有： - 全額五險一金，並額外購買商業保險 - 免費健身房+年度體檢 - 公司附近租房9折優惠 - 每年2次晉升機會 辦公地點：北京酒仙橋普天實業科技園 歡迎對技術有執著熱愛的你加入我們！簡歷請投遞 [email protected], 或加微信 v-nice-v 詳聊！

「」