CODEWITHSUNDEEP
iosswiftmobile-application
huseyin
huseyin

Reputation: 61

How to add image and button design to the navigation bar?

I want to add button and image to the design of the navigation bar but couldn't add the picture successfully. I tried the following code inside viewDidLoad:

 let logo = UIImage(named: "logo.png")
    let imageView = UIImageView(image:logo)
    navigationController?.navigationBar.barTintColor = UIColor.green
    self.navigationItem.titleView = imageView

I tried the code and the navigation bar looks like this: enter image description here As a result of the code I tried, there is space on the edges. I want to align the picture to the right of the screen. I want to align the button to the left of the screen.

The image of the design I want is as follows: enter image description here

What code should I try for this?

Upvotes: 1

Views: 1333

Answers (2)

Zhou Haibo
Zhou Haibo

Reputation: 2068

Is this what you want? Though the background image is stretched as I just randomly pick an image, which doesn't has the correct resolution for navigation bar.

In iOS 14, it looks like this. Well, I google it too, as it is also the 1st time for me to customize the background image of navigation bar. I usually use a solid color for the background.

enter image description here

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        let img = UIImage(named: "Human")!
        navigationController?.navigationBar.setBackgroundImage(img.resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0 ,right: 0), resizingMode: .stretch), for: .default)

        let backImg = UIImage(named: "back")?.withRenderingMode(.alwaysOriginal)
        let leftButton = UIBarButtonItem(image: backImg, style: .plain, target: self, action: #selector(backTapped))
        navigationItem.leftBarButtonItem = leftButton
    }

Upvotes: 0

nisha mistry
nisha mistry

Reputation: 56

You should try this, hope this will worked

let backButton: UIBarButtonItem = UIBarButtonItem(title: "Back", style: .plain, target: self, action: #selector(back))
        self.navigationItem.leftBarButtonItem = backButton
    
    let logo = UIImage(named: "google_logo.png")
    let imageView = UIImageView(image:logo)
    imageView.contentMode = .scaleAspectFit
    self.navigationItem.titleView = imageView

enter image description here

Upvotes: 1

Related Questions