tabbar middle tab out of tabbar corner-CodePudding

I want to make a tab bar with 5 tab items. I want the middle one ( third ) to be out of tab bar's corner it may be tough to understand therefore I decided to add screenshot

I want to make something like you can see above but I don't know how it's possible. I would appreciate any way you recommend to do it.

CodePudding user response：

select tabbar Item and set its image insets

Make sure to get proper image (if using an image) goto Assets-> select desired image -> set property to always original

CodePudding user response：

create a class of UITabBarController and assign it to the TabBarController.

initialise Variable

let button = UIButton.init(type: .custom)

Then in viewDidLoad

override func viewDidLoad() {
        super.viewDidLoad()
        
       
        button.setImage(UIImage(named: "IMAGE_NAME_FROM_ASSETS"), for: .normal)
        button.backgroundColor = UIStyle.Color.CameraBG
        button.layer.cornerRadius = 40
        button.addShadow(offset: CGSize(width: 5, height: 5), color: UIStyle.Color.CameraShadow, radius: 5, opacity: 0.1)
        button.addTarget(self, action: #selector(pressedAction(_:)), for: .touchUpInside)
        self.view.insertSubview(button, aboveSubview: self.tabBar)
        
    }

Add viewDidLayoutSubviews in your class

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // safe place to set the frame of button manually
    button.frame = CGRect.init(x: self.tabBar.center.x - 40, y: self.view.bounds.height - 100, width: 80, height: 80)
}

Action You Want To Perform on button click

@objc func pressedAction(_ sender: UIButton) {
    // do your stuff here
    let nc = UINavigationController(rootViewController: YOURVC.storyboardInstance())
    nc.modalPresentationStyle = .fullScreen
    present(nc, animated: true, completion: nil)
}