一、前言:
往往到了重大的节假日,例如圣诞节、春节等,各大APP都会进行换肤,烘托喜庆的气氛。购物类APP在618或者双11的时候也会去换上自己的特色服装,找了几个APP分析了一下,大致有以下3种:
- 图片资源直接放到APP包里,接口控制是否显示
- 接口返回图片的地址,APP根据图片地址去拿图片
- 下载压缩包,解压后替换图片 第一种方式会增加APP的包体积,现在为了用户体验,还是尽量不要去给用户增加负担。灵活替换也是一个问题,严重依赖于发版。
第二种方式图片的地址是各自独立的,图片是各自下载,容易出现不完整性的情况,例如tabbar有一张图失败了,那岂不是换肤换了一半。
综合以上考虑,第三种采用压缩包的方式目前来说是比较推荐的。
下面针对我们详细说明一下自如APP的换肤过程。
二、实战
2.1 换肤流程
皮肤的替换流程图如下:
APP启动后直接加载对应的皮肤文件,同时异步请求后台皮肤接口,接口返回一个压缩包链接,解压后解析包里的config.json文件,然后通过通知去触发换肤。 控制皮肤是否显示的逻辑完全由后台控制,后台返回skinSign为空则关闭换肤.
2.2 实现方式
皮肤管理组件分为网络模块、管理模块、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,如果你还有其他的方案,欢迎一起交流。
参考资料:
本文作者:自如大前端研发中心-曲茵
招聘信息
自如大前端研发中心招募新同学!
FE/iOS/Android工程师
公司福利有:
- 全额五险一金,并额外购买商业保险
- 免费健身房+年度体检
- 公司附近租房9折优惠
- 每年2次晋升机会 办公地点:北京酒仙桥普天实业科技园 欢迎对技术有执着热爱的你加入我们!简历请投递 zhangxl122@ziroom.com, 或加微信 v-nice-v 详聊!