CODEWITHSUNDEEP
iosnavigationswiftuiuinavigationbarswiftui-environment
pushpank
pushpank

Reputation: 262

Set Image and Title in Navigation Bar in SwiftUI

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.

Upvotes: 12

Views: 4766

Answers (2)

Anup Kumar Mishra
Anup Kumar Mishra

Reputation: 206

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)
                        }
                    }
    }
}
}

Upvotes: 0

Aviram Netanel
Aviram Netanel

Reputation: 13625

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.

Upvotes: -1

Related Questions