SwitUI - Two navigationLink in a list - ios

I have two NavigationLink in a cell of my List
I want to go to destination1 when I tap once,and go to destination2 when I tap twice.
So I added two tap gesture to control the navigation.
But when I tap,there are two questions:
1 The tap gesture block won't be called.
2 The two navigation link will be both activated automatically even if they are behind a TextView.
The real effect is: Tap the cell -> go to Destination1-> back to home -> go to Destination2 -> back to home
Here is my code :
struct MultiNavLink: View {
#State var mb_isActive1 = false;
#State var mb_isActive2 = false;
var body: some View {
return
NavigationView {
List {
ZStack {
NavigationLink("", destination: Text("Destination1"), isActive: $mb_isActive1)
NavigationLink("", destination: Text("Destination2"), isActive: $mb_isActive2)
Text("Single tap::go to destination1\nDouble tap,go to destination2")
}
.onTapGesture(count: 2, perform: {()->Void in
NSLog("Double tap::to destination2")
self.mb_isActive2 = true
}).onTapGesture(count: 1, perform: {()->Void in
NSLog("Single tap::to destination1")
self.mb_isActive1 = true
})
}.navigationBarTitle("MultiNavLink",displayMode: .inline)
}
}
}
I have tried remove the List element,then everything goes as I expected.
It seems to be the List element that makes everything strange.
I found this question:SwiftUI - Two buttons in a List,but the situation is different from me.
I am expecting for your answer,thank you very much...

Try the following approach - the idea is to hide links in background of visible content and make them inactive for UI, but activated programmatically.
Tested with Xcode 12 / iOS 14.
struct MultiNavLink: View {
var body: some View {
return
NavigationView {
List {
OneRowView()
}.navigationBarTitle("MultiNavLink", displayMode: .inline)
}
}
}
struct OneRowView: View {
#State var mb_isActive1 = false
#State var mb_isActive2 = false
var body: some View {
ZStack {
Text("Single tap::go to destination1\nDouble tap,go to destination2")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.contentShape(Rectangle())
.background(Group {
NavigationLink(destination: Text("Destination1"), isActive: $mb_isActive1) {
EmptyView() }
.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("Destination2"), isActive: $mb_isActive2) {
EmptyView() }
.buttonStyle(PlainButtonStyle())
}.disabled(true))
.highPriorityGesture(TapGesture(count: 2).onEnded {
self.mb_isActive2 = true
})
.onTapGesture(count: 1) {
self.mb_isActive1 = true
}
}
}

Navigation link has a initializer that takes a binding selection and whenever that selection is set to the value of the NavigationLink tag, the navigation link will trigger.
As a tip, if the app can't differentiate and identify your taps, and even with two taps, still the action for one-tap will be triggered, then you can use a simultaneous gesture(.simultaneousGesture()) modifier instead of a normal gesture(.gesture()) modifier.
struct someViewName: View {
#State var navigationLinkTriggererForTheFirstOne: Bool? = nil
#State var navigationLinkTriggererForTheSecondOne: Bool? = nil
var body: some View {
VStack {
NavigationLink(destination: SomeDestinationView(),
tag: true,
selection: $navigationLinkTriggererForTheFirstOne) {
EmptyView()
}
NavigationLink(destination: AnotherDestinationView(),
tag: true,
selection: $navigationLinkTriggererForTheSecondOne) {
EmptyView()
}
NavigationView {
Button("tap once to trigger the first navigation link.\ntap twice to trigger the second navigation link.") {
// tap once
self.navigationLinkTriggererForTheFirstOne = true
}
.simultaneousGesture(
TapGesture(count: 2)
.onEnded { _ in
self.navigationLinkTriggererForTheSecondOne = true
}
)
}
}
}
}

Related

iOS button and navigationLink next to each other in List

I have a List, each element has its own HStack that contains Button and NavigationLink to the next view but both (checkbox button and navigation link) is activated wherever I click on single HStack element.
That means icon on the button changes when I click on the element but application also loads the next view. The same happens when I want to go to the next view by simply clicking on the NavigationLink. Can you help me separate this two functionalities (checkbox Button and NavigationLink)?
struct ContentView: View {
#ObservedObject var spendingList: SpendingList
var body: some View {
NavigationView {
List {
ForEach($spendingList.spendings) { $spending in
HStack{
Button(action: {
spending.Bought = !spending.Bought
}, label: {
if spending.Bought == false {
Image(systemName: "square")
.foregroundColor(.accentColor)
} else {
Image(systemName: "checkmark.square")
.foregroundColor(.accentColor)
}
})
NavigationLink(destination: DetailView(spending: $spending)
.navigationTitle(Text(spending.Name)),
label: {
Text(spending.Name).frame(maxWidth: .infinity, alignment: .leading)
if spending.Price != 0 {
Text(String(spending.Price)).frame(maxWidth: .infinity, alignment: .trailing)
} else {
Text("empty").foregroundColor(.gray)
}
})
}
}
.navigationTitle(Text("Spending Priority"))
}
}
}
}
The default Style of Button & NavigationLink makes the whole row click as one. However, using PlainButtonStyle() fixes the issue by making the button clickable & not the cell:
.buttonStyle(.plain)//to your button & NavigationLink
Unfortunately, the parent-view list item becomes the Navigation link. So the button press will never be recorded.
In iOS 16 you can solve this by replacing the NavigationLink with a Button and pushing an item onto the navigation stack with the Button.
Documentation: https://developer.apple.com/documentation/swiftui/migrating-to-new-navigation-types
Something like this, for example:
struct ContentView: View {
#State var path: [View] = []
var body: some View {
NavigationStack(path: $path) {
List {
ForEach($spendingList.spendings) { $spending in
HStack {
Button(action: {
spending.Bought = !spending.Bought
}, label: {
Image(...)
})
Button(action: {
path.append(DetailView(spending: $spending))
}, label: {
Text(...)
})
Text(spending.Name)
})
}
}
}
.navigationTitle(Text("Spending Priority"))
.navigationDestination(for: View.self) { view in
view
}
}
}
}

List edge insets keeps changing - SwiftUI

I have a SwiftUI app that uses a sidebar on iPad.
Using a List with the modifier.listStyle(.sidebar) the inset spacing no longer applies when rotating, however when I force close the app and reopen it appears normal.
Cases where edge spacing no longer applies:
When user first signs in
rotates device
collapses sidebar and reopens)
The problem goes away when force quitting the app and reloading when user is signed in.
ContentView
struct ContentView: View {
#State var signedIn = false
var body: some View {
if signedIn = false {
Text("Sign In").onTapGesture(){signedIn = true}
}
if signedIn = true {
AppSidebarNavigation()
}
}
}
Sidebar
struct AppSidebarNavigation: View {
enum NavigationItem {
case home
case expenses
}
#State private var selection: NavigationItem? = .home
var body: some View {
NavigationView {
sidebar
.navigationTitle("")
.navigationBarTitleDisplayMode(.inline)
.navigationBarHidden(true)
// Main View
HomeView()
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
extension AppSidebarNavigation {
var sidebar: some View {
List(selection: $selection) {
Group {
NavigationLink(destination: HomeView()
.environmentObject(store), tag: NavigationItem.home, selection: $selection) {
Label("Homes", systemImage: "house")
}
.tag(NavigationItem.home)
NavigationLink(destination: Expenses(),
tag: NavigationItem.expenses, selection: $selection) {
Label("Expenses", systemImage: "arrow.right.arrow.left")
}
.tag(NavigationItem.expenses)
.navigationBarTitleDisplayMode(.large)
}
}
.listStyle(.sidebar)
}
}
So I would consider trying
.listRowInsets(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8))
or
.listRowInsets(EdgeInsets())
Even add
.listRowInsets(.init())
However your problem may be due to your subviews overriding TableView rows. Check if you have something like (I am not sure the exact code)
init() {
UITableViewCell.removeEdgeInsets
}

SwiftUI: horizontal ScrollView inside NavigationLink breaks navigation

I want to use a simple horizontal ScrollView as NavigationLink inside a List. However, tapping on the ScrollView is not registered by a NavigationLink and therefore does not navigate to the destination.
NavigationView {
List {
NavigationLink(destination: Text("Detail")) {
ScrollView(.horizontal) {
Text("Tapping here does not navigate.")
}
}
}
}
Any ideas on how can we prevent ScrollView from capturing the navigation tap gesture?
You can move NavigationLink to the background and activate it in onTapGesture:
struct ContentView: View {
#State var isLinkActive = false
var body: some View {
NavigationView {
List {
ScrollView(.horizontal) {
Text("Tapping here does not navigate.")
}
.onTapGesture {
isLinkActive = true
}
}
.background(
NavigationLink(destination: Text("Detail"), isActive: $isLinkActive) {}
)
}
}
}
The final goal is not clear, but the following alternate does also work (tested with Xcode 12 / iOS 14)
NavigationView {
List {
ScrollView(.horizontal) {
NavigationLink(destination: Text("Detail")) {
Text("Tapping here does not navigate.")
}
}
}
}

SwiftUI. Present a detail view pushed from the root view as the initial application view

I have two SwiftUI views, the first view has a navigation link to the second view and I want to show the second view that is "pushed" out of the first view, as the initial application view.
This is the behavior of the iOS Notes app, where users see a list of notes as the initial view controller and can return to the folder list with the back navigation button.
Can I implement this with SwiftUI and how?
Here is a simple demo. Prepared & tested with Xcode 11.7 / iOS 13.7
struct ContentView: View {
#State private var isActive = false
var body: some View {
NavigationView {
NavigationLink(destination: Text("Second View"), isActive: $isActive) {
Text("First View")
}
}
.onAppear { self.isActive = true }
}
}
you can add another state variable to hide the first view until the second view appears on the screen.
struct ContentView1: View {
#State private var isActive = false
#State private var showView = false
var body: some View {
NavigationView {
NavigationLink(destination: Text("Second View")
.onAppear {
self.showView = true
},
isActive: $isActive) {
if self.showView {
Text("First View")
} else {
EmptyView()
}
}
}
.onAppear {
self.isActive = true
}
}
}
As mentioned in my comments to another answer, by setting an initial state for a variable that controls the presentation of the second view to true, your ContentView presents this second view as the initial view.
I've tested this using the simulator and on device. This appears to solve your problem and does not present the transition from the first view to the second view to the user - app opens to the second view.
struct ContentView: View {
#State private var isActive = true
var body: some View {
NavigationView {
NavigationLink(destination: Text("Second View"), isActive: $isActive) {
Text("First View")
}
}
}
}
I made my own implementation based on #Asperi and #Mohammad Rahchamani answers.
This implementation allows you to navigate even from a list with multiple navigation links. Tested on Xcode 12 with SwiftUI 2.0.
struct IOSFolderListView: View {
#State var isActive = false
#State var wasViewShown = false
var body: some View {
let list = List {
NavigationLink(destination: Text("SecondView").onAppear {
self.wasViewShown = true
}, isActive: $isActive) {
Text("SecondView")
}
NavigationLink(destination: Text("ThirdView")) {
Text("ThirdView")
}
.onAppear {
self.isActive = false
}
}
if wasViewShown {
list.listStyle(GroupedListStyle())
.navigationBarTitle("FirstView")
.navigationBarItems(leading: Image(systemName: "folder.badge.plus"), trailing: Image(systemName: "square.and.pencil"))
} else {
list.opacity(0)
.onAppear {
self.isActive = true
}
}
}
}

Handle Tab Selection SwiftUI

Following tutorials, I have the following code to show a tab view with 3 tab items all with an icon on them, When pressed they navigate between the three different views. This all works fine, however, I want to be able to handle the selection and only show views 2 or 3 if certain criteria are met.
Is there a way to get the selected value and check it then check my own criteria and then show the view is criteria is met, or show an alert if it is not saying they can't use that view at the moment.
Essentially I want to be able to intercept the selection value before it switches out the view, maybe I need to rewrite all of this but this is the functionality I'm looking for as this is how I had my previous app working using the old framework.
#State private var selection = 1
var body: some View
{
TabbedView(selection: $selection)
{
View1().tabItemLabel(
VStack
{
Image("icon")
Text("")
})
.tag(1)
View2().tabItemLabel(
VStack
{
Image("icon")
Text("")
}).tag(2)
View3().tabItemLabel(
VStack
{
Image("icon")
Text("")
}).tag(3)
}
}
You can do it by changing the value of selection on tap. You can use .onAppear() method for a particular tab to check your condition:
#State private var selection = 1
var conditionSatisfied = false
var body: some View
{
TabbedView(selection: $selection)
{
View1().tabItemLabel(
VStack
{
Image("icon")
Text("")
})
.tag(1)
View2().tabItemLabel(
VStack
{
Image("icon")
Text("")
}).tag(2)
.onAppear() {
if !conditionSatisfied {
self.selection = 1
}
}
View3().tabItemLabel(
VStack
{
Image("icon")
Text("")
}).tag(3)
.onAppear() {
if !conditionSatisfied {
self.selection = 1
}
}
}
}

Resources