Twitter iOS Profile Page Configuration

Question

I'm trying to structure a page similar to Twitter's profile page. It looks like they are using a basic UITableView . The top profile is just the tableHeaderView. The tabs are a UISegmentedControl inside the SectionRowHeader so that it sticks to the top when scrolled. And the tweets are just the cells inside that section. And if you switch tabs, it seems like they are simply changing the underlying data and reloading the table.

However if you play with the page, you'll notice that changing tabs keeps the previous scroll position. And if you scroll back to the top on one tab, then of course the other tab has to be scrolled to the top otherwise it'll be scrolled underneath the header. Also, if you look closely the bottom part (the tweets) has its own scrollbar once you start scrolling. So it seems like that is its own tableview. So would that be a new tableview inside the cell of the main page? And if that's what they're doing, then the scrolling is seamless between them. You're able to scroll the bottom part up and only once the tabs are pinned to the top do the tweets scroll underneath it.

I'm trying to build a similar structured page but keep running into issues. Ideally I would also like to have the logic of those sub tabs broken out into separate view controllers for reuse but at this point I would just like to get this working.

Anyone have any idea of the structure they're using to setup a page like this?

Answer 1

I'm 99% certain they are simply adjusting the scroll indicator insets as you scroll view the table:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat const visibleHeaderHeight = 0.0; // your logic here
    UIEdgeInsets const insets = UIEdgeInsetsMake(visibleHeaderHeight, 0.0, 0.0, 0.0);

    self.scrollView. scrollIndicatorInsets = insets;
}

Also I'm pretty sure they are using a grouped style table view due to the sectioning, so you would need to build the sticky header yourself. You can also do that in -scrollViewDidScroll: though.

---

If you want to break the tabs into separate view controllers, I would recommend the following setup:

• have a container view controller managing the header view containing the tabs
• use UIViewController containment to plug in the active view controller
• subscribe to the active view controller's scroll view's contentOffset and adjust the scroll indicator inset and sticky header y position accordingly

Answer 2

I tried to explain a bit here .

After a long long investigation that is how i achieve the twitter profile behaviour.

• UnderlayScrollView
• MasterScrollView
  • Header ViewController
  • Bottom ViewController
    • PagerTabItems [CollectionView]
    • UIPagerController or any other horizontal scroll (Parchment, XLPagerTabStrip).

UnderlayScrollView is responsible of controlling the scroll gesture. its contentoffset is used to adjust inner scroll contentOffsets. Contentsize of the underlaying scroll is same as the masterscroll's contentsize.

See the source code on github for more. click