Introducing LThemeManager: About IBInspectable
As a former firmware engineer / iPhone toolchain developer, I totally enjoy implementing UI programmatically. However, as soon as the official
iPhone SDK was released, I started to use
Interface Builder right away. It’s not that I had been missing
Delphi for years; I was using
Turbo Pascal before anyway. The thing was that Interface Builder was such a good tool that made perfect sense for developers like me. It was a pleasure to put view-based components together with each other and see how the layout looks like before any code was written; the way how
autoresizing mask worked was simple, flexible, and powerful; and the tool itself was responsive. On the contrast the tool Google offered for Android sucked.
After almost 7 years,
Interface Builder became part of
Auto Layout & Size Classes was highly used,
NIB / XIB was replaced by
Storyboard in most cases, and Android Studio doesn’t suck anymore. In general, more and more developers switched to Storyboard based UI design from the programmatical way. With this in mind,
LThemeManager is a set of tools to help the
Interface Builder users. Today I’m going to talk about the
IBInspectable related parts.
The following figure shows how it’s going to look like in your
Interface Builder (hosted by
Dropbox and may be blocked by
GFW dentro del Chino):
As you can see, as soon as you add
LThemeManager in your project, above the standard
Button section there will be 2 additional sections
View defined by
LThemeManager, which allow you to assign colors as button background for different states, add a border to a view, etc. Although it’s a bit easier to write the code, it’s probably not a good idea to put font name inside
UIView; and some people may not like the naming conventions, which I’ll talk about in some later topics. Anyway, hope you get the idea if you haven’t used it before.
I’m not going to discuss how it’s implemented since it can be obviously found in the code, which is quite simple anyway. Instead I’ll compare it with some other approaches and explain why I think it’s better. Assuming we’re going to add a user font to
UILabel without installing it in OS X.
In this way, you write everything in code, so setting a customized font is not really that different with setting a system font. In this way you can reuse the code in whatever way you want, but you need to deal with a lot of things programmatically, including
Auto Layout, which in general is not very productive.
In this way you create a MyFontXLabel with
self.textFont = UIFont(named:X) in it’s initializer, and when you add a label in Storyboard, you need to change its class. Normally it’s 2 clicks, 1 copy/paste, and you need to write different classes for different fonts. The code can hardly be reusable.
An UILabel Library with Customized Font
This is one of the most common approach. Generally instead of writing it, you use a
Pod and the other things are up to how it’s designed. But still you’ll have to change the class name in
Interface Builder, and write code or modify something in
Interface Builder to apply the font.
User Defined Runtime Attributes
You can take the advantage of user defined runtime attributes as shown below. In this way it allows you to work with category/extension instead of subclassing. In this way you don’t have to change the class name but you need to enter the keypath and change the type for each UILabel, which is a bit annoying.
IBInspectable works with category/extension and everything is inside the attributes inspector, so it:
- Works with the original
- Makes changing to a customized font as easy as applying a system font
- Results minimal key stroke / mouse click
The downside is naming convention since if you side to use it for now, you’ll have to choose
LThemeManager, which doesn’t have solved the namespace pollution problem yet. Of course you’re free to fork and write your own code based on it.
For now, here’s a highlight of the features
- Customized user font by font name
- Border for
UIViewwith customized color, line width, corner radius, etc.
- Circle mask for
UIView- especially useful for
- Colors as
UIButtonbackground for different states
IBInspectable, even you’re using open source libraries you still have to write codes here and there, or change the class names of the controls, and now you only need to set some attribues like normally you would do.