6

I made a list similar to the apple one seen below but I really don't like how the UInavigation bar looks like. Ideally I would want it smaller or have it hidden so I could put my own view there.

Apple list view

I've tried to hide it by using the following from apple appearance api

init() { 
    UINavigationBar.appearance().backgroundColor = .green
    UINavigationBar.appearance().isHidden = true
   }

even having the navigation bar like this would be more ideal compared to having the giant title

navigation bar title

but this has no impact, does anyone have any suggestions or ideas how I could customize this to be more how I want it?

yawnobleix
  • 1,204
  • 10
  • 21

2 Answers2

6

This is what I have achieved using swiftUI and a bit of UINavigationView, I believe those modifiers will be implemented to swiftUI after beta.

enter image description here

I achieved this by tweaking max's idea about the UINavigationBar's appearance. How can the background or the color in the navigation bar be changed?

Aside from that, I just throw a toggle to the NavigationBar title's view

var body: some View {
    VStack {
        if displayImg {
            Image("dontstarve")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
        } else {
            Image(systemName: "play")
        }
    }
        .navigationBarTitle(Text("Adjustment"), displayMode: .inline)
        .navigationBarItems(trailing:
            HStack {
                Toggle(isOn: $displayImg) {
                    Text("\(self.displayImg ? "on" : "off")")
                        .foregroundColor(Color.white)
                }
    })
}

Below are the only code that isn't SwiftUI. Which I just throw all of them in init():

init() {
    UINavigationBar.appearance().tintColor = .systemGray6
    UINavigationBar.appearance().barTintColor = .systemTeal
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white, NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 25)]
}

And yes, remember to set the navigation bar title mode to inline:

    .navigationBarTitle(Text("Home"), displayMode: .inline)
elp
  • 8,021
  • 7
  • 61
  • 120
Legolas Wang
  • 1,951
  • 1
  • 13
  • 26
  • Is it possible that .inline is broken in the current xcode beta? – yawnobleix Aug 05 '19 at 06:41
  • 1
    I'm running beta 5 and it seems .inline working fine for me. Though I do found beta 5 is not as stable and few things broke. Could you better explain how .inline is broke for you? .navigationBarTitle should be placed inside the Navigation View, for not outside. For example: NavigationView { Text("Hi") .navigationBarTitle(Text("Home"), displayMode: .inline) } } – Legolas Wang Aug 05 '19 at 07:06
  • Yep this helps! Just needed to change the navigation title style type to .inline. – Thet Htun May 13 '20 at 17:43
2

You can do something like this to make it like previous iOS 13 Navigation Bar, which then removes the large title and places it on the bar in the middle all the time:

 .navigationBarTitle(Text("Landmark"), displayMode: .inline)
Gloorfindel
  • 404
  • 3
  • 8