CODEWITHSUNDEEP
swiftuitabbartabbarpinterest
Junaid
Junaid

Reputation: 33

How to create floating Tab Bar Swift

I'm trying to create a Pinterest style Tab Bar. Is it possible to customise UITabBar in that way or do you have to write a separate view to sit on top of everything if so how would you do that? It's basically just moved up with rounded corners and a shadow. How would you adjust the width of the tab bar and move it up?

Image of Tab Bar

Upvotes: 3

Views: 4480

Answers (2)

emrcftci
emrcftci

Reputation: 3514

If you want to make "RoundedTabbar" than you can create one like this ->

import UIKit

class RoundedTabBarController: UITabBarController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let layer = CAShapeLayer()
    layer.path = UIBezierPath(roundedRect: CGRect(x: 30, y: tabBar.bounds.minY + 5, width: tabBar.bounds.width - 60, height: tabBar.bounds.height + 10), cornerRadius: (tabBar.frame.width/2)).cgPath
    layer.shadowColor = UIColor.lightGray.cgColor
    layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
    layer.shadowRadius = 25.0
    layer.shadowOpacity = 0.3
    layer.borderWidth = 1.0
    layer.opacity = 1.0
    layer.isHidden = false
    layer.masksToBounds = false
    layer.fillColor = UIColor.white.cgColor
  
    tabBar.layer.insertSublayer(layer, at: 0)

    if let items = tabBar.items { 
        items.forEach { item in 
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -15, right: 0) 
        }
    }

    tabBar.itemWidth = 30.0
    tabBar.itemPositioning = .centered
  }
}

Don’t forget to type if you are using storyboard, the class name in the Identity inspector.

PS: I'm sharing Emmanuele Corporente's Medium article content as an answer please check the original article & give it some claps!

Upvotes: 5

EmilioPelaez
EmilioPelaez

Reputation: 19912

I created a floating tab bar library. It doesn't look exactly like Pinterest's but you could probably modify the drawing code to change the way it looks.

Here's the repo.

If you want to implement it from scratch, you'll have to create your own view controller subclass, as well as a UIView subclass for the tab bar, and manage the "page" switching yourself. UITabBarController doesn't offer enough customization for this.

Upvotes: 0

Related Questions