I’m utilizing SwiftUI to develop a publish sharing utility. I have been caught with this drawback for a couple of days and would actually admire it if anybody might provide some assist. My questions and desires are a bit complicated, so I’ve described them absolutely in additional element beneath.
What’s on the Web page?
1. Web page – Init Standing
All the web page accommodates 4 elements.
-
Sticky header: A navigation bar with mounted place, width and peak on the web page, together with an icon for return.
-
Some content material view: A view used to show sure info and photos.
-
Tabs: A tab bar with two tabs for toggling a scrolling record of playing cards.
-
Publish playing cards in ScrollView: A scrollable card record view, the place playing cards are displayed within the type of a waterfall stream. (waterfall already carried out by https://github.com/paololeonardi/WaterfallGrid)
2. Sticky Header
When the consumer swipes up from anyplace on the web page to browse content material, all views besides the highest navigation bar transfer upward.
3. Sticky tabs
When the consumer continues to swipe up in order that the data view utterly disappears from the display, the tab bar is positioned intently beneath the navigation bar.
4. Scroll publish playing cards
The consumer continues to slip up the web page and scrolls by the playing cards waterfall. The tab bar stays in a hard and fast place, beneath the navigation bar.
5. Swipe again
The consumer can swipe down and return to the primary card within the card waterfall.
6. Tabs No Longer Sticky
The consumer can proceed to swipe again to the highest. Presently, the place of the tab bar is unfixed and the data view begins to reappear.
7. Again to init
The consumer can proceed to swipe again to init standing.
The above photos and textual content describe the interplay strategy of a single card waterfall stream. The next is the interplay course of when switching between totally different card waterfall flows.
- Sticky Header**
When the consumer swipes up from anyplace on the web page to browse content material, all views besides the highest navigation bar transfer upward.
3. Change to Appreciated Checklist
The consumer swipes left to modify to the second card waterfall stream. Presently, the offsets of each waterfall flows are 0.
4. Scroll Playing cards in Appreciated Checklist
The consumer scrolls by the second card waterfall (assume content material offset 500), and the tab bar stays mounted right now.
5. Change to Posted Checklist
The consumer slides proper to return to the primary card waterfall stream. Presently, the primary card waterfall stream maintains a content material offset of 0.
6 & 7. Tabs No Longer Sticky And Again to init.
The consumer proceed to swipe again to the highest and at last to the init standing. Presently, the place of the tab bar is unfixed and the data view begins to reappear.
8. Change to Appreciated Checklist Once more
The consumer returns to the second card waterfall, sustaining the unique scroll offset (500).
9.1. Swipe Up
The consumer slides up, the waterfall stream stays offset, and the data view and tab bar transfer upward till the tab bar turns into sticky.
9.2. Swipe Down
The consumer slides down, the offset of second card waterfall turns into 0.
Full standing stream diagram
I exploit the horizontal ScrollView and the present label and different states to realize the impact of sliding left and proper to modify totally different card waterfall flows.(https://www.youtube.com/watch?v=UQ8ZQIhi8ow&t=45s)
I discovered that the impact of scrolling and fixing the view on the web page could be achieved by acquiring the place offset of the scrollview by the geometry reader. However what bothers me is that when the consumer switches totally different scroll lists, the place offset of various scrollviews adjustments, and I do not know methods to deal with this case.
Thanks in your endurance in studying my query.
FYI: I exploit NestedScrollConnection in jetpack compose to implement the aboving impact in android. Is there any equal api in swiftUI?
