iOS Tutorial - Twitter profile view controller

Storyboard configurations:

First we add the header which will contains the background image ( we will insert UIImageView by code later)
with trailing, leading, top to super view
with a constant of its height
we should also maintain a reference to the header view in the view controller

Second step: 

we add the scroll view which will contain the data for example you can embed an empty view in it OR a UITableView with a fixed height to it 

with the shown constraints 

You will notice a red flash booms to your face from the Xcode , its normal the scroll view is a special class that have a view to scroll , interface builder don't know the actual height or width for the scroll 

we will fix this now 

interface builder issues: 

We will add a dummy container view with constraints to scrollview we will called "Spacer"  , Wow the red flash gone !

Optional : we can add another container view that can embedded another view controller.

 Third step :

we can add avatar image , username and optionally the hash tag or something embedded in a stack view with these constraints.

Now we have finished the configuration lets go to the fun part;

here is the full code of the desired view controller:

we will explain it part by part:





1st part:

Getting a reference to storyboard views

And declaring variables to hold references for blurredHeaderImageView and normalHeaderImageView


2nd part:
configuring the blurredHeaderImageView and normalHeaderImageView and inserting them as subviews of header view but below the headerlabel using

header.insertSubview(headerBlurImageView, belowSubview: headerLabel)

Now profile view controller conformed to the scrollview delegate and can listen to the callbacks 

let offset = scrollView.contentOffset.y

we getting the current content offset of the scroll view then we made decisions on it 

3rd part: 

when he pulls down:

scaling image by calculated offset factor after translating it to fit the new size for ex, when you scale image on view the upper top of it changes (goes up) resulting a mispositioning so all we do is translate it down to match the new scale keeping upper top = upper top of super view

4th part:

when he pulls up:

In the other hand when scrolls up the header returns to its standard height then image get smaller then blurring take effect with 

headerBlurImageView?.alpha = min (1.0, (offset - offset_B_LabelHeader)/distance_W_LabelHeader)

5th part:

applying the transformations which have done to header and avatar image.

Now we have the beautiful effect 

References :

You can view the full source at:
Github : https://github.com/madadoux/Twitter-Profile-Effect

Used to blur images:
FxBlurView :https://github.com/nicklockwood/FXBlurView