Post

Replies

Boosts

Views

Activity

Replicating Instagram Profile View in SwiftUI: Challenges with Pinned Header, Segmented Control, and Swipeable Paged View
TL;DR: I want to use SwiftUI to create a profile view similar to Instagram's, with a pinned header, segmented control, and swipeable paged view. I'm using LazyVStack within a ScrollView, but facing issues with changing page heights and pagination. I'm also concerned about performance degradation with LazyVStack and considering using a customized List. I'm working on replicating the Instagram profile view using SwiftUI. The desired layout includes a pinned NavBar at the top, a ScrollView with the following components: header information, a segmented control with three tabs and an underline, and a paged view that corresponds to the selected tab and supports left and right swiping. To achieve this, I'm using a LazyVStack with a pinned header within a ScrollView. The header section hides behind the NavBar, while the segmented control remains pinned under the NavBar, allowing the rest of the content to scroll beneath it. For the paged functionality, I'm using a TabView with PageTabViewStyle(). However, I encountered a problem where the content height reduces to 0 without using a fixed height. To overcome this, I'm dynamically adjusting the fixed height of the TabView by tracking the heights of the three tab contents and updating the frame accordingly when the selected tab index changes. I'm facing a few issues with this approach. Firstly, when swiping to change pages within the TabView, the behavior is affected because the new page has a different height than the current page. This causes some stuttering in the scrolling experience. Additionally, the fixed height approach makes pagination challenging. For example, as new posts are added and the content height increases, it becomes difficult to handle the dynamic height adjustments. Currently, I'm reading the height of the newly added content and setting the TabView's frame height accordingly, but this leads to performance issues. On a side note, I'm using LazyVStack to lazily load the view rows, but since it doesn't reuse cells like List, performance degradation occurs as the number of items in the arrays for each page increases with pagination. While List offers cell reusability, customizing it to fit my design is complex and time-consuming.
1
0
581
Jun ’23