Geek Answers Handbook

Achieve an effect when a UITableView moves before scrolling

Description

If you use the Spotify application on iOS or Android ( I am developing on iOS ), you will notice that if you select a playlist and drag the UITableView with your songs up, it happens:

The table does not scroll, it simply moves at the same speed that it scrolls, and the images above it move more slowly than the table, creating the effect of scrolling parallax. However, when the table view reaches the top of the view, it behaves like a normal scroll view.

I tried to achieve this effect in several different ways that did not work for me.

Here is a video of this effect: https://www.dropbox.com/s/n7npk4lrzmag0sn/IMG_9331.MOV

What i tried

I wanted the UITableView and UIScrollView above it to move up when the user was scrolling alone, so I used

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

and depending on the direction of scrolling, I changed the position of the frame in the form of a table and a UIScrollView above it.

The problem with this method is that the tableview bounces, which destroys the effect.

To get rid of bouncing, I tried the following:

 _userTableView.bounces = NO;

However, now, since the table view has not scrolled, scrollViewDidScroll is never called.

Another thing I've tried is subclassing UITableView and overriding

 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

The hitTest method for detecting scroll gestures in the lookup table, problems with this:

  • Only 1 CGPoint transferred - no way to know if the UITableView was touching or scrolling.
  • Since scrolling is disabled, I cannot use self.decelerating to check if the table view is simply scrolling - the table view will never slow down.
  • Bringing the table to a slowdown as it moves upward in view and continuing to scroll with the same momentum after it reaches the top will be very difficult; In the Spotify application, the user can drag the table at a speed high enough to make the table view move to the top of the view and continue scrolling, all in one motion.

A table view must increase in size to accommodate more cells added to the view (without scrolling) when it moves up the view, or it should start at the same size as the view. After he reaches the top, he must start scrolling, like a regular table, with the same impulse that he has after an upward movement.

Any suggestions on how I can solve this?

Thank you very much.

+6
source share
1 answer

For the effect you showed, I think that a tableHeaderView with parallax content as a preview will suffice.

In -scrollViewDidScroll: (or KVO for contentOffset ) you set the center parallax subset to the center of the visible borders of tableHeaderView . You can also adjust how much the content “sticks” to the center by multiplying the coefficient.

 CGRect tableViewHeaderVisibleBounds = tableViewHeader.bounds; tableViewHeaderVisibleBounds.origin.y = MAX(0, MIN(CGRectGetHeight(tableViewHeader.bounds), tableView.contentOffset.y)); tableViewHeaderVisibleBounds.size.height -= tableViewHeaderVisibleBounds.origin.y; CGFloat factor = 1.8f; // less than 0.5:stick to top // greater than 0.5:stick to bottom parallaxContentView.center = (CGPoint){ .x = parallaxContentView.center.x, .y = (CGRectGetMinY(tableViewHeaderVisibleBounds) + (CGRectGetHeight(tableViewHeaderVisibleBounds) * factor)) };

I encoded this in my head, so I’ll just make the necessary settings, but I hope you get the main idea.

+2
source

More articles:


All Articles