PaintCoded full size free coloured tabs

In this post I will explain how I made the following ui using the standard UITabBarController and PaintCode:

(click on the image, its an animated gif).

At first glance this looks as being normal tabbar behaviour however these things are not so “standard”:
– the tab item is in full color and not tinted
– the tab items completely cover the tab

Create the graphics using PaintCode

To explain how to make graphics in PaintCode I made the following tutorial video:

RootViewController that takes care of creating the custom tabbar item


  • By using UIImageRenderingMode.AlwaysOriginal we avoid the image being tinted and thus the “real” colors are used
  • the size of the tabbar is fixed as  50 points (defined by Apple)
  • I also found out that the image needs to be shifted down by 6 points to cover the tab completely

StarViewController implementation

Note that we are using a “tabBarItemCreated” flag to make sure we only create the tabitem once. If you do not implement this behaviour the initial (selected) state of the tabs is erratic.

I also found out that in the getter when the tabBarItem is not yet created and the flag is false, I had to first set this flag to true and only then do the super.tabBarItem = makeTabItem(….); apparently the super.tabBarItem = … calls the getter and then this would create an endless loop!

SquareViewController implementation

This is basically a copy of the StarViewController but only the title and the imageCreator is different!

App delegate to for setting the styling of the tabbar
As final touch we need to set the correct colours for the labels on the tab.
We do this via the appearance proxy for the UITabBarItem.

PaintCoded full size free coloured tabs

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">