Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

enter image description here

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**

like image 849
Farshad jahanmanesh Avatar asked Jun 10 '17 12:06

Farshad jahanmanesh


3 Answers

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

like image 192
ugur Avatar answered Nov 03 '22 12:11

ugur


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

like image 2
Farshad jahanmanesh Avatar answered Nov 03 '22 12:11

Farshad jahanmanesh


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.

like image 1
Xavier Lowmiller Avatar answered Nov 03 '22 12:11

Xavier Lowmiller