Complete Solution for iOS App topic switching (Swift) and iosswift

Complete Solution for iOS App topic switching (Swift) and iosswift

This blog introduces the conventional theme switching practices in iOS apps. Of course, this blog only mentions a topic switching method. Of course, there are other methods, I will not go into detail here. The Demo involved in this blog is fully written using Swift3.0, and NSNotification of iOS is used to trigger topic switching. In this blog, we first design our theme system and then provide specific implementation methods. Of course, when designing the Demo involved in this blog, we should follow the features of "high cohesion, low coupling", "interface-oriented programming", and "easy maintenance and expansion.

In this blog, let's first take a look at the running effect of the Demo, then provide the corresponding class diagram of the design scheme, and then provide the corresponding code implementation based on the design class diagram.

 

1. display of theme Switching Effect

First, let's take a look at the final running effect of the Demo involved in this blog. To see the overall theme switching effect, we added a homepage and a subpage to which the homepage is pushed. The other page is the page for selecting the corresponding topic, that is, the list page of The TabieView you see below. This list provides 6 optional topics, click a topic to switch to the topic.

Of course, topic switching means that the style of the entire App has to be changed. Therefore, after the topic is modified, the themes of the home page and Its subpages will also change. The following figure shows the effect. Of course, the Demo is relatively simple, but the sparrow is small and dirty. It is enough to understand the topic switching of the App. Of course, there are better implementation methods. Please leave a message.

　　

 

Ii. design the overall structure of the topic switching function

After reading the results, we will enter the design stage. Based on the features of the Demo above, we first give the corresponding class diagram. Of course, we should implement it according to the class diagram when coding. Below is the class diagram of the topic Switching Project of this blog. Some details are omitted in this class and the core content is given. Next, let's take a detailed look at the structure of the class diagram below the category. If the class diagram below is clear, it will be quite easy to see when looking at the corresponding code in the next section, because our code is implemented according to the class diagram below. It is more detailed than the class diagram below.

Next, let's take a look at the structure of the class graph. We will introduce them one by one based on the boxes of different colors. The content in the box is a module.

• Red box: The red box of the class diagram below is our ThemeProtocol and all topics that follow this protocol. Of course, according to the "interface-oriented" programming rules, not all themeprotocols depend on externally. That is, the themanager class depends on ThemeProtocol. All themanager topics are indirectly related to themanager through factory or factory methods. Because the corresponding computing attributes and methods can be added to the enumeration in Swift, we can use the corresponding topic enumeration to act as the factory class. Of course, the class diagram below is not given, this depends on the specific code implementation.

• Blue Box: Next let's look at the blue box. The SuperLabelClass in the blue box is the parent class of all labels that can change the topic. That is to say, when you change the topic, you need to change the corresponding Label to inherit the class.

• Black Box: SuperViewController and its subclass are displayed in this box. The VC that needs to change the topic must inherit from this base class.

• Green Box: In the green box, the topic is modified. The topic is determined based on the Cell type.

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

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

　　

 

 

Iii. Implementation of themes and theme managers

After reading the running effect and design class diagram, let's take a look at the specific code implementation. In this section, we will look at the corresponding topic classes and the Code Implementation of the topic manager. Below we will first provide the theme protocol and implementation of various theme classes, and then provide the theme factory method and implementation of Theme managers.

 

1. Implementation of topic protocols

Below is the theme protocol we have defined. All themes must follow this protocol. Because the Demo of this blog only involves three elements, one is the background color and the other is the title Color ), the color of the details (detailTextColor ). Therefore, there are three read-only computing attributes in our topic protocol. The details are as follows:

　　

 

2. Implementation of various themes

Next we will take a look at the implementation of various themes. We will take the red theme as an example. RedTheme should follow ThemeProtocol and implement the methods stipulated in the Protocol. In RedTheme, each calculation attribute returns the attribute corresponding to the current topic. The details are as follows. Of course, other theme topics are similar to the RedTheme below, except that the values returned for each calculation attribute are different.

　　

 

When we return the UIColor object, we use UIColor. colorWithHex (hexadecimal number ). ColorWithHex () is the static method we add in the extension of UIColor. This method can initialize the corresponding UIColor object based on the hexadecimal RGB parameter. Below is the specific content in the UIColor extension. The core of the code below is the use of bit operations.

　　

 

3. Create a simple factory

After topic protocols have been constructed, we should package and output these topics. The code segment below is essentially a simple factory of theme classes. Because the Swift Enumeration type has many useful features, we use Swift enumeration to implement a simple factory for these theme. The code structure is relatively simple, so I will not repeat it too much here.

　　

 

4. themanager Creation

The basic work on topics above has been completed. Next we will create a themanager for these topics.ThemeManager extracts the corresponding theme objects from the topic factory based on user requirements and provides them to users.Which is the function of themanager.

Below is the specific implementation code of themanager, our topic manager. themanager is presented as a singleton. The themanager is assigned a singleton identity to communicate with users because only one themanager is required to run the entire App. After the implementation of the Singleton, we will discuss some convenient methods, which are static methods for users to use directly. Then there are some themanager private methods.

In the themanager private method, switcherTheme (themeType) is the key. After receiving an event to modify a topic, this method will send a notification to modify the topic, the notification content is the subject to be modified. Controls that can modify a topic. After receiving the notification message, they modify their own topic based on the notification content. The Code is as follows:

　　

 

Iv. handling controls with replaceable themes

Theme and theme managers should be used after implementation. When switching a topic, we need to process the controls that need to modify attributes, so that they can listen to notifications of topic switching, and modify the properties of the controls according to the notification content. This section uses SuperViewController as an example. First, we need to add SuperViewController as the Observer for Topic switching, and then implement the method after receiving the notification. In destructor, remember to remove the observer. The Code is as follows.

　　

 

5. Call themanager to change the topic

Everything is ready, and we need to call themanager's switcherTheme () method in the proper place to replace it. Of course we are processing in our Cell, because each cell corresponds to the topic type, and below is the Cell type enumeration. The themeType calculation attribute in CellTitleType corresponds to the corresponding topic type. We can provide this type to themanager to notify ThemeManager to change the topic.

　　

The following describes how to change the topic by calling the switcherTheme () method of themanager.

　　

 

So far, the Demo of topic switching involved in this blog has been introduced, and the Demo involved will still be shared on github according to the Convention. Below is the Demo sharing address on github.

Code sharing address:Https://github.com/lizelu/CEThemeSwitcher