Shulou(Shulou.com)05/31 Report--

What is the perfect solution for baidu APP iOS Dark Mode adaptation? many novices are not very clear about this. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

A background

In the opening speech of 2019WWDC, Apple unveiled new features of the upcoming iOS13 DarkMode. This new feature not only protects eyesight at night, but also helps users save electricity consumption for the latest generation of devices that use OLED. However, this feature only supports systems above iOS13. In order to give all users the best experience in the system, a skin theme framework is developed, which can not only support DarkMode in the whole system, but also expand multiple sets of skin themes.

Second, the birth of the skin theme framework BDPAppearance

2.1 how the business side uses it

At present, all the controls in the system and their Color and Image properties are supported. Here are only two examples:

/ / UIColorview.backgroundColor = BDPAppearanceColor (@ "C1"); / / UIImageimageV.image = BDPAppearanceImage (@ "icon")

The business side only needs to use the simple API to set up Color and Image as above to realize the theme skinning.

2.2 implementation principle

Let's first take a look at the architecture diagram of the BDPAppearance design.

During the initialization of the project, the color value resources used by the current theme are first loaded into memory. The relevant controls use the color name to find out the color values under the corresponding theme through BDPAppearanceColor, instantiate the UIColor object, and assign values to these related controls.

The built-in UIImage image is stored in Assets, and the UIImage object under the current theme can be loaded with the picture name through BDPAppearanceImage.

UIColor classification and UIImage classification

You can see in the figure that the ColorName attribute has been added to the UIColor classification: when the UIColor instance object is obtained by BDPAppearanceColor, the color name used by the current Color object will be recorded through the classification.

Similarly, when you get UIImage through BDPAppearanceImage, the name of the picture used by the current Image object is recorded by classification.

ChangeTheme refresh theme

When each control is initialized and added to the parent view, add it to the NSHashTable at the time of-(void) didMoveToSuperview, click to switch the theme, get all the view controls on the current view tree through NSHashTable, take out the UIColor and UIImage in the control properties, and judge whether their 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 values and new pictures of the current theme. Reassigning values to the current control completes the theme switch.

Three design ideas

Principles for designing this skin theme framework:

The business side adapts in the lowest cost way on the basis of the existing business: that is, it only needs to change the way to obtain colors and pictures.

So based on the above principles, how should we get all the controls to refresh the theme when switching themes?

At the beginning of the project, the notification scheme is adopted: add a notification to the current control in the didMoveToSuperview method, and refresh the relevant color values and pictures of the current control when you receive the notification of changing the theme.

However, in the performance test, it is found that initialization by notification will not only consume a certain amount of CPU, but also increase the time consuming of initialization. The more view levels are, the more obvious the performance loss is, so we abandoned this scheme. Our goal is to enable all current views to trigger refresh logic, and finally adopt the scheme of NSHashTable weak holding controls.

Performance test data in two ways:

The following data are averages taken from more than 20 tests.

Stress test environment: view level 1w View:

From the above test data, it is concluded that the performance of HashTable is much better than that of notification under tens of thousands of views.

Comparison of four open source frameworks in the industry

The following is a comparison of the top GitHub open source libraries in the industry:

At the same time, compare the ways of API adaptation in 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

By comparison, we can see that the use mode of BDPAppearance is the closest to the system mode on the basis of retaining the RD development habit, and the amount of code change is the minimum.

Fifth, the overall theme communication design of the client.

Baidu App involves the technical forms of theme-related modules: NA, H5, RN, HN, etc., and how does the theme mode communicate under a variety of technology forms? You can refer to the following picture:

As shown in the figure:

The scheme adopted when initializing WKWebView: initialize WebView by splicing Key-Value in UserAgent to get the theme mode as soon as possible when rendering

The scheme of theme change communication: data channel and end capability, which is essentially JS interaction.

Six project project color value configuration

Management of 6.1-side internal color value table

The whole Baidu App involves nearly 100 services and nearly 300 components, so the management of color table is particularly important.

There are only a limited number of color numbers used in each component, so it is obviously unreasonable to put the color values used by all components into one color value table, which is not conducive to decoupling and component-based output. so what is the best way to manage color values?

As shown in the figure above, each component manages its own color value table. When the project is compiled, the color value table of all components will be de-duplicated by script, merged into a total color value table and stored under the Themes warehouse, and then read the total color value table in the Themes when initializing the theme resources. This processing method achieves the purpose of decoupling between components.

6.2 Sketch plug-in: ThemeMeasure

In the early development, UE drawings are all marked with Sketch export HTML format, and according to Baidu App iOS related CRD, FE to achieve technology selection and cooperation requirements, UE needs to provide and maintain a set of NA+H5 color table to mark the interface time standard color number rather than color value. In order to achieve this effect, we developed the Sketch plug-in at the same time, which can directly display the color number on the labeling interface, which solves the pain point of the UE color number and greatly improves the efficiency, as shown below:

This plug-in contains three capabilities:

1. A variety of convenient ways to help color marking

Theme Measure allows designers to choose color numbers for labeling according to the recommendations of the system, as well as an intimate batch labeling wizard, which changes the way designers used to write color numbers manually for labeling.

two。 One-click switch to dark, night, etc.

Theme Measure enables designers to convert the default theme to dark, night or other themes with one click (corresponding color value data and correct color number marking are required), changing the way designers used to manually adjust the output of dark and night designs one by one, and greatly improving the work efficiency and experience of multi-theme adaptation.

3. Familiar with dimension export, all dimensions are in one place

Or use familiar tools to export tagging, color number, layout, font size and other tags are all in the same HTML document, changing the way in the past to provide an additional color number label, and improve the collaborative efficiency and experience of design and development.

Under the whole skin theme mechanism, the business side completed the whole theme adaptation in less than two weeks, and proved the advantages of this framework from the side: lightweight and low cost.

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

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.