iOS Development App Theme Switch complete solution (Swift version)

This blog is about the general practice of theme switching in the IOS App , but this blog only mentions a way to switch themes, and of course there are other ways to do so. The demo involved in this blog is completely written using Swift3.0 and uses iOS nsnotification to trigger the action of theme switching. In this blog we first design our theme system, and then give a concrete implementation of the way. Of course, when we design this blog involved in the demo, we have to follow the "High cohesion, low coupling", "interface-oriented programming", "easy to maintain and expand" and other characteristics.

This blog we first look at the performance of the demo, and then give the design of the corresponding class diagram, and then according to the design of the class diagram to give the corresponding code implementation.

First, theme switch effect show

Preconceived, let's take a look at the final running effect of the demo that this blog covers. To see the effect of the overall theme switch, we added a home page and a page push-in sub-pages. The other page is the page that selects the subject, which is the list page of the tabieview you see below, which provides 6 optional main topics, which you can switch to by clicking on the topic.

Of course, theme switching means that the entire app style has to change, so when you finish modifying the theme, the theme of the page and its sub-pages changes. The specific effect is shown in the GIF figure below. Of course the demo is relatively simple, but small , perfectly formed , to understand the theme of the app switch enough. Of course there is a better way to achieve, welcome message exchange.

　　

Second, the overall structure of the design theme switching function

After reading the effect, we then entered the design phase. According to the characteristics of the above Demo , we first give the corresponding class diagram, of course, when we hit the code to be implemented according to the class diagram. Below is our class diagram of this blog theme switch project. Some details are omitted from this class diagram, and the core content is given. Let's take a detailed look at the structure of the class diagram below, and if the class diagram below is clear, then the code in the next section will look quite easy, because our code is implemented according to the class diagram below. Just more detailed than the class diagram below.

Next we will look at the structure of the class diagram, we will follow the different colors of the box to introduce, the contents of the box is a module.

• red box : The Red box below the class diagram is our subject agreement Themeprotocol and all the topics that follow the agreement. Of course, according to the "interface-oriented" programming rules, the external depends on not all the subject class, but the topic protocol themeprotocol. That is, the Thememanager class relies on Themeprotocol. All subject classes are indirect and thememanager through factory or factory methods. Because the corresponding computed properties and methods can be added to the enumeration in swift, we can use the corresponding topic enumeration to act as the factory class, which is not given in the class diagram below, which depends on the specific code implementation.

• Blue Box: Next we'll look at the blue box, the superlabelclass in the blue box is the parent of all the labels that can change the theme, that is, when you change the theme, You need to change the corresponding label to inherit the class.

• black box : In this box is Superviewcontroller and its subclasses, and the VC that needs to change the theme is inherited from the base class.

• Green Box : The Green Box is responsible for modifying the theme, which is based on the type of Cell to determine which theme is selected by the user.

• Thememanager: This class exists in the form of a singleton, which is responsible for managing the corresponding topic, and invoking the corresponding method in Thememanager directly when switching themes.

The above is just a simple introduction to the class diagram, the specific also depends on the implementation of the Code.

　　

Iii. the theme and the realization of the subject Manager

After reading the results of the operation and the design class diagram, let's take a look at the specific code implementation of this section we will examine the corresponding topic class and the code implementation of the subject manager. The topic agreement and the implementation of each topic class are given below, and then the topic Factory method and the theme manager 's implementation are given.

1, the realization of the subject agreement

Below is our definition of the topic agreement, all subject to follow the agreement. Because the demo of this blog only involves three elements when switching themes, One is the background color (backgroundcolor), the other is the color of the title (Titletextcolor), in one is the color of the details (Detailtextcolor) . So in our subject agreement there are three read-only computed properties corresponding to it. The following are the specific examples:

　　

2. Implementation of each theme

Next we'll look at the implementation of each theme, and we'll take the red theme (Redtheme) as an example. Redtheme to follow the Themeprotocoland implement the methods stipulated in the agreement. Each computed property in redtheme returns the property that corresponds to the current theme. The details are as follows. Of course, other topics are similar to the redtheme below, except that each computed property returns a different value.

　　

We used the Uicolor.colorwithhex (hexadecimal number)when we returned the Uicolor object. Colorwithhex () is a static method that we add to the extension of Uicolor, which initializes the corresponding Uicolor object based on the hexadecimal RGB parameters. Below is the specific content of the uicolor extension . The core of the code below is the use of bit operations .

　　

3. Creation of a simple factory

After the theme agreement has been built, we should then package the topics for export . The code snippet below is essentially a simple factory for the theme class, because Swift's enumeration type has a lot of good features, so we used the swift enumeration to implement a simple factory for these topics. Code structure is relatively simple, here do not do too much to repeat.

　　

4. Creation of the subject Manager (Thememanager)

The basic work on the topic above has been done, and then we will create a topic manager Thememanager for these topics. Thememanager will remove the subject object from the above theme factory according to user's requirement , which is the function of Thememanager .

Below is our subject Manager Thememanager Specific implementation code,Thememanager is a single example of the posture of external display. Because the theme manager only needs one when the entire app is running, we've given Thememanager a single-instance identity to communicate with the user. After the implementation of the single case, 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 method,Switchertheme (Themetype) is the key, which, after receiving an event that modifies the subject, issues a notice that changes the subject, and the content of the notification is the subject that will be modified. The controls that can modify the subject, after receiving the message, modify their own theme based on the notification content. The specific code looks like this:

　　

Iv. control handling for interchangeable themes

Theme and theme managers are finished, and then it's time to use them. When a theme is toggled, the control that needs to modify the property we need to process it to listen to the notification of the subject switch and modify the control's properties based on the notification content. In this section we will take Superviewcontroller as an example. First we will add the Superviewcontroller as the subject Switch viewer, and then implement the method after receiving the notification. In the destructor, remember to remove the observer. The specific code is shown below.

　　

V. Call Thememanager Change theme

Everything is ready for the East wind, then we need to call Thememanager 's switchertheme () in the right place to replace it. Of course we are dealing with our cell, because each cell corresponds to the type of the subject, and below is the enumeration of the cell type. The Themetype computed attribute in celltitletype corresponds to the corresponding topic type , and we can provide that type to Thememanagerso that after Thememanager issue a notification of the subject of the change.

　　

Below is the call to Thememanager's Switchertheme () method to replace the theme.

　　

At this point, the topic of this blog covers the switch of the demo is complete, the demo in accordance with the Convention, will still be shared on GitHub. Below is the demo on GitHub to share the address.

Code share address:https://github.com/lizelu/CEThemeSwitcher

iOS Development App Theme Switch complete solution (Swift version)