Create Stretchy Header Effect for UITableView Tutorial - iOS Development Tutorial (Part 1)

Looking at apps like Twitter, Apple Music, Yahoo News Digest, Facebook F8, they all have a stunningly interactive UI.

One of these features is the stretchy header effect that people always love.

It adds a sense of interactivity, depth and playfulness into your app.

Let's learn how to create it in this episode of Code Hangout.

As always, download the starter project below. After you sign up with your name and email, I'll send you the projects and my new iOS email course as my THANKS for joining me in Code Hangout!

*************************************
*** ABOUT CODE HANGOUT ***
*************************************
Code Hangout is hosted by Duc Tran, founder of Developers Academy.

This is his free-style no notes, no teleprompter presentation and live coding broadcast with you guys everyday.

******************************************************
*** FREE TRAININGS IN IOS DEVELOPMENT ***
******************************************************

[mugnoom]

Awesome tutorial, please be specific how many tutorials are in your course, is it ongoing or already complete?

[francescobordignon]

Great tutorial, I have a question for you: how can I set each image of the header view with each image of the collection view?

[byteappple]

Hi! Where do you show how you export the sketch 3 mockup into Xcode?? Nice video by the way! :D

[Alex-ikcl]

It's greatful to follow your course, and i hope you can make more tutorials about the autolayout, and in china, much ios programs also use code to design UI.Thanks!😄

[Dhirucool]

hi, dear +Duc_Tran, this is very nice tutorial but i have some doubts
i wanted to create the same View with upper side diagonal cut, m i was also doing the same as you have done in this tutorial first making UIBezierPath than making CAShaperlayer using this Path finally masking it to my view .

My problem is "How can i put shadow on it ??" Shadow around the new modified View, how can i do this i am unable to do, ,,please help me out . thanks in advance.

[AlfredoElizondoLife]

Just wanna Mention that -- part 2 is part 1 and viceversa-- for the ones following this tutorial and not knowing where does the headerViewFile comes from, other than that Awesome work Duc such a nice tutorials you putting here.

[Alex-ikcl]

and what the name of the backgound music in your tutorials?😄

[mastergamer]

I'm really grateful I found your channel. Quality and quantity. Subscribed. And, perhaps, I might even buying your social course.
Keep up the great work Duc. Amazing.

[rezwanislam]

need help. shows this error "There was an error submitting your subscription. Please try again." while trying to download the project

[kentonraiford]

It says that your mailing list for the website you gave us is not active. How do I take your free course?

[sofiarodriguez]

I have a question for you: how can I set each image of the header view with each image of the collection view?

[davidwwww]

Thanks for this Duc. For those with problems with the error "unexpectedly found nil while unwrapping an optional", make sure that you don't use "private var headerMaskLayer = CAShapeLayer!" above viewDidLoad, but "private var headerMaskLayer = CAShapeLayer()" when setting up the headerMaskLayer. Wasted many many hours, reconnecting IBOutlets etc over and over but just realised today that it was because I was trying to force unwrap something that Apple seemingly never intended to be. D'oh!

[yegefan]

Actually this is Part 2 while Tutorial part 2 is part 1.