iOS toolbar barbuttonitem spacer

Question

I am trying to add two bar buttons to toolbar in iOS [Cancel] & [Save] on right and left side accordingly.

I used a third bar button [Spacer] and set it to be [.flexiblewidth] Otherwise, when adding it only the left button appears [Cancel] and the [Spacer] & and [Save] which have to be next disappearing ?

the screen shot is in the link: https://ibb.co/cZsaVV

let pickerView = UIPickerView()

override func viewDidLoad() {


pickerView.addSubview(self.setToolBar())
}

func setToolBar() -> UIToolbar {
      let toolBar =  UIToolbar()
        toolBar.isTranslucent  = true
        toolBar.backgroundColor = UIColor.clear
        let barButtonAttr = [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 15),
                             NSAttributedString.Key.foregroundColor : UIColor.black]
        // [Save] BarButtonItem
        let saveBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.save, target: self, action: nil)
        saveBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
        // [Cancel] BarButtonItem
        let cancelBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel, target: self, action: nil)
        cancelBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)

        let spacerBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace ,
                                                  target: self, action: nil)
        spacerBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
        // add BarButtonItems to toolBar
        toolBar.items = [cancelBarButtonItem,spacerBarButtonItem,saveBarButtonItem]
        toolBar.sizeToFit()
return toolBar
}

Welcome to SO. Please add the screenshot to the post itself. Also: what happens, and what do you expect to happen? Try adding constraints to the toolbar to give a width of the screen — , Nov 23 '18 at 06:11
At the end of the post it says "enter image description here". Add a new line for that so the image is visible in the post. — , Nov 23 '18 at 06:24
try to add two bar button item to UIToolBar and set to far right & and far left. They have been added next to each other on the left side? — Hadi AlNehlawi, Nov 23 '18 at 06:24
Try removing `spacerBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)` — , Nov 23 '18 at 06:26
how can we set the two [Save] & [Cancel] bar button items to let corner and right corner...? — Hadi AlNehlawi, Nov 23 '18 at 06:28
Please provide a [mcve]. From the post as it is now, it's hard to tell what's going on, and what's expected. — , Nov 23 '18 at 06:29

score 0 · Answer 1 · answered Nov 23 '18 at 11:53

func createAccessoryViewWithTarget(_ target: AnyObject, width: CGFloat) -> UIView {

    // Previous button
    let previousButton = UIBarButtonItem(title: "Previous", style: .plain, target: target, action: #selector(self.moveToPreviousTextField))
    previousButton.tintColor = UIColor.white

    //Next button
    let nextButton = UIBarButtonItem(title: "Next", style: .plain, target: target, action: #selector(self.moveToNextTextField))
    nextButton.tintColor = UIColor.white

    // Dismiss/close/done button
    let doneButton = UIBarButtonItem(title: "Done", style: .done, target: target, action: #selector(self.keyboardDoneButtonTapped))
    doneButton.tintColor = UIColor.white

    let keyboardToolbar: UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: width, height: 44))
    keyboardToolbar.barStyle = .black

    let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)

    var itemsArray = [UIBarButtonItem]()
    itemsArray.append(previousButton)
    itemsArray.append(fixedSpace)
    itemsArray.append(nextButton)
    itemsArray.append(flexSpace)
    itemsArray.append(doneButton)
    keyboardToolbar.items = itemsArray
    keyboardToolbar.sizeToFit()

    return keyboardToolbar
}

This one is old code may be swift3 I guess. Here Im adding 3 buttons previous next and done button. flexible space and fixed space are used for spaces between buttons. Important to note here is the order that you adding your barbutton items. In your case use flexible space to place your 2 buttons on right and left end in the order of left end button, flexible space, right end button.

score 0 · Answer 2 · answered Nov 23 '18 at 18:28

I've got the solution finally.

I am adding the ToolBar to the PickerView and then calling UIToolBar.SizeToFit() which is must in all cases.

the issue was I had to change the picker view size later in this case the size of subview ToolBar is not adapting with the new size coordination of pickerView. So the solution simply to call again ToolBar.SizeToFit() after any modification of parent view. here's snap of the code:

// popupView is custom UIPickerView

popupView.frame = CGRect(x:0, y:0, width:100, height:100)

// toolBar is an object of UIToolBar of the custom UIPickerView AddCurrencyPicker

(popupView as! AddCurrencyPicker).toolBar.sizeToFit()

iOS toolbar barbuttonitem spacer

2 Answers2