Research on the holiday skin changing scheme for iOS clients

Transferred from: https://www.ianisme.com's Blog

First, preface:

Tip: Originally this article is ready at Christmas, but for various reasons have not finished, today will write it, also is 2018 years of the first article. Hello, 2018!

The past Christmas is the Big app makeup show their clothes of the festival, this year's Christmas seems deserted a lot, only see a few app skin, then I will analyze it.

Second, analysis:

I think the current skin change is mainly divided into 3 kinds, one is to return the address of the image, the app again according to the picture log to take pictures, the other is to download the ZIP package and then unzip to replace the icon, and then a picture of the resources in the package, interface control whether the display.

2.1 Implementation Method One:

I found that the Beaver family is the way, why first with the Beaver family for example? Because the friend said it was too cool! So I started analyzing it.

I have checked the sandbox of the Beaver Home app with my jailbreak phone and found no skin files stored locally.

So I started using Charles to grab the packet, and I found the configuration information for the suspected skin file on this interface.

So I sent a request to the skin file from the IMG prefix's domain name, which is exactly the background image of Tabbar.

It is commendable that the Beaver's PNG image has been WEBP compressed, which is also the current app-side mainstream image format.

So the beaver's plan is that the interface returns the configuration information of the skin, the address information of the image is stored in the configuration information, and then the picture is taken from the image cache frame.

This situation I think must do a bit of processing, so that all the pictures are cached, and then display, or the picture may appear a flash out of the situation, and even in the case of poor network, a picture does not show the situation. This situation I have seen another app, specific which I forgot (testing a lot of apps, I really can't remember ...) ）

2.2 Realization Mode Two:

Here I use the Micro Shop Buyer version for an example, this is the Micro store buyer version of Christmas skin.

I also see if there is a skin file in the sandbox after installing the app, and I don't see it. The following directly to catch the interface, I found a suspicious zip file on the assets domain name package.

After extracting this zip file, I found Tabbar's picture resources. I also found the same file in the sandbox of the program.

Picture resources have been taken, then how are they replaced? I'll take a look at the Micro Store Buyer's Edition for example.

I got the micro Shop Buyer version of IPA shelling, I used Hopper disassembler and class-dump to analyze the main program. Finally, the following information is found:

It can be seen that it is used in the category and KVO to achieve the replacement of the skin process. Add a category to UIButton and other system classes, add a method to set the skin, and implement the trigger control by KVO.
In addition, it is recommended that the skin after the download can be immediately triggered to change skin, I test Baidu glutinous rice app when it is the second time to start to replace, maybe because it is a high-frequency app bar.

2.3 Realization Method Three:

In this way I tested a few apps that I didn't find, listening to a friend say a well-known app once used this way. This method is to store the skin files in the package before the release, through the background interface control to display. The advantage of this situation is that it is easy to control and the failure rate is small. The downside is that the package is too bulky and relies heavily on Apple's dad's audit.

Third, I realize the way:

Recently I have also done the skin-related functions, below I say my idea of implementation.
First, take a look at my app control logic.

My idea of implementation is similar to the way the Micro store realizes. But instead of using KVO, I used the notification registration method.
After the app starts to load the corresponding skin file directly, while another thread requests the background skin interface, the interface returns a link to the zip package, downloads the zip package, extracts the Config.json file, and then I use the notification method to trigger the skin change. The specific logic of thinking is that the flowchart has been drawn very clearly.
The logic that controls whether the skin is displayed is completely controlled by the background, and the background returned skinsign is empty to close the skin.

Here's a look at the format of my Config.json file.

 {"Home_navi": {"Colors": {"Color_background": "#ffffff"}            , "Images": {"Image_logo": "Home_toplogo"}}, "Home_tabbar": {"Colors": { "Color_background": "#F9F9F9", "Color_button_normal": "#999999", "color_button_selected": "#4444  "}," Images ": {" Image_one_button_normal ":" tab button 1 Picture "," image_one_button_selected ":            tab button 1 Select picture, Image_two_button_normal: Tab button 2 picture, image_two_button_selected: Tab 2 Select Picture, "Image_three_button_normal": "tab button 2 Picture", "image_three_button_selected": "tab button 2 Select Picture"}, " Values ": {" Value_one_button ":" tab button 1 "," Value_two_button ":" Tab 2 "," Value_three_butto        N ":" tab button 3 "}}," Loading ": {" Resources ": {" resource_refreshimage ":" Refresh.gif " }     }}

Configuration file, divided into home navigation (Home_navi), Home Tabbar (Home_tabbar), loading loading (loading) three business modules. Under each business module can have 4 function modules are color (colors), picture (images), value (values), resource (resources), these 4 modules according to their own needs to add. Colors control is the color, here I take the 16 binary value is prevail. Images control is the picture, the most common PNG file. Values control the value. Resources Control resource files, such as JSON, GIF, and so on.

I created a uiview category, and in this category I added a method, as follows:

-(void) Configskinmapmodule: (NSString *) module Skinmap: (Nsdictionary *) Skinmap;

Let's say I need to add a skin-changing function to the navigation bar, I just add the following code:

[_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"       }];

I will create a skinconstants file to define, and replace the way to identify.

StaticNSString *ConstKskinmapkey_button_image =@"Kskinmapkey_button_image";StaticNSString *ConstKskinmapkey_button_highlightedimage =@"Kskinmapkey_button_highlightedimage";StaticNSString *ConstKskinmapkey_button_selectedimage =@"Kskinmapkey_button_selectedimage";StaticNSString *ConstKskinmapkey_button_disabledimage =@"Kskinmapkey_button_disabledimage";StaticNSString *ConstKskinmapkey_button_titlecolor =@"Kskinmapkey_button_titlecolor";StaticNSString *ConstKskinmapkey_button_titlehighlightedcolor =@"Kskinmapkey_button_titlehighlightedcolor";StaticNSString *ConstKskinmapkey_button_titleselectedcolor =@"Kskinmapkey_button_titleselectedcolor";StaticNSString *ConstKskinmapkey_button_titledisabledcolor =@"Kskinmapkey_button_titledisabledcolor";StaticNSString *ConstKskinmapkey_button_title =@"Kskinmapkey_button_title";StaticNSString *ConstKskinmapkey_label_text =@"Kskinmapkey_label_text";StaticNSString *ConstKskinmapkey_label_textcolor =@"Kskinmapkey_label_textcolor";StaticNSString *ConstKskinmapkey_label_backgroundcolor =@"Kskinmapkey_label_backgroundcolor";StaticNSString *ConstKskinmapkey_imageview_image =@"Kskinmapkey_imageview_image";StaticNSString *ConstKskinmapkey_imageview_gif =@"Kskinmapkey_imageview_gif"; StaticNSString *ConstKskinmapkey_imageview_backgroundcolor =@"Kskinmapkey_imageview_backgroundcolor";

  相信从名字你们就能看出来，每一个定义都是UIKit里面的一个方法。

Then I talk about the method that was added in the category, where module corresponds to the business module in Config.json, such as Home_navi. The key in Skinmap is the way the substitution is identified by the definition in skinconstants, and value is the key value of the corresponding module in Config.json.
That is, the above method means adding a change to the normal mode picture (Kskinmapkey_button_image) to a button in the Home_navi business module, and modifying the selected mode picture (Kskinmapkey_button_ SelectedImage), Normal mode text color (kskinmapkey_button_titlecolor), modify the selected mode picture (kskinmapkey_button_selectedimage), modify the text value ( Kskinmapkey_button_title) function.

We use the following code to perform the replacement procedure in the notification triggering method

- (void) changeskin{nsdictionary*map =Self.skinmap; if([Self Iskindofclass:[uibuttonclass]]) {UIButton*obj = (UIButton *) Self; if(Map[kskinmapkey_button_image]) {[obj setimage:skinimage (map[kskinmapkey_button_image]) Forstate:uicontro        Lstatenormal]; }        if(Map[kskinmapkey_button_highlightedimage]) {[obj setimage:skinimage (map[kskinmapkey_button_highlightedima        GE]) forstate:uicontrolstatehighlighted]; }        if(Map[kskinmapkey_button_selectedimage]) {[obj setimage:skinimage (map[kskinmapkey_button_selectedimage]) F        Orstate:uicontrolstateselected]; }        if(Map[kskinmapkey_button_disabledimage]) {[obj setimage:skinimage (map[kskinmapkey_button_disabledimage]) F        Orstate:uicontrolstatedisabled]; }        if(Map[kskinmapkey_button_titlecolor]) {[obj Settitlecolor:skincolor (Map[kskinmapkey_button_titlecolor]) fo        Rstate:uicontrolstatenormal]; }      ... The following omitted ...}

At the same time I have a local localconfig.json used to manage the local replacement of the skin module, the content and Config.json identical. He just took it. Local default skin resource configuration.
Skinimage is a macro that handles the images module, which is defined by the Pngresourceforsign: method, which is used to process which picture file to load.
About colors, resources and other modules I will not introduce each one, are very similar.

-(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]; if(!self.path.length) {return[UIImage Imagenamed:value]; } nsstring*filepath = [Self.path stringbyappendingformat:@"/%@", value]; UIImage*image =[UIImage Imagewithcontentsoffile:filepath]; returnimage;}

The above example is _tabbarbutton execution Configskinmapmodule:skinmap: Method registered a notification, to determine whether the background to enable skin-changing, Activate the skin to load the Config.json file without loading the Localconfig.json local default skins.
The above is my way of achieving a change of skin.

Iv. Summary:

The above various implementations have each of the benefits, my implementation of the way there is a need to optimize the place, such as the background interface can be added to the time control, can be implemented in advance caching scheme, without having to be in the user under the eyes of each other. If you have a better solution, welcome to the exchange.

Resources:
1.github Thememanager
2.github Swifttheme
3.iOS Skin-changing solution
4.github Easytheme
5."Festive Skin" general technical solution __ios End implementation

Research on the holiday skin changing scheme for iOS clients