SwiftUI Custom navigation bar with list

Question

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.

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

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

Answer 1

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

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)