Swift: UIBarButtonItem with bigger size than UIToolbar

Question

I have a UIToolbar installed on my Viewcontroller on the bottom via Storyboard. I also added a bottom in the Storyboard and now I want to give this bottom a greater height than the toolbar itself.

It should be something like that, but it cannot be a Tabbar but needs to be a Toolbar, as the items on it are purely contextual actions and not top level navigation items (see Apple guidelines here and here):

I tried the following code in my Viewcontroller without success (as mentioned here):

class MyVC: UIViewController {

    @IBOutlet var ibOutletForButton: UIBarButtonItem!

    override func viewDidLoad() {
        super.viewDidLoad()

        let menuBtn = UIButton(type: .custom)
        menuBtn.frame = CGRect(x: 0.0, y: 0.0, width: 20, height: 120)
        menuBtn.setImage(UIImage(named:"iconImage"), for: .normal)
        menuBtn.addTarget(self, action: #selector(onMenuButtonPressed(_:)), for: UIControlEvents.touchUpInside)
        let menuBarItem = UIBarButtonItem(customView: menuBtn)
        let currWidth = menuBarItem.customView?.widthAnchor.constraint(equalToConstant: 24)
        currWidth?.isActive = true
        let currHeight = menuBarItem.customView?.heightAnchor.constraint(equalToConstant: 124)
        currHeight?.isActive = true
        ibOutletForButton = menuBarItem
    }
}

How could I get the button bigger and moved up that it looks like on the image?

score 0 · Answer 1 · answered Feb 03 '22 at 10:11

One way you could do this is to add the button directly to the UIViewController instead of to the UIToolbar. You have then complete freedom of positioning and sizing.

As you don't use a UITabBar, you will stay within your UIViewController and it should be no problem

Omer Tekbiyik · Answer 2 · 2022-02-03T12:41:16.093

You can create 4 BarbuttonItem after first 2, give some flexible space between items and add your 'plus' button to toolbar directly in that space.

    @IBOutlet weak var myToolBar: UIToolbar!
    let menuBtn = UIButton(type: .custom)

     override func viewDidLoad() {
        super.viewDidLoad()
        let menuBtn = UIButton(type: .custom)
        menuBtn.frame = CGRect(x: myToolBar.center.x-10, y: -60, width: 20, height: 120)
        menuBtn.setImage(UIImage(named:"iconImage"), for: .normal)
        menuBtn.addTarget(self, action: #selector(onMenuButtonPressed(_:)), for: UIControlEvents.touchUpInside)
                let spacer = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let items = myToolBar.items!
    
        myToolBar.setItems([items[0],items[1],spacer,items[2],items[3]], animated: false)

        myToolBar.addSubview(menuBtn)
      }

Swift: UIBarButtonItem with bigger size than UIToolbar

2 Answers2