黑海洋 - IT技术知识库

iOS客户端节日换肤方案探究

发布时间: 2018-04-09分类:Web开发/Code热度: 1879

一、前言：

tip: 本来这篇文章在圣诞节就已经准备好了，但是由于种种原因一直没有写完，今天将它写出来，也算是2018年的第一篇文章了。你好，2018！

过去圣诞节是各大APP浓妆艳抹展现自己衣服的节日，今年的圣诞节似乎冷清了许多，只看到了几个APP换肤，那我就从中分析一下吧。

二、分析：

我认为目前的换肤主要分成3种，一种是返回图片的地址，APP再根据图片日志去取图片，另一种是下载zip包然后再解压去替换图标，再一种是图片资源放到包里，接口控制是否显示。

2.1 实现方式一：

我发现河狸家就是这个方式，为什么先以河狸家来举例呢？因为朋友说它太炫酷了！于是我就从它开始分析了。

我已经用越狱手机查看了河狸家APP的沙盒，并没有发现本地存储有皮肤文件。

于是我开始用Charles进行抓包，我在这个接口发现了疑似皮肤文件的配置信息。

如图：

于是我从img前缀的域名的中发下了请求到的皮肤文件，如图，这正是tabbar的背景图片。

值得称赞的是河狸家的png图片经过了webp压缩，这也是目前APP端主流的一个图片格式。

所以河狸家的方案是接口返回了皮肤的配置信息，配置信息中存有图片的地址信息，然后通过图片缓存框架去拿到图片的。

这种情况我认为一定做一下处理，让所有图片都缓存完毕后，再显示，不然可能会出现图片一个个闪现出来的情况，甚至于在网络不好的情况下，某个图片显示不出来的情况。这个情况我再另一个APP上见过，具体哪个我给忘记了（测试了好多APP，实在记不清了。。。）

2.2 实现方式二：

这里我以微店买家版进行一个举例，如图这是微店买家版圣诞节皮肤。

我同样是在安装APP后先看沙盒里是否有皮肤文件，同样并没有发现。下面直接去抓接口，我在assets的域名上发现了可疑的zip文件包。

如图：

解压这个zip文件后，发现了tabbar的图片资源。我同样在程序的沙盒里面发现了同样的文件。

如图：

图片资源拿到了，那么它们是如何替换的呢？我就以微店买家版进行举例来看一下。

我拿到微店买家版ipa脱壳后，我分别使用 Hopper Disassembler 和 class-dump 对主程序进行分析。最后发现如下信息：

从中可以看出它是使用的Category和KVO去实现了替换皮肤的过程。给UIButton等系统类添加一个Category，添加了设置皮肤的方法，通过KVO去实现了触发控制。
另外这里建议皮肤下载完成之后可以去立即触发换肤，我在测试百度糯米APP的时候发现它是第二次启动的时候才去替换，可能因为它是高频APP吧。

2.3 实现方式三：

这种方式我测试的几个APP中没有发现，听朋友说某知名APP曾经就采用过这个方式。这种方式是在发版前将皮肤文件存储到包内，通过后台接口控制去显示。这种情况的优点是便于控制，故障率小。缺点是包的体积过大，并且严重依赖于苹果爸爸的审核。

三、我的实现方式：

最近我也做了皮肤相关的功能，下面我说一下我的实现思路。
先上图，看一下我的APP控制逻辑。

我的实现思路类似微店的实现方式。但是我并没有使用KVO而是使用了通知注册的方式。
APP启动后直接加载对应的皮肤文件，同时另一个线程去请求后台皮肤接口，接口返回了一个zip包的链接，下载zip包，解压后，解析里面的config.json文件，然后我使用通知的方式去触发换肤。具体的思路逻辑相信流程图上已经画的很清楚了。
控制皮肤是否显示的逻辑完全由后台控制，后台返回skinSign为空则关闭皮肤。

下面看一下我的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;

假设我需要给导航栏添加换肤的功能，我只需要加上如下代码：

    [_tabbarButton configSkinMapModule:kSkin_MODULE_HOME_TABBAR skinMap:
 <span>@</span><span>{</span>kSkinMapKey_button_image <span>:</span> <span>@"image_one_button_normal"</span><span>,</span>
   kSkinMapKey_button_selectedImage <span>:</span> <span>@"image_one_button_selected"</span><span>,</span>
   kSkinMapKey_button_titleColor <span>:</span> <span>@"color_button_normal"</span><span>,</span>
   kSkinMapKey_button_titleSelectedColor <span>:</span> <span>@"color_button_selected"</span><span>,</span>
   kSkinMapKey_button_title <span>:</span> <span>@"value_one_button"</span>
   <span>}</span><span>]</span><span>;</span>

我会创建一个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 <span>*</span>map <span>=</span> <span>self</span><span>.</span>skinMap<span>;</span>
<span>if</span> <span>(</span><span>[</span><span>self</span> isKindOfClass<span>:</span><span>[</span>UIButton class<span>]</span><span>]</span><span>)</span> <span>{</span>
    UIButton <span>*</span>obj <span>=</span> <span>(</span>UIButton <span>*</span><span>)</span><span>self</span><span>;</span>
    <span>if</span> <span>(</span>map<span>[</span>kSkinMapKey_button_image<span>]</span><span>)</span> <span>{</span>
        <span>[</span>obj setImage<span>:</span><span>SkinImage</span><span>(</span>map<span>[</span>kSkinMapKey_button_image<span>]</span><span>)</span> forState<span>:</span>UIControlStateNormal<span>]</span><span>;</span>
    <span>}</span>
    <span>if</span> <span>(</span>map<span>[</span>kSkinMapKey_button_highlightedImage<span>]</span><span>)</span> <span>{</span>
        <span>[</span>obj setImage<span>:</span><span>SkinImage</span><span>(</span>map<span>[</span>kSkinMapKey_button_highlightedImage<span>]</span><span>)</span> forState<span>:</span>UIControlStateHighlighted<span>]</span><span>;</span>
    <span>}</span>
    <span>if</span> <span>(</span>map<span>[</span>kSkinMapKey_button_selectedImage<span>]</span><span>)</span> <span>{</span>
        <span>[</span>obj setImage<span>:</span><span>SkinImage</span><span>(</span>map<span>[</span>kSkinMapKey_button_selectedImage<span>]</span><span>)</span> forState<span>:</span>UIControlStateSelected<span>]</span><span>;</span>
    <span>}</span>
    <span>if</span> <span>(</span>map<span>[</span>kSkinMapKey_button_disabledImage<span>]</span><span>)</span> <span>{</span>
        <span>[</span>obj setImage<span>:</span><span>SkinImage</span><span>(</span>map<span>[</span>kSkinMapKey_button_disabledImage<span>]</span><span>)</span> forState<span>:</span>UIControlStateDisabled<span>]</span><span>;</span>
    <span>}</span>
    <span>if</span> <span>(</span>map<span>[</span>kSkinMapKey_button_titleColor<span>]</span><span>)</span> <span>{</span>
        <span>[</span>obj setTitleColor<span>:</span><span>SkinColor</span><span>(</span>map<span>[</span>kSkinMapKey_button_titleColor<span>]</span><span>)</span> forState<span>:</span>UIControlStateNormal<span>]</span><span>;</span>
    <span>}</span>
  <span>.</span><span>.</span><span>.</span>以下省略<span>.</span><span>.</span><span>.</span>
}

同时我本地会存有一个localConfig.json用于管理本地的需要替换皮肤的模块，内容和config.json一模一样。只是他取的都是本地默认的皮肤资源配置。
SkinImage是处理images模块的，这个宏定义是pngResourceForSign:方法的宏，用于去处理该加载哪个图片文件。
关于colors、resources等其他模块我就不一一介绍了，都是大同小异。

// 获取Png资源
- (UIImage )pngResourceForSign:(NSString )sign;
{
NSArray <span>*</span>array <span>=</span> <span>[</span>sign componentsSeparatedByString<span>:</span><span>@"."</span><span>]</span><span>;</span>
NSString <span>*</span>module <span>=</span> array<span>.</span>firstObject<span>;</span>
NSString <span>*</span>key <span>=</span> array<span>.</span>lastObject<span>;</span>
NSDictionary <span>*</span>moduleDic <span>=</span> <span>self</span><span>.</span>configData<span>[</span>module<span>]</span><span>;</span>
NSDictionary <span>*</span>imageDic <span>=</span> moduleDic<span>[</span><span>@"images"</span><span>]</span><span>;</span>
NSString <span>*</span>value <span>=</span> imageDic<span>[</span>key<span>]</span><span>;</span>
<span spellcheck="true">// 这里已经在初始化的时候做了判断，self.path有值则为后台皮肤，无值则为本地默认皮肤。</span>
<span>if</span> <span>(</span><span>!</span><span>self</span><span>.</span>path<span>.</span>length<span>)</span> <span>{</span>
    <span>return</span> <span>[</span>UIImage imageNamed<span>:</span>value<span>]</span><span>;</span>
<span>}</span>
NSString <span>*</span>filePath <span>=</span> <span>[</span><span>self</span><span>.</span>path stringByAppendingFormat<span>:</span><span>@"/%@"</span><span>,</span>value<span>]</span><span>;</span>
UIImage <span>*</span>image <span>=</span> <span>[</span>UIImage imageWithContentsOfFile<span>:</span>filePath<span>]</span><span>;</span>
<span>return</span> image<span>;</span>
}

上面的例子就是_tabbarButton执行configSkinMapModule:skinMap:方法注册了一个通知，判断后台是否启用换肤，启动换肤则加载config.json文件，没有则加载localConfig.json本地默认皮肤。
以上就是我实现换肤方式的一个思路。

四、总结：

以上各种实现方式都各有各的好处，我的实现方式也有需要优化的地方，例如可以在后台接口上加入时间控制，可以实现提前的缓存方案，而不必每次都是在用户眼皮底下换。如果你有更好的实现方案欢迎一起交流。

参考资料：
1.github·ThemeManager
2.github·SwiftTheme
3.iOS换肤方案
4.github·EasyTheme
5.「节日换肤」通用技术方案__iOS端实现

请在下方留下您的评论.加入TG吹水群