How to create fixed space and flexible space bar button items programmatically?

Question

I want to create UIBarButtonItems programmatically and place these fixed space items between buttons.

Gunning

Answer 1

UIBarButtonItem *fixedItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
fixedItem.width = 20.0f; // or whatever you want

UIBarButtonItem *flexibleItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

Wrath

Note that to set the width of a Fixed Space UIBarButtonItem, you need to set the .width property. – Sage

perfect answer! – Thormora

how can we have flexible width give equal spacing between all the buttons using code? I don't want to hard code width=20.0 – Fibro

Just put one flexible width between each two buttons @Fibro – Kesler

Answer 2

Swift

// Fixed Space
let fixedSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil)
fixedSpace.width = 20.0

// Flexible Space
let flexibleSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)

Afterburning

Answer 3

UIBarButtonItem *todayItem = [[UIBarButtonItem alloc] initWithTitle:@"Today" style:UIBarButtonItemStylePlain target:self action:@selector(update_baritem:)];
todayItem.tag = 2;

UIBarButtonItem *cashItem = [[UIBarButtonItem alloc] initWithTitle:@"Cash" style:UIBarButtonItemStylePlain target:self action:@selector(update_baritem:)];
cashItem.tag = 3;

UIBarButtonItem *creditItem = [[UIBarButtonItem alloc] initWithTitle:@"Credit" style:UIBarButtonItemStylePlain target:self action:@selector(update_baritem:)];
creditItem.tag = 4;

UIBarButtonItem *allItem = [[UIBarButtonItem alloc] initWithTitle:@"All" style:UIBarButtonItemStylePlain target:self action:@selector(update_baritem:)];
allItem.tag = 1;

UIBarButtonItem *returnItem = [[UIBarButtonItem alloc] initWithTitle:@"Return" style:UIBarButtonItemStylePlain target:self action:@selector(update_baritem:)];
returnItem.tag = 5;

UIBarButtonItem *fixedItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[fixedItem setWidth:455.0f];

UIBarButtonItem *fixed2Item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[fixed2Item setWidth:37.0f];

UIBarButtonItem *flexibleItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

[self.toolbar setItems:@[fixed2Item, returnItem, creditItem, cashItem, fixedItem, todayItem, flexibleItem, allItem] animated:NO];

Kinase

Why are you setting right bar button items to left items? That's just really bad style or a bug and I don't know which. – Nils

Answer 4

As of this writing, if you're targeting iOS 14 and above, you can use the corresponding class functions to get fixed and flexible space items more concisely:

let fixedSpace = UIBarButtonItem.fixedSpace(20)
let flexibleSpace = UIBarButtonItem.flexibleSpace()

Docs: fixed space, flexible space

Minimize

Answer 5

In Swift:

let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
fixedSpace.width = 20.0

Venerable

Answer 6

Swift 5.1.2

// Fixed Space
let fixedSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
fixedSpace.width = 20.0

// Flexible Space
let flexibleSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

Cornelia

Answer 7

In ViewDidLoad:

    //toolbar
UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 416, 320, 44)];

// bar btns
UIBarButtonItem *backBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRewind target:self action:@selector(goBack)];
UIBarButtonItem *forwardBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFastForward target:self action:@selector(goForward)];
UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
UIBarButtonItem *bookmarkBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:self action:@selector(bookmark)];
UIBarButtonItem *refreshBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh)];
UIBarButtonItem *stopLoadingBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemStop target:self action:@selector(stopLoading)];

// add btns to the bar
[toolBar setItems:[NSMutableArray arrayWithObjects:bookmarkBtn,backBtn,forwardBtn,flexibleSpace,refreshBtn,stopLoadingBtn, nil]];

// adds the toobar to the view
[self.view addSubview:toolBar];

Do not forget the actions for each button also(in this example a UIWebView):

    -(void)goBack
{
    [_webView goBack];
}

-(void)goForward
{
    [_webView goForward];
}

etc.

Beeler

Answer 8

With Swift 3, UIBarButtonItem has an initializer called init(barButtonSystemItem:target:action:). init(barButtonSystemItem:target:action:) has the following declaration:

convenience init(barButtonSystemItem systemItem: UIBarButtonSystemItem, target: Any?, action: Selector?)

Initializes a new item containing the specified system item.

---

UIBarButtonSystemItem is an enumeration that offers many cases including done, play, add or cancel. However, according to your needs, you may also choose flexibleSpace or fixedSpace cases.

flexibleSpace case has the following declaration:

Blank space to add between other items. The space is distributed equally between the other items. Other item properties are ignored when this value is set.

fixedSpace case has the following declaration:

Blank space to add between other items. Only the width property is used when this value is set.

---

Therefore, you can create fixed and flexible space bar button items programmatically as shown below:

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

let fixedSpace = UIBarButtonItem(
    barButtonSystemItem: UIBarButtonSystemItem.fixedSpace,
    target: nil,
    action: nil
)
fixedSpace.width = 30 // Set width with the appropriate value

---

As an example, the Playground code below shows how to add a bottom bar with two centered play and pause bar button items separated by a fixed space of 30 in a view controller:

import PlaygroundSupport
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        title = "Home"
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Show navigation controller’s built-in toolbar
        navigationController?.setToolbarHidden(false, animated: false)

        // Create UIBarButtonItems
        let flexibleSpace1 = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let playItem = UIBarButtonItem(barButtonSystemItem: .play, target: self, action: nil)
        let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
        fixedSpace.width = 30
        let pauseItem = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: nil)
        let flexibleSpace2 = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

        // Set the view controller toolbar items
        setToolbarItems([flexibleSpace1, playItem, fixedSpace, pauseItem, flexibleSpace2], animated: false)
    }

    override func viewWillDisappear(_ animated: Bool) {
        // Hide navigation controller’s built-in toolbar
        navigationController?.setToolbarHidden(true, animated: true)

        super.viewWillDisappear(animated)
    }

}

let viewController = ViewController()
let navigationController = UINavigationController(rootViewController: viewController)
PlaygroundPage.current.liveView = navigationController

---

Preview your view controller in the Playground assistant editor using View ▸ Assistant Editor ▸ Show Assistant Editor

Stereochromy