In my app when I navigate to another tab and scroll down the view and gets cut off and the navigation bar doesn't collapse as shown here:
I tried to put .edgesIgnoringSafeArea(.top) but then this happens:
When I press the home button the simulator and navigate back to the app the navigation bar will collapse when scrolling as intended. Is this a bug with Xcode? Currently I'm using XCode 11.4.1, testing on an iPhone 11 Pro Max simulator but the exact same result occurs on my physical iPhone 6s Plus.
EDIT: The code for the tab view is as follows:
import SwiftUI
struct MenuScreen: View {
#State private var selection = 0
var body: some View {
TabView(selection: $selection){
ItemsTab().tabItem{
Image(systemName: "phone.fill")
Text("Items")
}.tag(0)
TestTab().tabItem{
Image(systemName: "phone.fill")
Text("Test")
}.tag(1)
}
.navigationBarTitle("Menu")
// .edgesIgnoringSafeArea(.top)
.navigationBarItems(trailing: NavigationLink(destination:ProfileScreen()){Text("Profile")})
// .padding(.top,1)
.navigationViewStyle(DefaultNavigationViewStyle())
// .navigationBarHidden(true)
}
}
struct MenuScreen_Previews: PreviewProvider {
static var previews: some View {
MenuScreen()
}
}
The navigation view is wrapped inside a splash screen like so:
import SwiftUI
struct SplashScreen: View {
#State private var isActive = false
let content = ContentView()
var body: some View {
NavigationView{
VStack{
Text("Loading")
LoopingAnimation()
NavigationLink(destination: content,isActive: $isActive,label: {EmptyView()})
}.onAppear(perform: {
self.goToContentView(time:2.5)
}).navigationBarTitle("My app")
}
}
func goToContentView(time:Double){
DispatchQueue.main.asyncAfter(deadline: .now() + Double(time)){
self.isActive = true
}
}
}
struct SplashScreen_Previews: PreviewProvider {
static var previews: some View {
SplashScreen()
}
}
EDIT 2: I tried to put navigation views inside the tabview as shown here:
import SwiftUI
struct MenuScreen: View {
var body: some View {
TabView{
NavigationView{
ItemsTab().navigationBarTitle("Items")
}.tabItem{
Image(systemName: "house.fill")
Text("Items")
}
NavigationView{
TestTab().navigationBarTitle("Test")
}.tabItem{
Image(systemName: "phone.fill")
Text("Test")
}
}
.navigationBarHidden(true)
// .navigationBarBackButtonHidden(true)
.frame(alignment: .center)
// .edgesIgnoringSafeArea(.top)
.navigationBarItems(trailing: NavigationLink(destination:ProfileScreen()){Text("Profile")})
// .padding(.top)
.navigationViewStyle(DefaultNavigationViewStyle())
}
}
struct MenuScreen_Previews: PreviewProvider {
static var previews: some View {
MenuScreen()
}
}
But while it resulted in a collapsing navigation bar that worked even switching tabs the result looked like this:
Made the navigation bar stay collapsed in the tab screen similar to what happens when you navigate to other categories within a tab in the app store by setting .displayMode inside .navigationBarTitle to .inline
Screenshot:
Related
I have an app that has a navigationLink from one view to another, but when the NavLink moves to the second view, the NavigationTitle of that view is pushed, down, it's not inline. Is there any way to combine the toolbar and the title? I put my code below.
import SwiftUI
struct FirstView: View {
var body: some View {
NavigationView {
Text("My Stuff")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing){
NavigationLink(destination: SettingsView(), label: {
Image(systemName: "gear")
.font(.system(size: 25))
.navigationTitle("My Stuff")
})
}
}
}
}
}
And the second view:
import SwiftUI
struct SettingsView: View {
var body: some View {
NavigationView {
VStack {
Text("Settings View")
.navigationTitle("Settings")
}
}
}
}
A photo below of what is happening:
Thank you for your help.
jnpdx solved this... the solution was that I had an extra NavigationView in my SettingsView. I only needed one NavigationView.
I wrote a simple Swift UI app that creates a NavigationLink on the navigation toolbar and creates a status bar at the bottom of the display. When clicking on the gear link on the navigation bar, it takes you to the child view, but when you return to the parent view, the status bar gets hidden. If you click on the NavigationLink in the middle of the screen and return to the parent view, the status bar gets displayed again.
This looks like a bug in Swift UI and does anyone know how to fix?
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: Text("Child view")) {
Text("Hello, World!")
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing, content: {
NavigationLink(destination: Text("Settings view"),
label: { Image(systemName: "gearshape.fill")
})
})
ToolbarItem(placement: .status, content: {
Text("Checking for messages...")
})
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The issue is that Swift UI doesn't handle NavigationLink properly inside a toolbar.
The workaround is to place a Button into a toolbar and use a hidden NavigationLink in the code.
This is a link to the answer that resolved my issue.
SwiftUI - Make toolbar's NavigationLink use detail view
Here is the code that implements my original code with the workaround.
struct ContentView: View {
#State var settingsLinkSelected = false
var body: some View {
NavigationView {
NavigationLink(destination: Text("Second view")) {
Text("Hello, World!")
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing,
content: { Button(action: { settingsLinkSelected = true },
label: { Image(systemName: "gearshape.fill") }) })
ToolbarItem(placement: .status,
content: { Text("Checking for messages...") })
}
.background(
NavigationLink(
destination: Text("Settings View"),
isActive: $settingsLinkSelected
) {
EmptyView()
}.hidden()
)
}
}
}
On view with navigation view
NavigationLink(destination: FruitySortedListView(shake: shake), isActive: $showingFruity) { EmptyView() }
On view shown in picture:
.navigationTitle("Navigation Title")
IMAGE: You can see that there is a lot of extra space
Consider this example this works perfectly without the extra space as in the Image.
import SwiftUI
struct ContentView: View {
#State var isActive = true
var body: some View {
NavigationView {
NavigationLink(destination: EmptyView(), isActive: $isActive) {
VStack {
Text("Hi")
Spacer()
}
.background(Color.red)
}
.navigationTitle("Navigation Title")
}
}
}
struct EmptyView: View {
var body: some View {
VStack {
Text("navigation")
Spacer()
}
.background(Color.red)
.navigationTitle("EmptyView")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I have 3 views. One of these have NavigationView second have NavigationLink and last just a child with toolbar.
So my problem when I added toolbar in last view backButton elegant disappear. How can I solve this?
Screen recording of my problem
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Hello, world!")
.padding()
NavigationLink(destination: ListView()) {
Image(systemName: "trash")
.font(.largeTitle)
.foregroundColor(.red)
}
}.navigationBarHidden(true)
.navigationTitle("Image")
}
}
}
import SwiftUI
struct ListView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
List {
NavigationLink(destination: DetailView()) {
Text("Detail")
}
}
}.navigationBarTitle(Text("Data"), displayMode: .large)
.toolbar {
Button("Save") {
presentationMode.wrappedValue.dismiss()
}
}
}
}
import SwiftUI
struct DetailView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
Text("DetailView")
.padding()
}.navigationBarTitle(Text("Data"), displayMode: .large)
.toolbar {
Button("Save") {
presentationMode.wrappedValue.dismiss()
}
}
}
}
In the console, you'll notice this message:
2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem is internally managed and not exposed for DoubleColumn style. Returning an empty, disconnected UIBarButtonItem to fulfill the non-null contract.
The default style for NavigationView is usually DefaultNavigationViewStyle, which is really just DoubleColumnNavigationViewStyle. Use StackNavigationViewStyle instead, and it works as expected.
Edit: You are right that StackNavigationViewStyle will break iPad split view. But thankfully, DoubleColumnNavigationViewStyle works fine in iPad and doesn't hide the back button. We can then just use a different NavigationStyle depending on the device, as shown in this answer.
struct ResponsiveNavigationStyle: ViewModifier {
#Environment(\.horizontalSizeClass) var horizontalSizeClass
#ViewBuilder
func body(content: Content) -> some View {
if horizontalSizeClass == .compact { /// iPhone
content.navigationViewStyle(StackNavigationViewStyle())
} else { /// iPad or larger iPhone in landscape
content.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Hello, world!")
.padding()
NavigationLink(destination: ListView()) {
Image(systemName: "trash")
.font(.largeTitle)
.foregroundColor(.red)
}
}
.navigationBarHidden(true)
.navigationTitle("Image")
}
.modifier(ResponsiveNavigationStyle()) /// here!
}
}
Result:
iPad
iPhone
I don't know why, but it's what worked for me:
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button { } label: { } // button to the right
}
ToolbarItem(placement: .navigationBarLeading) {
Text("") // empty text in left to prevent back button to disappear
}
}
I already tried to replace the empty text with EmptyView() but the button keeps disappearing.
FYI: I have this problem only on my device with iOS 14, but in another device with iOS 15 the back button never disappears.
Im trying to use a simple navigation view, with a navigation link to a different view. When running the app and the navigation link is pressed it takes me to the new view.
However when I'm on a simulator or device the back button dose not work, whereas on the preview it works fine.
Any ideas what the problem may be?
import SwiftUI
struct HomeView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Detail View")) {
Text("Hello World")
}
}
.navigationBarTitle("SwiftUI")
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}
I think the problem may be caused by the fact that the HomeView is part of a tabView. The following code is from AppView.swift which is what is run when the app is run (You can see the code for that at the very bottom).
I think this is the problem because when the code bellow is commented out the app works fine.
HomeView()
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
.onTapGesture {
self.selectedTab = 2
}
.tag(2)
#main
struct Skate_AppApp: App {
var body: some Scene {
WindowGroup {
HomeView()
}
}
}
From your code I can tell that the problem is in onTapGesture, and I presume from self.selectedTab = 2 that you want to get which tab the user has selected.
Let's refactor your code a little bit with the same concept.
Solution: Delete onTapGesture and add onAppear.
TabView {
HomeView().tabItem {
Image(systemName: "house.fill")
Text("Home")
}.onAppear{
self.selectedTab = 2
}.tag(2)
AnotherView().tabItem {
Image(systemName: "car.fill")
Text("Login View")
}.onAppear{
self.selectedTab = 3
}.tag(3)
}
By this whenever a view appears, it means that the user has selected it, onAppear will be called, and your variable selectedTab will be changed. I hope this answer your question.