UIBarButtonItem color setting in Swift-5.0

Question

I realised that the color-behaviour of my UIBarButtonItem's (left and right buttons) is not as desired.

If I press and hold the right UIBarButton (see video), then the color changes from light-yellow to gray'isch dark-yellow.

However, I would like a solution that keeps the same light-yellow color, no matter of any button selection, press-and-hold, etc. The button color should always stay the same light-yellow.

How can I achieve this ?

Here is the video done in Simulator: (you can clearly see that click-n-hold causes a color-change. what is the solution to keep the light-yellow color even when press-and-hold ??)

Here is the Code:

@IBOutlet weak var btnCancel: UIBarButtonItem!
@IBOutlet weak var btnApply: UIBarButtonItem!

override func viewDidLoad() {
    super.viewDidLoad()

    btnCancel.title = "Cancel".localized
    btnApply.title = "Apply".localized
    navigationItem.title = "Filter".localized

    let attributes: [NSAttributedString.Key : Any] = [ .font: UIFont(name: "Avenir-Heavy", size: 14)!, .foregroundColor: UIColor.yellow]
    navigationItem.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
    navigationItem.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .selected)
    navigationItem.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .highlighted)
    navigationItem.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .focused)
}

Em

I don't think that's possible using a standard UIBarButtonItem, since that behavior is native and standard across all UIButtons in most apps. One option you could have is setting the customView property instead of using the title of the UIBarButtonItem. Not really sure why you would want that though – Corcyra

Thank you - I'll look into the cutomView. And the "why" is driven by my designer ;) – Em

Answer 1

Here is how you can achieve desired effect by wrapping a normal button as your barButton item.

    private let normalButton: UIButton = {
        let normalButton = UIButton()
        normalButton.frame = CGRect(x: 0, y: 0, width: 80, height: 30)
        normalButton.setTitle("Apply", for: .normal)
        normalButton.setTitleColor(.yellow, for: .normal)
        normalButton.isUserInteractionEnabled = true
        return normalButton
    }()

    private lazy var applyRightBarButtonItem: UIBarButtonItem = {
        // Wrap your button as UIBarButtonItem
        return UIBarButtonItem(customView: normalButton)
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Important for detecting taps
        normalButton.addTarget(self, action: #selector(normalButtonTapped), for: .touchUpInside)
        // Set your right bar button ( You can do the same for the left one)
        self.navigationItem.rightBarButtonItem = applyRightBarButtonItem

    }

    @objc private func normalButtonTapped() {
        // TODO: - Handle tap
        print("Button Tapped")
    }

Middleton

could you make the button lazy and then place the .addTarget(self, ...) inside the UIButton = { }() call? – Vesta

@Vesta Yeah,I think that should work too. The best way to be sure that it works, is trying it for yourself and see if it responds to events as expected. Happy Coding ~ – Middleton

Answer 2

please try this approach:

// MARK:- Custom BarButton Appearance
private extension YourViewController {

    func setupBarButtonAppearance() {

        let color = UIColor.yellow
        let font = UIFont(name: "Avenir-Heavy", size: 14)!

        let customAppearance = UIBarButtonItem.appearance(whenContainedInInstancesOf: [YourViewController.self])

        customAppearance.setTitleTextAttributes([
        NSAttributedString.Key.foregroundColor : color,
        NSAttributedString.Key.font : font], for: .normal)

        customAppearance.setTitleTextAttributes([
        NSAttributedString.Key.foregroundColor : color,
        NSAttributedString.Key.font : font], for: .highlighted)
    }
}

simply call this method in your viewDidLoad()

Coquina