How to Set Custom Navigation Bar Buttons in Swift

by

Navigation bars are an essential component of any iOS app, providing users with a way to navigate through the app’s content. While iOS offers standard navigation bar buttons, there are times when you’ll want to customize these buttons to match your app’s design or add specific functionality. In this guide, we’ll explore how to set custom navigation bar buttons in Swift.

Prerequisites

Before we get started, ensure you have a basic understanding of Swift and iOS app development. You should have Xcode installed and a project in which you want to customize the navigation bar buttons.

Adding Custom Buttons

To add custom buttons to your navigation bar, follow these steps:

Create Your Custom Button: First, create your custom button using a UIButton or UIBarButtonItem. You can customize its appearance and functionality as needed.

let customButton = UIBarButtonItem(title: "Custom", style: .plain, target: self, action: #selector(customButtonTapped))

Add the Button to the Navigation Bar: You can add your custom button to the navigation bar on the left or right side, depending on your design.

To add it to the right side:

navigationItem.rightBarButtonItem = customButton

To add it to the left side:

navigationItem.leftBarButtonItem = customButton

Handle Button Taps: Implement the function that should be executed when the custom button is tapped. In this case, it’s customButtonTapped.

@objc func customButtonTapped() {
    // Add your custom button's action here
}

Customizing Appearance

You can further customize the appearance of your custom navigation bar buttons using the setTitleTextAttributes method for text-based buttons or by setting the button’s image.

For example, to change the title color and font of your button:

let attributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.red, // Change to your desired color
    .font: UIFont.systemFont(ofSize: 18) // Change to your desired font
]

customButton.setTitleTextAttributes(attributes, for: .normal)

Conclusion

Custom navigation bar buttons can enhance the user experience and make your app’s design more cohesive. By following the steps outlined in this guide, you can easily add custom buttons to your navigation bar in Swift. Remember to customize the appearance and functionality of these buttons to suit your app’s requirements.

A pat on the back !!