Perfect solution for Baidu app IOS dark mode adaptation

Time:2021-8-11

One background

In the opening speech of WWDC in 2009, Apple announced the new features of the upcoming ios13 darkmode. This new feature can not only protect vision at night, but also help users save power consumption for the latest generation of devices using OLEDs. However, this feature only supports systems above ios13. In order to give the best experience to all users in the whole system, a set of Skin theme framework has been developed, which can not only support darkmode in the whole system, but also expand multiple sets of skin themes;

II. Birth of Skin Theme Framework bdpapearance

Perfect solution for Baidu app IOS dark mode adaptation

2.1 usage mode of business party

  • At present, all controls in the system and their color property and image property are supported. Here are only two examples:
// UIColor
view.backgroundColor = BDPAppearanceColor(@"C1");

// UIImage
imageV.image = BDPAppearanceImage(@"icon");

The business party only needs to use the simple API to set color and image as above to realize theme skin change;

2.2 implementation principle

Let’s take a look at the architecture of the BDPA appearance design scheme
Perfect solution for Baidu app IOS dark mode adaptation
During project initialization, the color value resources used by the current theme will be loaded into memory first. The related controls use the color name to find the color value under the corresponding theme through bdpapearancecolor, instantiate the uicolor object, and assign values to these related controls;

The built-in uiimage image is stored in assets. You can load the uiimage object under the current theme with the image name through bdpappearanceimage;

  • Uicolor classification and uiimage classification

As can be seen in the figure, colorname attribute is added to uicolor classification: when obtaining uicolor instance object through bdpappearancecolor, the color number and name used by the current color object will be recorded through classification;

Similarly, when obtaining uiimage through bdpappearanceimage, the image name used by the current image object will be recorded through classification;

  • Changetheme refresh theme

When each control is initialized and added to the parent view, it is added to the nshashtable at the time of – (void) didmovetosuperview. When you click switch theme, you can get all the view controls on the current view tree through the nshashtable, take out uicolor and uiimage in the control properties, and judge whether its colorname and imagename have values. A value means that the current control needs to adapt to the theme, Then use this colorname or imagename to load the new color value and new picture of the current theme, and re assign it to the current control to complete the theme switching.

III. design ideas

Principles for designing this skin Theme Framework:

Based on the existing business, the business party adapts in the lowest cost way: that is, it only needs to change the way to obtain colors and pictures

Based on the above principles, how can we refresh the theme for all controls when switching themes?

At the initial stage of the project, the notification scheme is adopted: add a notification to the current control in the didmovetosuperview method. When the notification of topic switching is received, the relevant color values and pictures of the current control will be refreshed;

However, during the performance test, it is found that the notification initialization will not only have a certain CPU consumption, but also increase the initialization time. The more view levels, the more obvious the performance loss, so this scheme is abandoned; In fact, our purpose is to enable all current views to trigger refresh logic, and finally adopt the scheme of nshashtable weak holding control;
Performance test data of two methods (the following data are the average value taken after more than 20 tests):
Stress test environment: view level 1W Views:

Real iPhone 5S Initialization CPU consumption Initialization time
normal 50% 3312ms
HashTable 50% 3341ms
Notification 99% 5115ms

From the above test data:  With tens of thousands of views, the performance of hashtable is much better than that of notification

IV. comparison of open source frameworks in the industry

The following is a comparison of the top open source libraries of GitHub in the industry:
Perfect solution for Baidu app IOS dark mode adaptation
At the same time, compare the API adaptation methods of ios13 system:

UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {   
     if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {  
          return [UIColor blackColor];   
     } else {           
          return [UIColor whiteColor]; 
     } 
  }];
view.backgroundColor = dynamicColor;

The comparison shows that:The use of bdpappearance is the closest to the system method on the basis of retaining Rd development habits, and the amount of code changes is the smallest;

V. overall theme communication design of client

Baidu app involves theme related modules in technical forms: Na, H5, RN, HN, etc. How does the theme mode communicate under various technical forms? Refer to the following figure:
Perfect solution for Baidu app IOS dark mode adaptation
As shown in the figure:

  • The scheme adopted when initializing wkwebview: initialize WebView by splicing key values in useragent to get the theme mode at the earliest time during rendering;
  • The scheme adopted for subject change communication: data channel and terminal capability, whose essence is JS interaction;

Vi. project color value configuration

  • 6.1 management of end internal color value table

The whole Baidu app involves nearly 100 businesses and nearly 300 components, and the management of color number table is particularly important;

There are only a limited number of color numbers used in each component. If the color values used by all components are uniformly managed in one color value table, it is obviously unreasonable, which is not conducive to decoupling and component output; So what is the best color value management method?
Perfect solution for Baidu app IOS dark mode adaptation
As shown in the figure above,Each component manages its own color value table, when the project is compiled, the color value tables of all components will be de duplicated through the script, merged into a total color value table and stored in the themes warehouse, and then the total color value table in themes can be read when initializing the theme resources; This method achieves the purpose of decoupling between components.

  • 6.2 sketch plug-in:ThemeMeasure

In the early development, UE used sketch to export HTML format annotation drawings. According to the selection and cooperation requirements of Baidu app IOS related CRD and Fe for implementation technology, UE needs to provide and maintain a set of Na + H5 color table to mark the number of interface time scale colors rather than color values. In order to achieve this effect, we developed the sketch plug-in in the same period, which can directly display the excellent number in the labeling interface, solve the pain points of UE labeling color number, and greatly improve the efficiency; As shown below:
Perfect solution for Baidu app IOS dark mode adaptation

This plug-in contains three capabilities:

  • 1. A variety of convenient ways to help color number labeling

    Theme measure allows designers to select color numbers for labeling according to the recommendations of the system. There is also a considerate batch labeling wizard, which changes the way designers manually write color numbers for labeling in the past

  • 2. One key conversion of dark color, night and other themes

    Theme measure enables designers to convert the default theme into dark, night or other themes with one click (corresponding color value data and correct color number annotation are required), which changes the way that designers need to manually adjust the output of dark and night design drafts one by one in the past, and greatly improves the work efficiency and experience of designers for multi theme adaptation

  • 3. Be familiar with the export method of labels, and all labels are in one place
    It also uses familiar tools to export labels. The color number, layout, font size and other labels are all in the same HTML document, which changes the way that an additional color number label needs to be provided in the past, and improves the collaborative efficiency and experience of design and R & D

Under the whole skin theme mechanism, the business side completed the theme adaptation of the whole hand in less than two weeks, and also confirmed the advantages of this framework from the side:Lightweight and low cost

Resource allocation also supports cloud distribution, which can dynamically add a variety of topics;

VII. Summary

This paper mainly introduces the adaptation of Baidu app IOS dark mode in detail from the implementation of Skin Theme Framework, the management of color value table and supporting tool chain. Friends in the industry are welcome to exchange and learn together;


Author:
liushaohua


Enter “Baidu app technology” on the wechat – Search page to follow the wechat official account; Or use wechat to identify the following QR codes, you can also pay attention.
Perfect solution for Baidu app IOS dark mode adaptation

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]