Is there a way to design Tinder/Twitter-self-profile-like header effect with table view in iOS?

Question

I am trying to design something similar to what\'s seen on Tinder and Twitter own-profile view. There is a blurred background on Tinder behind user\'s own profile picture, a

Answer 1

The basic design goes by various names such as Parallax, Sticky Header, or Stretchy Header.

The specific effect you're looking for is a Parallax Blur.

There are a few implementations at GitHub. Here are two from a quick search:

• TwitterCover is a sharp image that blurs as the header grows.

• ParallaxBlur is a blurred image that becomes sharper as the header grows.

Answer 2

An easy way is putting two main objects on the view controller.One is UIViw,the other is UIScrollView(also UIScrollView subclass).You can put the UIView over the UIScrollView to mask the header part of the scrollview.Change the contenoffset of the scrollview(it's important especially when using the tableview, or the view will overlay the cell).The other thing is call the - (void)scrollviewdidscroll function.Do some math caculations in this function, mainly doing the parallax effect with scrollview.content.offset.y. This is an article introducing this—— IMPLEMENTING THE TWITTER IOS APP UI (UPDATE: SWIFT 3)

Answer 3

As an exercice i tried to reproduce the twitter profile header effect in the following project: https://github.com/BillCarsonFr/twitterprofilepage