Set Image and Title in Navigation Bar in SwiftUI

Question

Would really appreciate it if anyone knows how to implement it or ideas on how to do it.

Answer 1

use this approach

    NavigationView{
        
        VStack(alignment: .leading) {
            
            ScrollView(.vertical){
                
                    ForEach(list, id: \.self) { item in
                            Text(item).font(.title).padding()
                    }
                }
            
            Spacer()
        }
                .toolbar {
                    ToolbarItem(placement: .principal) {
                            Text("write something for title")
                                .font(.heavy)
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                            Image("image").resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 50, alignment: .trailing)
                        }
                    }
    }
}
}

Answer 2

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.

Answer 3

This does mostly what you're after. Using displayMode: .automatic when declaring the navigationBarTitle means that it'll show as largeTitle until scrolled at which point the NavBar goes to displayMode: .inline . I'm just using an SF Symbols image for example but you could swap in Cap's shield in the same way. Wrap it in a button if you want interaction.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0...1000, id: \.self) { _ in
                Text("Sample")
            }
            .navigationBarTitle("Large Title", displayMode: .automatic)
            .navigationBarItems(trailing: Image(systemName: "shield"))
        }
    }
}

Answer 4

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.