Drop me an email if you'd like to hire me (part time) or learn more about what I do. You can read about my experience and references on LinkedIn.
iOS: A Beautiful Way of Styling IBOutlets in Swift
Today I was struggling with styling views. Usually I am trying to do what I am
able to do in storyboard files. Next, I am creating @IBOutlet references and
do the rest in the view controllers code - That’s not ideal, I know.
Today’s problem was a bit more complicated. I am using a lot of placeholder
views in storyboards that will hold more complicated custom controls. These type
of controls that have only placeholder reference in storyboard is very difficult
to fully customize in storyboards. I mean, you can use @IBDesignable but at
some point you’ll be duplicating properties of the internal views. I am a big fan
of exposing views contained in this control and customize them outside - but not
about it this time.
The idea she described is kinda beautiful, and I adopted it. Then I realized I had
to do a lot of customization with my controls. I immediately stopped liking the solution
and started to hating it because I noticed the view controller is getting bigger
Styling outlets this way cost me 2 + n lines of code, when n is number of
lines of styling code. You can also add this empty line between outlets just for
readability. Having 10 properties for styling is a lot of additional code and lines
we can probably somehow avoid.
I am not saying this way is poor and you have to stop doing this way. That’d not be
true. I actually like it, but it is not the best way to go in case of my current project.
Another beautiful(?) way
Let’s start with a bit simplified example. I’ll be styling labels, a button and a view,
but you can think about more real-life example that I mentioned above - every control
is a custom one that you have to style somewhere - you can also call some DRY method
you created to avoid repeating styling-code - I hope you wrote such method :)
Let’s add some styling.
Wow… This turned out to be 65 lines of code in the view controller and there
is no logic inside yet. It was 17 before we started. This does not sound like
beautiful styling at all. Can you see properties declarations? For sure yes,
that’s clear and nicely visible.
It gets even worse when you have to create some outlets just for styling.
If there would be no custom styling you would not be creating such outlet.
Can we do better than this? Yes. Is this an universal solution? Not sure, it works
in my case, and I get better results than the method described above.
As we’re using storyboards anyway, why don’t we create some styling object
that would help as doing dirty work? We could create it by dragging Object
object on our view controller in storyboard, create class suffixed with *ViewControllerStyle
connect outlets there and do the styling. You can create reference to a specific
view/control in many objects, not just view controller.
Doing it this way, the code has been detached into ManyLabelsViewControllerStyle class.
As we don’t need references to the controls in view controller we can remove all
of them. Or just keep these you need.
You need to call the style() method at some point, so the last thing is to
create outlet to such object in the view controller and call style() in the
Here is how the view controller look like at the end.
Updated 30 Jun 2016
You can also use just didSet in this styling object and just let it configure
the outlets when they are set.