Set Image and Title in Navigation Bar in SwiftUI

Viewed 2418

AppStore app has an icon with an image on the right side of the NabBar with Large Title: Would really appreciate it if anyone knows how to implement it or ideas on how to do it.

2 Answers

I can only answer for the first part, which is - How to set an image with in the title :

(in the navigationbar)

struct ContentView: View {
var body: some View {
            
    let array = ["thing 1", "thing 2", "thing 3", "others"]
    NavigationView{
        
        VStack(alignment: .leading) {
            
            ScrollView(.vertical){
                
                    ForEach(array, id: \.self) { item in
                            Text(item).font(.title).padding()
                    }
                }
            
            Spacer()
        }
        .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                            Text("Title")
                                .font(.title)
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                            Image(Constants.logoImage).resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 50, alignment: .trailing)
                        }
                    }
    }
}
}

hope it helps!

maybe I'll add here the animation as well in the future if I'll get into it.

THIS DONE IN UIKIT.

Here is what the code looks like

let viewA = UIView()
let viewB = UIView()

private func setupNavigationBarAppearance() {

        viewA.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewA)))
        viewB.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewB)))
        
        let leftBarButtonItem = UIBarButtonItem(customView: viewA)
        let rightBarButtonItem = UIBarButtonItem(customView: viewB)
        
        navigationItem.leftBarButtonItem = leftBarButtonItem
        navigationItem.rightBarButtonItem = rightBarButtonItem
        navigationItem.title = "Hello World"
        
    }

@objc private func didViewA() {
        print("Hello")
    }
    
    @objc private func didViewB() {
        print("World")
    }

I used UIView here because ImageView is a subclass of UIView so you can just relate it with your ImageView. You can also remove left or right barButtonItem if you do not need it.

Related