Create stunning designs
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.
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:
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 >
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:
homepicture for my first view controller, serving as a Dwelling Display screen, and system’s
home.fillfor when it’s on chosen state;
pluspicture for my second view controller, which will probably be the place the person will add a card, and system’s
plus.circle.fillfor when it’s on chosen state;
individualpicture for my third view controller, which would be the person’s data and profile, and system’s
individual.fillfor 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:
iDoxViewColorfrom 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
We’ll begin by creating one in our
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:
- a shadow, utilizing the third color I referenced above;
- gadgets width and positioning to make them extra centred;
- 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
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