Design a Dribbble-like UITabBar in iOS App Using Swift 5 | by Margels | Apr, 2022

Who else is bored of the identical outdated tab bars?

Sure, sure, I do know: we nonetheless want them for navigation. I do know they’re extra catchy than navigation bars, for certain. Likelihood is, customers will probably not thoughts a plain design in case your app is nice. However… what stops it from being great-er?

The factor is, I’ve seen round-cornered tab bars for a number of years now and I nonetheless get excited after I see one. So when the time got here for me to develop my very own stuff, I believed, why not make my very own model?

Nonetheless studying? Means you’re able to take this step too! Learn on to implement this in your app, and should you’re simply working towards, download the starter material here and work with me on my sample app!

Prepared, set, go!

Premise: the pattern app

Some government-issued providers these days will ask for our private paperwork’ particulars earlier than continuing with any request on-line. Driver’s license quantity, ID’s expiry date, well being care card issuer. And I’m high-quality with it, however do I actually need to get off the sofa and discover my pockets for that? In 2022? Feels like an issue value fixing.

Helpful, proper? This app will quickly be accessible on the App Retailer! Check out my profile for updates!

Step 1: Create the tab bar

On the storyboard, choose the view controller. Open the Editor menu and choose Embed in > Tab Bar Controller.

Choose the Tab Bar View Controller and join it to our TabBarViewController() class that I already created in my pattern app. If you’re working by yourself mission, you may obtain the category from the GitHub starter mission here.

Now that we now have our tab bar, it’s time so as to add some gadgets to it and join them to the corresponding views. To do this, it is advisable add the remaining variety of view controllers to our Storyboard. I’ll add two so my tab bar has a complete of three gadgets:

I set a complete of three view controllers for my tab bar.

Click on on the Tab Bar View Controller and ctrl-drag to the brand new view controllers, one after the other. Then, choose Relationship Segue > View Controllers.

Step 2: primary styling for our tab bar

As soon as each view controller is linked, I’ll choose a picture for every tab bar merchandise. For my pattern app, I’ll use the next:

  • system’s home picture for my first view controller, serving as a Dwelling Display screen, and system’s home.fill for when it’s on chosen state;
  • system’s plus picture for my second view controller, which will probably be the place the person will add a card, and system’s for when it’s on chosen state;
  • system’s individual picture for my third view controller, which would be the person’s data and profile, and system’s individual.fill for when it’s chosen.

However what’s with that blue color? Let’s change it to a greater one by deciding on the Tab Bar on the Tab Bar View Controller and deciding on an Picture Tint that matches our app’s color. For my pattern app, I chosen:

  • iDoxViewColor from my property as Picture Tint,
  • Clear Coloration for my Bar Tint,
  • Clear Coloration for my Background color.

Run the app and be sure to have the outcome you had been searching for. You need to see one thing like this now:

Now it’s time to make our tab bar look even cuter!

Step 3: creating the rounded tab bar impact

Since enhancing the tab bar’s edges to make them look rounded was nearly an unattainable job, the best method to create a rounded tab bar impact is through the use of a CAShapeLayer().

We’ll begin by creating one in our TabBarViewController() class:

let layer = CAShapeLayer()

Additionally create a layerHeight property that we are going to use partly 2 to place our customized center button contained in the tab bar:

var layerHeight = CGFloat()

In my pattern app, I set various colors that I’ll use in my tab bar. I’ll create a reference to them to be able to entry these particular colors extra simply. My concept is to have:

  • a background color, which would be the color to your tab bar;
  • a secondary color, for the unselected gadgets of your tab bar (until you need them to be mechanically gray);
  • a 3rd color that will probably be used because the shadow of the tab bar (if you would like one).

It would appear like this in my class:

let bgColor = UIColor(named: “iDoxLightColor”)
let sColor = UIColor(named: “iDoxAccentColor”)
let tColor = UIColor(named: “iDoxShadowColor”)

Now it’s time to offer a form to our layer. To make it look precisely just like the one within the first image, I used the next pointers:

  • the x place, particularly the layer’s distance from the left fringe of the display, needs to be set to 10;
  • consecutively, the width of the layer needs to be the identical because the display, minus 20 (so the gap to the appropriate aspect of the display will even be 10);
  • the y place, particularly the layer’s distance from the highest of the display, ought to correspond to the unique tab bar’s y place, minus 20;
  • the peak of the layer needs to be the identical because the tab bar’s top, plus 30.

I additionally added:

  1. a shadow, utilizing the third color I referenced above;
  2. gadgets width and positioning to make them extra centred;
  3. a color for the unselected gadgets, utilizing the secondary color.

Lastly, I memorised the layer’s top because the layerHeight property. We might want to entry it later to set the constraints to our customized center button of the tab bar.

I put all the things in a single operate known as setUpTabBar() like this:

This operate will probably be known as in our TabBarViewController()class contained in the viewDidLoad() operate:

Run your mission and it is best to see one thing like this:

Ta-dah! Trying good already!

Prepared for half 2? It’s popping out quickly! Did you take pleasure in this tutorial? Did it work nicely along with your mission? Let me know your suggestions

Need to Join?Observe me on…
❤️ YouTube
💖 Dribbble
💜 Instagram
💙 Ko-Fi
🖤 GitHub

More Posts