Remove Space Navigationtitle But Not the Back Button

Remove space NavigationTitle but not the back button

Standard Back button cannot be shown without navigation bar, because it is navigation item, so part of navigation bar. I assume you just need transparent navigation bar.

Here is demo of possible solution (tested with Xcode 12.1 / iOS 14.1) / images are used for better visibility /

demo

struct ContentView: View {

init() {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithTransparentBackground()
UINavigationBar.appearance().standardAppearance = navBarAppearance
}

var body: some View {

NavigationView {
ZStack {
Image("large_image")
NavigationLink(destination: Image("large_image")) {
Text("Go to details ->")
}
}
.navigationBarItems(trailing: Button(action: {}) {
Image(systemName: "gear")
.font(.title2)
}
)
.navigationBarTitle("", displayMode: .inline)
}.accentColor(.red)
}
}

SwiftUI - i'd like to remove space between back button and .navigationbartitle

Just remove redundant NavigationView - it is needed only one in same view hierarchy, and obviously there is already some in parent view

struct RecipeIngredientsView: View {
let myArray = ["Dennis", "Tessa", "Peter", "Anna", "Tessa", "Klaus", "Xyan", "Zuhau", "Clown", "Brot", "Bauer"]
@State private var searchText = ""
@State private var showCancelButton: Bool = false

var body: some View {
NavigationView // << remove this one !!
{

How to remove the default Navigation Bar space in SwiftUI NavigationView

For some reason, SwiftUI requires that you also set .navigationBarTitle for .navigationBarHidden to work properly.

NavigationView {
FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
.navigationBarTitle("")
.navigationBarHidden(true)
}

Update

As @Peacemoon pointed out in the comments, the navigation bar remains hidden as you navigate deeper in the navigation stack, regardless of whether or not you set navigationBarHidden to false in subsequent views. As I said in the comments, this is either a result of poor implementation on Apple's part or just dreadful documentation (who knows, maybe there is a "correct" way to accomplish this).

Whatever the case, I came up with a workaround that seems to produce the original poster's desired results. I'm hesitant to recommend it because it seems unnecessarily hacky, but without any straightforward way of hiding and unhiding the navigation bar, this is the best I could do.

This example uses three views - View1 has a hidden navigation bar, and View2 and View3 both have visible navigation bars with titles.

struct View1: View {
@State var isNavigationBarHidden: Bool = true

var body: some View {
NavigationView {
ZStack {
Color.red
NavigationLink("View 2", destination: View2(isNavigationBarHidden: self.$isNavigationBarHidden))
}
.navigationBarTitle("Hidden Title")
.navigationBarHidden(self.isNavigationBarHidden)
.onAppear {
self.isNavigationBarHidden = true
}
}
}
}

struct View2: View {
@Binding var isNavigationBarHidden: Bool

var body: some View {
ZStack {
Color.green
NavigationLink("View 3", destination: View3())
}
.navigationBarTitle("Visible Title 1")
.onAppear {
self.isNavigationBarHidden = false
}
}
}

struct View3: View {
var body: some View {
Color.blue
.navigationBarTitle("Visible Title 2")
}
}

Setting navigationBarHidden to false on views deeper in the navigation stack doesn't seem to properly override the preference of the view that originally set navigationBarHidden to true, so the only workaround I could come up with was using a binding to change the preference of the original view when a new view is pushed onto the navigation stack.

Like I said, this is a hacky solution, but without an official solution from Apple, this is the best that I've been able to come up with.

SwiftUI NavigationView: Keeping back button while removing whitespace

It seens like your parent View hasn't a title, to solve this you need to set .navigationTitle inside NavigationView on parent View like this:

NavigationView {

VStack {
//....
}

.navigationTitle(Text("Awesome View"))
.toolbar {
ToolbarItem(placement: .principal){
// Put any view (Text, Image, Stack...) you want here
}
}
}

Big unwanted space in subview navigation bar

The reason for the extra space is that you are wrapping a NavigationView inside a NavigationView; remove the one inside your subview, and the plus button will be at the right height.

As for removing the text, yes, you would need to hide the default back button and replace it with your own. Subview might look something like

struct SubView: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

var body: some View {
List {
Text("hello world")
Text("hello world")
Text("hello world")
}
.navigationBarTitle(todoList.title!, displayMode: .inline) // 1
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: backButton, trailing: addButton)
}

var backButton: some View {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}, label: {
HStack {
Image(systemName: "chevron.left")
Text("Back") // 2
}
})
}

var addButton: some View {
Button(action: {
self.add = true
}, label: {
ZStack(alignment: .trailing) {
Rectangle() // 3
.fill(Color.red.opacity(0.0001)) // 4
.frame(width: 40, height: 40)
Image(systemName: "plus")
}
})
}
}

Notes:

  1. Although displayMode: .inline is not necessary, the default large title style looks a bit strange animating in and out.
  2. You can remove this if you want (but see below)
  3. This rectangle is here to increase tap target size, as the default button will only be the size of the plus icon, which is probably too small.
  4. The rectangle can't be completely transparent, or it will not register taps.

Hide navigation bar but keep back button - SwiftUI

I seemed to have resolved my problem by following this and using @Environment

So instead of using a NavigationLink in my final tab like this:

ZStack(alignment: .topLeading) {
Text("Tab1View")
NavigationLink(destination: ProductList()){
Image(systemName: "chevron.backward")
}
}

I am now using a button that dismisses the view like this using @Environment:

struct Tab1View: View {

@Environment(\.presentationMode) var presentation

var product: ProductModel
var body: some View {
ZStack(alignment: .topLeading) {
Text("Tab1View")
Button(action: {
self.presentation.wrappedValue.dismiss()
}, label: {
Text("PressMe")
})
}
}
}


Doing this allows me to hide the NavigationBar in the TabView the same way:

.navigationBarTitle("")
.navigationBarHidden(true)

reduce left space and right space from navigation bar left and right bar button item

UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
target:nil action:nil];
negativeSpacer.width = -16;
[self.navigationItem setLeftBarButtonItems:[NSArray arrayWithObjects:negativeSpacer,yourbutton, nil] animated:YES];

Use like that.

SwiftUI - Remove extra space in NavigationBar after transitioning back to Home view from subview

Every time you push a new Home via a NavigationLink, you're adding another NavigationView to the hierarchy, since Home has a NavigationView in it.

To avoid that, you could separate the NavigationView out and instead link to View:

struct Home: View {
var body: some View {
NavigationView {
View1() //<-- Here
}
}
}

struct View1 : View {
@State private var view2 = false

var body: some View {
VStack {
Text("Home View!")
.padding()

NavigationLink(destination: View2(), isActive: $view2) { }

Button {
self.view2 = true
} label: {
Text("Go to next view")
}

}
.navigationTitle("Home")
}
}

struct View2: View {

@State private var home = false

var body: some View {
VStack {
Text("This is View 2")
.padding()

NavigationLink(destination: View1() //<-- Here
.navigationBarBackButtonHidden(true), isActive: $home) { }

Button {
self.home = true
} label: {
Text("Go to Home view")
}

}
.navigationTitle("View 2")
}
}

That being said, I'm a little skeptical of the strategy here. It seems like instead of pushing a new View1, you might just want to be going back to the existing one. In that case, your code could just look like this:

struct Home: View {
var body: some View {
NavigationView {
View1()
}
}
}

struct View1 : View {
@State private var view2 = false

var body: some View {
VStack {
Text("Home View!")
.padding()

NavigationLink(destination: View2(), isActive: $view2) { }

Button {
self.view2 = true
} label: {
Text("Go to next view")
}

}
.navigationTitle("Home")
}
}

struct View2: View {
@Environment(\.presentationMode) var presentationMode

var body: some View {
VStack {
Text("This is View 2")
.padding()
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Text("Go to Home view")
}

}
.navigationTitle("View 2")
}
}

when placing items in the toolbar, How do you remove the space where a navigation title would go

putting .navigationBarTitleDisplayMode(.inline) on the VStack fixes this issue. (credit: ChrisR for the comment)

UINavigationBar Hide back Button Text

In the interface builder, you can select the navigation item of the previous controller and change the Back Button string to what you'd like the back button to appear as. If you want it blank, for example, just put a space.

You can also change it with this line of code:

[self.navigationItem.backBarButtonItem setTitle:@"Title here"];

Or in Swift:

self.navigationItem.backBarButtonItem?.title = ""



Related Topics



Leave a reply



Submit