Handmade Code: Parallax Table View – Part 2

on

TableParallax_icon-01

Hi guy, if your are new reader in this series handmade code. I strongly recommend read part 1 before continue.

Improve UX

Here is what we did in a previous part.

Everything is done. But if you are perfectionist guy, you should be angry. Because, animation don’t feel naturally. It like “fake” parallax.

Yes, this is things we need improve more.

Real parallax effect

We need add velocity to photos in each cell.

Time to go back  FeParallaxTableView.m file.

Here, I have just add a bit code in [tableView:willDisplayCell:forRowAtIndexPath:]. In this time, i calculator new variable which called “dentaParallax”.

As according to its name, this variable was defined depend on How much the photo in cell should be translated. I take the height of screen as landmark, and a percent of parallax is division between denta and landmark.

Then, I convert percent to px, by multiplying percent with threshold variable. You can choose any native number as you like. The large number will affected the speed of parallax effect. So, with 3,5″ or 4″ screen, 200px is the best number for parallax effect.

But, it’s not the end. We should add some code above into [scrollViewDidScroll:].

Run it again, you will be surprised ;]

Just a bit

Hey, before closing my blog, please wait me a minute.

Do you notice when scrollView is stopped, the upper cell’s photo is overlaid ? The title and photo were hidden a part by status bar.

SampleCode_ParallaxTableView_15

And what I expect is the scrollView can adjust content offset to nice position itself.

We handle two common situation.

  1. The first, when I scroll a scrollView and lift my finger up while the scrollView is stopped.
  2. And the last, I drag scrollView and lift my finger up again, but scrollView is decelerating in this time.

And I use 2 method above. One is [scrollViewDidEndDragging:willDecelerate:], the rest is [scrollViewDidEndDecelerating:];

So, here is final result.

Sample Project

Download

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *