Toolbars (UIToolbar)

What is UIToolbar?

UIToolbar is a UI component in iOS that provides a horizontal bar containing buttons and actions, typically placed at the top or bottom of a screen. It is commonly used for navigation, editing, and action buttons in an app.

---

1. Key Features of UIToolbar

✅ Provides a compact set of actions
✅ Supports flexible & fixed spacing for proper alignment
✅ Works well with UINavigationController
✅ Supports custom and system-defined bar button items
✅ Can be customized with different styles & colors

---

2. Adding UIToolbar in Storyboard

1. Drag & Drop a UIToolbar from the Object Library.
2. Set constraints to position it at the top or bottom of the screen.
3. Add UIBarButtonItems to define actions like Save, Edit, or Done.
4. Run the app to see the toolbar with buttons in action.

---

3. Implementing UIToolbar Programmatically

import UIKit

class ViewController: UIViewController {

    let toolbar = UIToolbar()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupToolbar()
    }

    func setupToolbar() {
        toolbar.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(toolbar)

        // Constraints
        NSLayoutConstraint.activate([
            toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            toolbar.heightAnchor.constraint(equalToConstant: 50)
        ])

        // Creating Bar Button Items
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

        let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addAction))
        let editButton = UIBarButtonItem(title: "Edit", style: .plain, target: self, action: #selector(editAction))

        // Adding Items to Toolbar
        toolbar.setItems([addButton, flexibleSpace, editButton], animated: false)
    }

    @objc func addAction() {
        print("Add button tapped")
    }

    @objc func editAction() {
        print("Edit button tapped")
    }
}

✅ This creates a toolbar with an “Add” and “Edit” button.

---

4. Customizing UIToolbar

4.1 Changing Toolbar Style

toolbar.barStyle = .black  // Options: .default, .black, .blackTranslucent

4.2 Changing Toolbar Background Color

toolbar.barTintColor = UIColor.systemBlue

4.3 Changing Button Tint Color

toolbar.tintColor = UIColor.white

4.4 Setting a Transparent Toolbar

toolbar.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
toolbar.isTranslucent = true

---

5. Adding System Bar Button Items

iOS provides predefined button styles that can be easily added.

let trashButton = UIBarButtonItem(barButtonSystemItem: .trash, target: self, action: #selector(deleteAction))
let saveButton = UIBarButtonItem(barButtonSystemItem: .save, target: self, action: #selector(saveAction))

✅ System-defined buttons ensure a consistent iOS look & feel.

---

6. Adding Flexible & Fixed Spaces

Flexible Space (Expands automatically)

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

➡️ Used for even spacing between buttons.

Fixed Space (Fixed width)

let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
fixedSpace.width = 20  // Set width manually

➡️ Used to fine-tune button placement.

---

7. Toolbar Inside a UINavigationController

If your app uses a UINavigationController, the toolbar is already built-in.

self.navigationController?.isToolbarHidden = false
self.navigationController?.toolbar.setItems([addButton, flexibleSpace, editButton], animated: true)

✅ This ensures seamless integration with navigation controllers.

---

8. Handling UIToolbar Button Actions

@objc func addAction() {
    print("Add action performed")
}

@objc func deleteAction() {
    print("Delete action performed")
}

✅ Button taps trigger corresponding actions.

---

9. Common Issues & Fixes

❌ Issue: Toolbar Not Visible

✅ Fix: Ensure it’s added to the view and has constraints.

view.addSubview(toolbar)

❌ Issue: Buttons Not Responding

✅ Fix: Ensure buttons have a valid target and action method.

❌ Issue: Toolbar Covers Content

✅ Fix: Use safeAreaLayoutGuide.bottomAnchor for proper positioning.

---

10. Conclusion

✔️ UIToolbar provides quick access to common actions
✔️ Supports flexible layouts with spacing options
✔️ Works seamlessly with UINavigationController
✔️ Can be fully customized with colors, images, and system items

Would you like a custom UIToolbar implementation for your project? 🚀