Collapsing navigation bar with paging?

Question

Created Jul ’20

Replies 2

Boosts 0

Views 2.3k

Participants 2

When a navigation view is scrolled, common behaviour in iOS is for the large navigation title to collapse into the navigation bar.

When I place a TabView inside a NavigationView, this works perfectly. As the tab is scrolled, the large navigation title collapses:

Code Block swiftNavigationView {
  TabView {
    LongList()
    .tabItem({
      Image(systemName: "circle")
      Text("One")
    })
    LongList()
    .tabItem({
      Image(systemName: "square")
      Text("Two")
    })
  }
  .navigationTitle("Page Control Test")
}

When I set the tabViewStyle to PageTabViewStyle, the collapsing behaviour no longer works — the large navigation title remains even when scrolling:

Code Block swiftNavigationView {
  TabView {
    LongList()
    .tabItem({
      Image(systemName: "circle")
      Text("One")
    })
    LongList()
    .tabItem({
      Image(systemName: "square")
      Text("Two")
    })
  }
	.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
  .navigationTitle("Page Control Test")
}

Is this behaviour intentional, or have I found a bug? This is running on iOS 14 beta 2 and the code was built on Xcode 12 beta 2.

Boost

Answer 1

blues45 OP

Sep ’20

I'm having a similar issue. I put an .edgesIgnoringSafeArea(.top) on the tabview, as the behavior of my app was causing swiping back from being in the NavigationView to cause the top bar to permanently collapse into the top without it snapping back.

Not sure how to deal with this situation as I have also tried nesting the NavigationViews inside of the TabView, but that causes even worse results, causing the navigationbar to disappear entirely

1

Answer 2

blues45 OP

Sep ’20

I actually just found a work around, not exactly technical, and may not work for you if you require the inline text at the top, but it works for me because I have a ToolBar at the top.

I'll just drop this here in case anyone else runs into a similar issue:
I had to apply the edgesIgnoringSafeArea(.top) around my tabview because I was having the issue mentioned above with swiping back and the inline title locking up. However, after fixing that, I ran into your issue with the title not collapsing up. I fixed it by leaving the navigation title text empty. I then created a Text("Title").font(.largeTitle).fontWeight(.bold) with my title at the top and padded the view with .padding(.top, -53).

Again, this may not work if you need the top level header, but if you have other stuff going on in your navigationbar this could work. Also tested the padding length at iPhone 8 < , hopefully it will maintain on the 6s and 7s

1