Navigation is one of, if not, the most important aspect of any application. Choosing how users will navigate through the different screens plays a vital role in your applications success.

With the dawn of the AppStore it was very clear what was the most favoured means of navigation. Hamburger menus, Sliding menus, Sidebars whatever you would like to call them. This form of navigation became synonymous with apps. Personally I find many flaws with Sidebars. But since I am not a UX designer, you can read more design-oriented reviews in this article.

As you might have deduced from the title of this post my favourite form of app navigation is a UITabBar. If we look at most of the applications from our beloved Apple the use of a UITabBar is prevalent in most of them. App Store, Watch, Clock and Music — all use UITabBar for navigation. To read more about the UX benefits of using it check this post.

Why create a Framework?

UITabBar is very simple to implement using UIKit in Swift already. So what’s the need of creating an entire framework? The standard UITabBar is a bit boring for me, I wanted to add more flair🎉 to the component. In addition, it’s good to create something reusable, which can be styled and animated without changing much of the code.

In this post I won’t cover the steps needed to create a CocoaTouch Framework. To get started with creating a reusable framework read this awesome article by Alec O’Connor which I used as reference.

Code

Now that we have discussed why to make a framework and set out what we want to achieve, let’s get to CODE 😎! Just a few principles and concepts we want our framework to adhere to.

Principles & Concepts

SOLID

Protocol Oriented

Prerequisites

As a precursor I would advise that you be familiar with the following principles:

Access modifiers

DataSource & Delegation

Programmatic constraints

These are the core principles we should keep in mind when designing and developing our framework’s architecture. I will expand more on each concept as we come across it in the code.

Structure

At this point you have created your framework project given it a cool name like MDVTabBarController. To start off, some group structure 👷‍♀️.

Project Group Structure

MDVTabBarController

A TabBarController is basically a combination of three types of components. They are: TabBarItems which represent each tab, a TabBar which holds the items and lastly a TabBarController which as the name suggests controls the previously mentioned components. We will start with the smallest component and build our framework from there. At the end of this, we want to have a framework to make use of plugin animations.

MDVTabBarItem

Create a file named MDVTabBarItemable, place it in the Protocol group, then create a file named MDVTabBarItem and place it in the MDVTabBar group.