Hey everyone!
@CalStark and I are having trouble with some PageTabView issues in Swift UI. Could anyone please take a look?
We’re currently making an app with the following structure : a horizontal PageTabView with 3 views, of which the first is actually a Vertical PageTabView made of three other views (using a 90° rotation trick we found online).
So we managed to make this “inverted L” shaped navigation work but now we are encountering an issue with the UIScrollView bounces animations.
UIScrollView.appearance().bounces = false
In the piece of code above, we need “bounces = false” to swipe from views 1,2 or 3 to views A and B.
But once we’re inside A,B we need “bounces = true” for UI design reasons specific to views A and B.
So we put an .onAppear() { } modifier on the views A and B that change bounces to true.
Luckily, “bounces == true” in A,B still allows to go back to 1,2,3.
However, once we’re back in 1,2,3, we need to have “bounces == false” again (to be able to swipe back to A,B)
The problem is that for some reason, it appears that our code that sets “bounces == false” in 1,2,3 doesn’t work when we come back: we’re stuck in 1,2,3, and cannot swipe back to A,B again, so we assume that bounces is in fact still true in the system.
Below you’ll find our code, if anyone can help we shall be forever grateful
Horizontal PageTabView :
struct HorizontalNav: View {
@State private var selection = 0
var body: some View {
// MARK: - Core Nav View
NavigationView {
ZStack {
// MARK: - Tab View Page Style
ScrollView(.init()) { //
TabView(selection: $selection) {
VerticalNav()
.tag(0)
.onAppear(perform: {
UIScrollView.appearance().bounces = false
})
Color.green
.tag(1)
.onAppear(perform: {
UIScrollView.appearance().bounces = true
})
Color.yellow
.tag(2)
.onAppear(perform: {
UIScrollView.appearance().bounces = true
})
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
// MARK: - TabBarView
}.navigationBarHidden(true)
.ignoresSafeArea()
}.onAppear(perform: {
UIScrollView.appearance().bounces = false
})
}
}
Vertical PageTabView :
struct VerticalNav: View {
let colors: [Color] = [
.blue, .purple, .pink
]
var body: some View {
ZStack {
GeometryReader { proxy in
TabView {
ForEach(colors, id: \.self) { color in
color // Your cell content
}
.rotationEffect(.degrees(-90)) // Rotate content
.frame(
width: proxy.size.width + 100,
height: proxy.size.height
)
}
.frame(
width: proxy.size.height, // Height & width swap
height: proxy.size.width
)
.rotationEffect(.degrees(90), anchor: .topLeading) // Rotate TabView
.offset(x: proxy.size.width) // Offset back into screens bounds
.tabViewStyle(
PageTabViewStyle(indexDisplayMode: .never)
)
}
}.ignoresSafeArea()
}
}