7

I'm wondering how did Twitter implement it's profile screen. At first I thought it is a table view with a header (profile info) and section header (segmented control to choose tweets/media/favorites). It would make sense for me as the profile info goes away while user scrolls down, but segmented control stays, and that's exactly behavior of plain UITableView header view and section header. There is also an image view at the top, under navigation bar, but that's not what's important for me. Here's a visualization of what I think it is:

Twitter profile screen architecture (my visualization)

I tried to recreate it in Interface Builder and that's what I got. The slider drew my attention: it's different than in Twitter app, it starts at the top of table view header, not at the top of cells.

My implementation in Interface Builder Twitter's slider is different

So… how did they achieve it? Did they put a UITableView in a UIScrollView and handled touch/scroll events themselves? I don't think so, since it's discouraged, but I can't think of another explanation.

raven_raven
  • 343
  • 2
  • 6
  • 17
  • Size of the slider represents how much content is below. Smaller slider - more stuff to scroll. – Juri Noga Aug 09 '15 at 18:24
  • @njuri I know, that's not the problem. My concern is that in my implementation slider begins at the top of the table header view, in Twitter app it starts at the top of the cells. It never hovers above segmented control or profile info. – raven_raven Aug 09 '15 at 18:26
  • @raven_raven I'm looking into this right now. Did you manage to find a solution? My bet is they are playing around with setting the scroll indicator inset on scroll – so I will be playing around with this and let you know if I succeed. – dandoen Oct 14 '15 at 09:39
  • Did you get the right answer? – Dasoga Nov 18 '15 at 00:02
  • @Dasoga Unfortunalety no. I still haven't manage to replicate exactly this Twitter profile page. – raven_raven Nov 18 '15 at 08:31
  • Hi again, I found this one: (http://developerdean.com/create-twitter-ios-app-user-interface/). But I hace other problem, I want to can touch the header section (cover photo) do you have some idea?. Thanks! – Dasoga Dec 20 '15 at 20:03
  • @raven_raven Any ideas now? I have the same problem. – Hilen Jun 09 '17 at 02:34
  • I try to explain a bit [here](https://stackoverflow.com/a/57649852/5923606) how I implement it. – ugur Aug 25 '19 at 21:35
  • I tried to explain a bit [here](https://stackoverflow.com/a/57649852/5923606). – ugur Aug 25 '19 at 21:38

2 Answers2

4

I'm not sure about the slider, but here they did pretty good job with mimic twitter profile view. So take a closer look, maybe you'll find this helpful.

Juri Noga
  • 4,363
  • 7
  • 38
  • 51
  • Thank you, it looks good, but it has exactly same issue: scroll bar hovers above the whole view, not only cells. – raven_raven Aug 09 '15 at 18:40
1

You can adjust the height of the scroll indicator to sit below your header using 

tableView.scrollIndicatorInsets = UIEdgeInsetsMake(yOffset, 0, 0, 0)

yOffset would be the current on screen height of your header. If you adjust this as the user scrolls down using the scrollViewDidScroll method from UIScrollViewDelegate, it will achieve the smoothly changing effect that twitter uses.

This page goes into more detail on creating the twitter profile effect, building on the method described in the link supplied by njuri above including changing the scrollbar to be correctly positioned.

davedavedave
  • 487
  • 6
  • 11