7

I want to set an image in the titleView of NavigationBar in SwiftUI, as we do in UIKit

navigationItem.titleView = UIImageView(image: UIImage(named: "logo"))

this is how we do it in UIKit.

anyone know how to do it?

Zeeshan Ahmed
  • 644
  • 6
  • 13

6 Answers6

9

Here's how to do it:

  1. Add SwiftUIX to your project.
  2. Set your custom title view via View.navigationBarTitleView(_:displayMode:)

Example code:

struct ContentView: View {
    public var body: some View {
        NavigationView {
            Text("Hello World")
                .navigationBarTitleView(MyView())
        }
    }
}
Vatsal Manot
  • 16,824
  • 8
  • 42
  • 78
  • 2
    This works great, but in order to make the "margins" consistent with the system navigationBar, I needed to chain `.navigationBarTitle("", displayMode: .inline)` as well. – Jay Lee Mar 31 '20 at 12:39
  • Can you please give an Apple reference to `navigationBarTitleView`? I can't find this. – Chris Prince Jan 17 '21 at 06:20
  • @ChrisPrince it's a custom modifier in SwiftUIX, it's not part of the official framework :) – Vatsal Manot Jan 26 '21 at 13:09
  • 1
    Wow SwiftUIX is a really cool project! Wasn't aware of it but now I'm going to use a ton of it's features But is it possible using this approach to show a navigationbarTitle with the image? – the.blaggy Jun 15 '21 at 15:13
8

Simple, Just add your root view into ZStack with top alignment and add your custom center view after root view 

struct CenterNavigattionBar: View {
    var body: some View {
        ZStack(alignment: .top){
            //Root view with empty Title
            NavigationView {
                Text("Test Navigation")
                .navigationBarTitle("",displayMode: .inline)
                .navigationBarItems(leading: Text("Cancle"), trailing: Text("Done"))
            }
            //Your Custom Title
            VStack{
                Text("add title and")
                    .font(.headline)
                Text("subtitle here")
                    .font(.subheadline)
            }
        }

    }
}

Before Image

1

After Image

2

Jitesh Bharadiya
  • 89
  • 1
  • 2
3

Just use a toolbar. You can add any views

  import SwiftUI

  struct HomeView: View {

  // MARK: - Initializer
  init() {
      let appearance = UINavigationBar.appearance()
      appearance.isOpaque      = true
      appearance.isTranslucent = false
      appearance.barTintColor  = UIColor(named: "background")
      appearance.shadowImage   = UIImage()
  }


  // MARK: - View
  // MARK: Public
  var body: some View {
      NavigationView {
          VStack(spacing: 20) {
              Text("Hello")
            
              Text("Navigation Bar Test")
          }
          .navigationBarTitleDisplayMode(.inline)
          .navigationBarItems(leading: leadingBarButtonItems, trailing: trailingBarButtonItems)
          .toolbar {
              ToolbarItem(placement: .principal) {
                  VStack {
                      Text("Title").font(.headline)
                      Text("Subtitle").font(.subheadline)
                  }
              }
            
          }
      }
  }

  // MARK: Private
  private var leadingBarButtonItems: some View {
      Button(action: {
        
      }) {
          Text("Left Button")
              .font(.system(size: 12, weight: .medium))
      }
  }

  private var trailingBarButtonItems: some View {
      HStack {
          Button(action: {
            
          }) {
               Text("R1\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }

          Button(action: {
            
          }) {
              Text("R2\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }
      }
  }
}

enter image description here

Den
  • 2,431
  • 24
  • 22
1

Currently, you can't.

There are two overloads for .navigationBarTitle(), taking either a Text view or a type conforming to StringProtocol. You can't even pass in a modified view like Text("Title").font(.body). This would be a great feature, I'd submit a feature request: http://feedbackassistant.apple.com

John M.
  • 7,753
  • 3
  • 26
  • 39
-1

Maybe this works for you?

Basically: Use GeometryReader to get the width of the screen Have NavigationBarItems(leading: HStack {Spacer() Image("name").resizable().frame(width:..., height: ..., alignment: .center Spacer()}.frame(width:geometry.size.width)

Example code:

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                Text("Hello, world!")
                    .padding()

                    .navigationTitle("test")

                    .navigationBarItems(leading: HStack {
                        Spacer()

                        Image("money")
                            .resizable()
                            .frame(width: 50, height: 50, alignment: .center)

                        Spacer()
                    }
                    .frame(width: geometry.size.width)
                    )
            }
        }
    }
}
C. Peck
  • 3,167
  • 3
  • 16
  • 34
bruijnesteijn
  • 1
-8

Try this...

How to put a logo in NavigationView in swiftui?

This shows how to handle adding an Image to NavigationView in SwiftUI. Hope it helps.

Nick Perkins
  • 180
  • 11
  • 3
    How about adding an explanation. Good answers have explanations to accompany them. – Gerhard Oct 22 '19 at 14:02
  • You both are the life of the party I am sure of it. lol . He asked how to do it. I provided with how to do it. He did not ask why. – Nick Perkins Oct 23 '19 at 23:42
  • this isn't a solution, did you tried it once before posting here? – Zeeshan Ahmed Oct 26 '19 at 10:56
  • 1
    https://stackoverflow.com/questions/56546213/how-to-put-a-logo-in-navigationview-in-swiftui here it shows how to handle adding an image in NavigationView. @ZeeshanAhmed – Nick Perkins Nov 06 '19 at 03:10