导航栏项目未左对齐

Question

I have a navigationBar where I would like to have a button on the left, a activityIndicator as title and a doneButton on the right. This is what I tried:

    let activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
    let googleImage  = UIImage(named: "google")!
    let googleButton = UIBarButtonItem(image: googleImage,  style: .plain, target: self, action: #selector(googleButtonTapped))
    googleButton.image = UIImage(named: "google")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
    
    navigationController?.navigationBar.barTintColor = UIColor.blueCustom
    navigationController?.navigationBar.tintColor = UIColor.white
    activityIndicator.hidesWhenStopped = true
    activityIndicator.color = .white
    
    self.navigationItem.titleView = self.activityIndicator
    self.navigationItem.leftBarButtonItem = googleButton
    self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Fertig", style: .done, target: self, action: #selector(doneTapped))

The problem is that googleButton and activityIndicator are not on the left/center:

What am I missing here?

Update:

I tried setting the leftBarButtonItem to a simple item with title and it works as expexted.. Why is it not working with the image?

Answer 1

I think it has to do with the intrinsicContentSize of the googleButton . Since you haven't explicitly set it, the size of the google logo image is expanding the width of the button. The intrinsicContentSize property of a UIButton has a set height by default, but none for the width:

let googleImage  = UIImage(named: "google")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal).resizeTo(size: CGSize(width: 25, height: 25))
let googleButton = UIButton()
googleButton.setBackgroundImage(googleImage, for: .normal)
googleButton.addTarget(self, action: #selector(googleButtonTapped), for: .touchUpInside)
let googleBarButton = UIBarButtonItem(customView: googleButton)

You can create a UIImage extension to redraw the size of the google logo:

extension UIImage {
    func resizeTo(size: CGSize) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: size)
        let image = renderer.image { _ in
            self.draw(in: CGRect.init(origin: CGPoint.zero, size: size))
        }
        
        return image.withRenderingMode(self.renderingMode)
    }
}

Change the button name to:

self.navigationItem.leftBarButtonItem = googleBarButton

Of course, the 25 points for the width and the height is arbitrary. Adjust it to fit your need.