This blog will introduce the general practice of theme switching in iOS App. Of course, this blog only mentioned one method of theme switching, of course, there are other methods, so I won’t do too much. The Demo in this blog was written entirely using Swift3.0 and uses the NSNotification of iOS to trigger the theme switch action. This blog we first of our theme system design, and then give specific implementation. Of course, when we design the Demo for this blog, we will follow the characteristics of “high cohesion, low coupling”, “interface oriented programming” and “easy maintenance and expansion”.

This blog we first look at the running effect of Demo, and then give the design has the corresponding class diagram, and then according to the design of the class diagram gives the corresponding code implementation.

 

1. Theme switching effect display

First things first, let’s take a look at the Demo in this blog post. To see the overall theme switch, we added a home page and child pages that the home page pushed into. The other page is the theme selection page, which you see below in the TabieView list page. The TabieView list provides six themes to choose from. Click on the theme to switch to that theme.

Of course, switching the theme means changing the style of the entire App, so when the theme is changed, the theme of the home page and its sub-pages must also be changed. The specific effect is shown in the GIF below. Of course, the Demo is relatively simple, but the sparrow is small, all the five organs, used to understand the App theme switch is enough. Of course there is a better way to achieve, welcome message exchange.

　　

 

Second, design the overall structure of the theme switching function

After seeing the effect, we then entered the design phase. According to the characteristics of the Demo, we first give the corresponding class diagram, of course, when we type code to achieve according to the class diagram. The screenshot below is a class diagram of our theme switch project for this blog. Some details are omitted and the core content is presented. Let’s take a closer look at the structure of the class diagram below. If we can figure it out, we’ll be able to see the code in the next section, because our code is implemented according to the class diagram below. It’s just more detailed than the class diagram below.

Next, let’s take a look at the structure of the class diagram. We will introduce each of the boxes in different colors, and the contents of the boxes can be regarded as a module.

  • Red boxThe red box below is our ThemeProtocol, ThemeProtocol, and all the themes that follow it. Of course, according to the rules of “interface oriented” programming, the external dependencies are not all theme classes, but the ThemeProtocol ThemeProtocol. The ThemeManager class relies on ThemeProtocol. All topic classes are connected to ThemeManager indirectly through the factory class or factory method. Since enumerations in Swift can add computed properties and methods, we can use the subject enumerations to act as factory classes, which are not shown in the class diagram below, depending on the code implementation.

  • Blue boxIn the blue box, SuperLabelClass is the parent class of all labels that can change the theme. That is to say, when changing the theme, the corresponding Label needs to be changed, then the class must be inherited.

  • Black boxIn this box is SuperViewController and its subclasses, from which any VC that needs to change the theme inherits.

  • The green box: The green box is responsible for modifying the theme, which determines the theme selected by the user according to the Cell type.

  • ThemeManager: This class exists as a singleton and is responsible for managing the corresponding topic. When switching the topic, you can directly call the corresponding method in ThemeManager.

The above is just a brief introduction to the class diagram, the specific code depends on the implementation.

　　

 

 

Third, the realization of theme and theme manager

After looking at the runtime and design class diagram, let’s look at the code implementation in this section we will look at the corresponding topic class and topic manager code implementation. The topic protocol and the implementation of each topic class are presented below, followed by the topic factory method and the implementation of the topic manager.

 

1. Implementation of subject protocol

Below is the theme protocol we defined, which all themes follow. Because the Demo of this blog only involves three elements when switching the theme, one is backgroundColor, the other is titleTextColor, and the other is detailTextColor. So there are three read-only computed properties that correspond to this in our topic protocol. The details are as follows:

　　

 

2. Implementation of each theme

Now let’s look at the implementation of each theme, using the RedTheme as an example. RedTheme follows ThemeProtocol and implements the methods specified in the protocol. Each calculated property in the RedTheme returns the property corresponding to the current theme. The details are as follows. Of course, the other themes are similar to the RedTheme below, except that each calculated property returns a different value.

　　

 

We used UIColor. ColorWithHex to return the UIColor object. ColorWithHex () is a static method we added to the UIColor extension that initializes the corresponding UIColor object based on the hexadecimal RGB parameters. Below are the details of the UIColor extension. At the heart of the code below is the use of bitwise operations.

　　

 

3. Simple factory creation

Now that the topic protocol has the topic classes built, it’s time to package these topics for output. The code snippet below is essentially a simple factory for theme classes, and because Swift’s enumeration types have many useful features, we use Swift’s enumeration to implement simple factories for these themes. The code structure is relatively simple, so I won’t go into too much detail here.

　　

 

4. Creation of the ThemeManager

Now that we’ve done the basic work on the topics above, let’s create a topic manager, ThemeManager, for these topics. ThemeManager pulls theme objects from the theme factory above and provides them to the user as required, which is where ThemeManager comes in.

Below is the implementation code for our ThemeManager ThemeManager, which is presented as a singleton. Since the topic manager only needs one while the entire App is running, we give ThemeManager the identity of a singleton to communicate with users. After the singleton implementation, then some convenient methods, these convenient methods are static methods, easy for users to use directly. Then there are some private methods of ThemeManager.

In ThemeManager’s private methods, switcherTheme(themeType) is the key. When the method receives an event to change the theme, it notifies it of the theme to be changed. Controls that can modify the theme, upon receiving the notification message, modify their own theme based on the notification content. The specific code is as follows:

　　

 

Four, can change the theme of the control processing

With the theme and topic manager implemented, it’s time to use them. When the theme is switched, we need to process the control whose properties need to be modified, so that it can listen to the notification of the theme switch and modify the control’s properties according to the notification content. In this section we’ll use the SuperViewController as an example. We first add the SuperViewController as the observer for the topic switch, and then implement the notification method. In the destructor, remember to remove the observer. The specific code is shown below.

　　

 

5. Call ThemeManager to change the theme

Now that we’re all set, we’ll call ThemeManager’s switcherTheme() method to replace it in the right place. Of course we do this in our Cell, because each Cell corresponds to the topic type, and the enumeration of Cell types is shown below. The themeType calculation property in CellTitleType corresponds to the themeType, which we can provide to ThemeManager to notify ThemeManager of changing the theme.

　　

Below, call ThemeManager’s switcherTheme() method to change the theme.

　　

 

That concludes the Demo of the theme switch covered in this blog post, which will be shared on Github as usual. Below is the Demo sharing address on Github.

Code sharing address: github.com/lizelu/CETh…

 

The copyright of this article belongs to the author and the total blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original link in the obvious position of the article page, otherwise reserve the right to pursue legal responsibility. If there are any mistakes in the article, please point them out. Lest more people be misled.