How to manage customised views in the iOS app with themes?
Every app has either simple or quite sophisticated UI interface — anyway it’s there for sure. You may say that’s not very important part of the application from a development perspective so it could be done without any engagement. I would like to disagree with that statement since it’s still part of the code to maintain. That means it’s great opportunity to make some improvements even in such places like those where you’re customising your views. In this article, I would like to present a concept of how I create and manage customised views in the iOS application.
Specifying a problem to solve
Let’s start from the beginning. You have to create a really simple IoS app with a single screen. There is only a single label inside — nothing fancy. How would you set the font and colour of it? Probably it would be something like that:
At this stage you may agree with me it’s enough. Unfortunately, in real life, we’ve got plenty of view controllers and even more customised labels, buttons, etc. Using that approach, it would be a nightmare to maintain those properties, especially if there would be some UI changes. You will have to check every view controller to make sure that every single view has correct parameters. We can improve that a little bit with enum for our custom font. That’s gonna save us from keeping font name everywhere in our code.
It’s still not perfect. We have font enum for 3 types of font style, but it’s not quite connected with text style like header, footer, url, etc. We could have even 3 types of header like H1, H2 or H3 and all of them with bold font style but with different font size. We are looking for the idea how to handle those styles in our code, and I believe I’ve got quite a good one.
Implementing themes
We’re going to focus on theme for UILabel in very simple way but you can use that approach with every other view class. At the beginning we need to create style for text (the same style can be used with UIButton theme).
Based on that we can build another theme — this time for UILabel.
As you can see, the way how I’ve build a theme for UILabel is the same — the only difference is that I’ve used the previously created TextTheme. Next step would be creating UILabel subclass which could manage that theme.
Label class is pretty straightforward. It takes a theme and applies all parameters to properties like textColor or font. Based on that we can create other subclasses with overridden theme property to return something different.
Now you can put that class directly to Storyboard, and that’s it. You don’t need to do anything inside your view controller. There is one thing which is worth to mention. As you can see theme property is read-only. I’ve decided to keep it in that way because from my perspective it would be confusing have HighlightedLabel class with a theme which can be changed to something different than LabelTheme.highlightedHeader.
Dynamic themes
Everything that I’ve described here so far works only if you don’t need to change theme on existing view element. Let’s imagine scenario where you need to implement button which switches between two themes after clicking it. Our current implementation doesn’t allow us to do such a thing. For that kind of cases, I’ve used to create another „special” subclass. It doesn’t have dedicated theme but allows us to update theme instead. Below you can see example of dynamic label.
If you need to use that kind of subclass, it unfortunately means that you need to make an outlet from storyboard to your view controller to set correct theme from your methods. But in that case, it’s unavoidable.
Summary
You might say that’s an overkill to create such themes inside your code. For simple applications, you are probably right. But if you are developing something more advanced, then that’s concept fits really good. From my perspective, it helps a lot to keep your view classes organised and easily manageable.
Read more:
