Suki Swifter
Published in

Suki Swifter

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

Happy Swifting…✌🏻

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store