Awesome TabView In SwiftUI

Hey readers this is my first article on Medium. Well, Everyone who starts with swiftUI and tries to design a intriguing TabBar, It’s kinda easy but hard to figure out and In this Article, I will try to help with making a simple cool UI of TabBar in SwiftUI

Two tab buttons and One Special Button in TabBar

Let’s Begin, Creating this awesome thingy right now!

Alright!, Let’s see what all components are in there

• Gradient Background
• Two Buttons with an Image and a Caption
• A special Button with three Concentric Circles
• And…. Thats it.. XD

Now that we know what all things we need to make, let’s make them, Starting of f with Gradient Background

Gradient Background :

Includes 2 Colours of Linear Gradient

Well, If You have pasted this code, it might be throwing you errors. Xcode doesn’t know yet what RoundedCorners is… Well I had to create a view extension using UIKit Classic Stuff. Also you might be wandering why do we need to create a view extension. I will answer the latter one. SwiftUI default extension gives you capabilities to Round all corners but not specific ones. But here we need to round only Top Corners and leave the other ones undisturbed. Why Undisturbed? Cuz, You don’t want your tab bar to look awful on Notch-less devices

UIBezierPath does the that thingy we need, so here’s how to code it out :

You can go by the other way to create your own path.. but since default one exists why waste time.. XD

Viola..! Step 1 Done…Hurrah… Hang on I got u.

Special Button (One with scary concentric Circles) :

Here, we have three circles… So we can achieve this by using ZStack. And All this can be set as Button Background. Finally Add Image in the Button Content

Position is used to make that special button out stand the other buttons.. here gradients are used to make concentric circles

And… Step 2 Done.. Hang on guys we are close enough now

Well Finally, We need the Tab buttons

Thats simple VStack to hold Image and Table inside Button Content

accent color gives access to set the color items inside the component

Now Controlling the Tabs using a state variable and setting accent when the index matches along with changing the content based on Index.. OfCourse lot of content here… But, Its kinda hard to explain from very basics. I presume you know state variables and how they work.

Here’s the whole code… Good Luck

Hope this helps

Thank You for reading the article…

I will soon make a repository and update it here.. Have a nice day

Happy Swifting…✌🏻