Twitter profile page iOS Swift dissection (Multiple UITableViews in UIScrollView)

Question

hi... really how do they implement this? there are several tutorial for Twitter profile page. but they don't handle all possibilities... first... when you scroll top or bottom any where, top view start scrolling until the segmented control, reach at top of the page...then scroll doesn't stop and subtable start scrolling until touching down and middle of way tableview start loading other rows dynamically ... so I don't think that they set content of scrollview statically

second things how do they handle sub tables... are they containerView? if so, then the structure would be like this

ScrollView
  TopView (User Info)
  Segmented Controll
  scrollView(to swipe right or left changing tables)
     ContainerView For  TWEETS
     ContainerView For  TWEETS & REPLIES
     ContainerView For  MEDIA
     ContainerView For  LIKES

am I right? so how do they handle scrolls between sub tables and Top Scroll View to implementing topview position change base on scrolling...

it's mind blowing

this is How I Handel Nested ScrollViews... i made a childDidScroll Protocol and my child tableviews implement that and in my profile page i can receive all child didscroll event then in childDidScroll method :

   //if child scrollview going up
if(scrollView.panGestureRecognizer.translation(in: scrollView.superview).y > 0)
        {
            //check top scrollview if it is at bottom or top
            //then disable the current scrollview
            if mainScrollView.isAtBottom && scrollView.isAtTop{
                scrollView.isScrollEnabled = false
            }else{
                //else enable scrolling for my childs
                featuresVC.tableView!.isScrollEnabled = true
                categoriesVC.tableView!.isScrollEnabled = true
                shopsVC.tableView!.isScrollEnabled = true
            }
            print("up")
        }
        else
        {
            if mainScrollView.isAtTop {
                scrollView.isScrollEnabled = false
                mainScrollView.scrollToBottom()

            }else{
                featuresVC.tableView!.isScrollEnabled = true
                categoriesVC.tableView!.isScrollEnabled = true
                shopsVC.tableView!.isScrollEnabled = true

            }
            print("down")
        }

but this solution has a some cons... and one of the is that first when child scrollview is at top or button, there should be two try to call my parent scrollview handle the scrolling, in first try i disable the child scrollview, and in second try parent scrollview handle the scrolling

** how can i say when you , my child, scrolling up, check if your parent is at top, then let him handle the scroll and when he touching the bottom, you can handle remain up scrolling, or tell the parent scrollview , if you are at top (user info is visible) if you or your child getting up scrolling, first you handle the scroll and when you rich at bottom(user info is not visible), let the remain scrolling on you child**

Inebriant

Did you find solution for this ? I'm just stuck here. – Middlebrooks

Yes, i found a library for this, let me find the link, here github.com/maxep/MXSegmentedPager, i am using this in a project and it is working fine, – Inebriant

If its ok, please upvote me – Inebriant

I was already using this library. I wanted to remove it from my project, thats why I asked. Well thanks for reply. – Middlebrooks

I wonder how did you customize this library. Because twitter profile is different specially header part. Also There are segue which I wanted to remove. – Middlebrooks

i do not implement twitter profile page exactly, i just want this behavior on child pages, and do not find anything for that ... – Inebriant

@Farshadjahanmanesh did you able to find any solutions regarding this problem? I have to implement same. – Raper

Answer 1

I found a library, https://github.com/maxep/MXSegmentedPager Its totally works fine

Inebriant

One case it doesn't work is when you scroll from top view and let it decelerate into the tableview below. The decelerate stops when the custom segmented control reaches the top in the example, while in Twitter app it keeps scrolling. It may be minor enough to ignore but just want to point out. – Firedog

Answer 2

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

Critique

Answer 3

I believe you are mostly right, except for the topmost scroll view.

In a recent app, I implemented something similar following this tutorial:

Basically, the trick is to have a class be the scrolling delegate of the bottom UITableViews, listen to the scrollViewDidScroll modifications, and modify the top inset of the UITableView and the TopView.

The structure I would use is like this:

Topview
ScrollView (horizontal scroll)
  Segmented Control
ScrollView (horizontal, paging scroll)
  UITableView
  UITableView
  UITableView
  UITableView

You are totally right in it being mind blowing. Looks so simple.

Qua

thanks for your answer, i implement a protocol between parent and childs and now i can receive all child didscrolling... but how can i say when you , my child, going up, check if your parent is at top, then let him handle the scroll and when he touching the bottom, you can handle remain up scrolling... – Inebriant