My noob guide to custom UI elements with Swift in iOS 9

As some of you might know, I recently quit my job as a financial auditor in Big 4 and went on to explore my aspirations with mobile app dev. You can laugh, most do… but now and then there’s someone who actually gets me, someone who even admires my decision. I no longer have the patience to discuss with every single person the exact WHY behind my decision… for most of them quitting a well paid job = suicide… for me the freedom to write this blog post at noon on a working day = freedom.

And after getting this totally unrelated side thought out-of-the-way, let me share my experience as a programmer for 2 months now!

I am working on a personal task manager project (yeah, I know… task manager, right?! 😀 ) and I’ve eyed some quite fancy apps that have their own custom bottom menus. I know Apple wants us to conform, but I’ve been a silent rebel my whole life, so I decided to go for it and create my custom menu. Needless to say, I had no idea where to start from. I thought to myself, ‘First I have to design this *@#&!’. That’s how I got this awesome blue-print.

Screen Shot 2015-12-03 at 11.58.43

Then it was time to start to actually do something about it… but where to start?!

Screen Shot 2015-12-03 at 12.02.43

Ok, I did that and realised… it was time to finally step it up and start doing some real work.

Screen Shot 2015-12-03 at 12.09.18

I started reading around stackoverflowraywenderlich.com and even the iOS Developer Documentation. Now, don’t get me wrong, I know that reading documentation is a must and am trying to do so as often as bearable. But, from my perspective of a financial specialist, technical (or programming, no idea) documentation is absolutely horrible! It’s better now, but at first it was so unreadable, so poorly structured even! Anyway, after reading a lot about UINavigationController, about the Navigation stack it provides, about UINavigationBar and UIToolbar, it was clear for me that a custom UIToolbar is the way to go!

A toolbar is a control that displays one or more buttons, called toolbar items. A toolbar momentarily highlights or does not change the appearance of an item when tapped.

– iOS Developer Documentation

Maybe seeing this definition in the quite short page on UIToolbar should have given me a clue that this is not the way to go for my ‘custom UI element’ ambition. After reviewing the documentation on UIToolbar which took like less than 5 minutes, it turned out that you can only go that far with customizing the appearance.

Screen Shot 2015-12-03 at 13.48.35

At first I was like ‘What?! *@#&!’ It turned out you have quite limited options with toolbars. Not to mention I didn’t even quite understand the second half of those.

Screen Shot 2015-12-03 at 13.53.42

After reading a bunch of tutorials on customizing the UIToolbar and adding custom buttons to it, as well as using image tiles (why, God, why?!) as background for the buttons and the toolbar itself, I started to think that a customised toolbar might not be the right way to go to carry out my idea.

Screen Shot 2015-12-03 at 13.55.13

This turned out to be another step in the wrong direction. Custom controllers are awesome, however most of the tutorials or discussions on the matter have you either creating a five star rating system or a custom dial knob to simulate a DJ set control. I spent a few hours reading about those and called it quits.

I realised that eventually all the custom controllers and toolbars etc. come down to an extension of UIView (correct me if I’m wrong… no, really correct me!). And that’s how the ‘custom uiview’ google search happened.

Screen Shot 2015-12-03 at 13.58.39

I came across this post from 15th of December, 2014, residing on iphonedev.tv. The author talked about IBDesignable and IBInspectable, XIB files, etc. At first I was quite overwhelmed. OK, I am as smart as a regular Joe, I can follow instructions, but bending the still freshly obtained knowledge to my will, to design my custom thingie was a bit more challenging.

Anyway, it turned out I managed and came up with this pretty guy… and the UI surrounding him.

Screen Shot 2015-12-03 at 14.04.33

It took me like 5 minutes to find an online png UI icons pack that was free to use for any purpose (would love to give a shout out to the author, however I did not manage to recall where I found these, if you know -> let me know in the comments!), used my favourite Adobe application to add the text below and even made a dark green alternatives (for ‘active’ states, not included in current project). I did a bit of googling to find out how to process the UIImage in the middle to be used as a button and to be rounded in a circle.

Screen Shot 2015-12-03 at 14.08.38

Delegates are of utmost importance in an iOS app. At least that’s what I found when I first decided to interact between various ViewControllers. Creating a custom Delegate was a necessary step to be able to use the buttons from my custom XIB file to fire up events on my master view controller.

And then it happened… it worked, and pretty well I might add 🙂

Screen Shot 2015-12-03 at 14.11.19

I have to admit, it felt very nice to look at the result. I really wanted to better understand the process, partially completed via tutorials, so I jumped at the idea to prepare a presentation on the matter, that was given by a fellow iOS developer, that is being kind enough to give me guidance and mentoring. He wanted me to make a presentation to the local iOS dev community that is supposed to happen merely a few hours after I am writing this post… I decided to test it out in a post.

I created an empty project that has just this functionality within and published it on bitbucket.org HERE.

I know it’s no rocket science and no huge accomplishment at all, however I wanted to share the experience with you guys!

So, if you have any thoughts on the matter, please post a comment below. Do you think there are best practices for such cases? What do you usually do? Do you go the XIB way, or do you prefer the path of the Code… or maybe you are a Storyboard fan? Share the knowledge 🙂

Screen Shot 2015-12-03 at 14.22.58

And if anyone made it this far, thank you!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.