SwiftUIMaterialTabs icon indicating copy to clipboard operation
SwiftUIMaterialTabs copied to clipboard

[Improve?] When switching from the long content to the short content, the scroll position is not adjusted

Open ya0z0ng opened this issue 11 months ago • 4 comments

https://github.com/user-attachments/assets/5bcdc9b9-c95c-4c97-a96f-91dfd82d5362

Thanks for this great lib!

This only applies when switching from long content to short content, the initial position in Tab 2 should align with the header height and should stop scrolling after the header expands(content is too short to scrolling)

Image

ya0z0ng avatar Feb 01 '25 11:02 ya0z0ng

SwiftUIMaterialTabs adds enough padding to the bottom of the scroll view to ensure that the content can be positioned correctly when switching tabs if the header is collapsed. So it is behaving as designed.

I have a couple of questions for you:

  1. In your video, when you switch to Second tab, there's extra padding above "Second Tab Content". I'm not sure what your code is doing but that looks like a bug. However, I couldn't reproduce it with the demo app. See my screen recording—the "Short content" is always aligned to the header. Could you attach your test app?
  2. Let's see if I understand your request. When switching to Second tab while the header is collapsed, the current behavior remains unchanged: Second tab content scrolls up to stay aligned with the header. However, when the header becomes fully expanded, you want to change the behavior: Second is no longer scrollable. Is that right?

https://github.com/user-attachments/assets/04e86962-24e8-415f-a4c1-d33cd75195fe

wtmoose avatar Feb 01 '25 17:02 wtmoose

It looks like a bug since the code is almost copy from the example in the README. here is a test.zip

  1. In your video, when you switch to Second tab, there's extra padding above "Second Tab Content". I'm not sure what your code is doing but that looks like a bug. However, I couldn't reproduce it with the demo app. See my screen recording—the "Short content" is always aligned to the header. Could you attach your test app?

Yes, that’s exactly the case. When the content is not enough to fill the screen, having a large empty scrolling space looks like bad design to me, just like on X:(

  1. Let's see if I understand your request. When switching to Second tab while the header is collapsed, the current behavior remains unchanged: Second tab content scrolls up to stay aligned with the header. However, when the header becomes fully expanded, you want to change the behavior: Second is no longer scrollable. Is that right?
  1. And I think it's worth considering to allowing the header(including the tab bar) to scroll vertically, just like on X’s profile page? This might not be necessary for a sticky header, but it is essential in Material Tabs, Adding a gesture to the header might achieve this, but it will definitely require a lot of work

ya0z0ng avatar Feb 02 '25 00:02 ya0z0ng

Your sample project works correctly for me. I'm on iOS 18.2 iPhone 16 Pro. What are you using?

Yes, that’s exactly the case. When the content is not enough to fill the screen, having a large empty scrolling space looks like bad design to me, just like on X:(

On iOS, default scroll views are always scrollable regardless of the content size. The behavior you want requires modifying the default scroll view with .scrollBounceBehavior(.basedOnSize). With the default behavior, the user can't tell that the small content is scrollable unless they explicitly swipe on the view. If they do that, why block the user's intent?

My opinion is that SwiftUIMaterialTabs has the correct default behavior. Adding .scrollBounceBehavior(.basedOnSize) would be a little bit tricky. I'll flag this as a feature request, but I don't have much time right now.

And I think it's worth considering to allowing the header(including the tab bar) to scroll vertically, just like on X’s profile page? This might not be necessary for a sticky header, but it is essential in Material Tabs, Adding a gesture to the header might achieve this, but it will definitely require a lot of work

Are you referring to being able to swipe on in the header area and have the scroll view scroll? I don't think that is standard behavior on Android, however, I do think it would be an improvement. I do know how to do this easily. However, it requires accessing the UIScrollView, breaking the "pure" SwiftUI goal of the library. Do you know of a way to do this in SwiftUI?

This is something I'd change if I saw more demand for it.

https://github.com/user-attachments/assets/1f88ead6-065b-4cbb-941c-66e029b0d592

wtmoose avatar Feb 02 '25 18:02 wtmoose

Your sample project works correctly for me. I'm on iOS 18.2 iPhone 16 Pro. What are you using?

My mistake, it's Preview bug, it works on simulator or real device!

My opinion is that SwiftUIMaterialTabs has the correct default behavior. Adding .scrollBounceBehavior(.basedOnSize) would be a little bit tricky. I'll flag this as a feature request, but I don't have much time right now.

I found that achieving this goal is very simple. Would you like to take a look at the changes here, I can open a PR If this improvement is acceptable

This is something I'd change if I saw more demand for it.

yeah, that makes sense

ya0z0ng avatar Feb 03 '25 09:02 ya0z0ng