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
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 :
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 :
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
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
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
Thank You for reading the article…
I will soon make a repository and update it here.. Have a nice day