Stretchable Header view in Scrollview — Swift 5, iOS

ANANTHA KRISHNAN K G
2 min readApr 21, 2019

--

Today let’s talk about how to add a stretchable ImageView header in a Scrollview like this,

Create an Xcode project and add a UIScrollview in the ViewController’s storyboard. Then add a UILabel and a UIView to the scrollview. Inside the UIView add an UIImageView. The storyboard should look like this,

Now add top, bottom , trailing and leading constraints for the scrollview as 0 . Then add the width constraint for UILabel as equal to the superView’s width. Then add the top space as 280 to the superview. Make the trailing , leading and bottom constraints as 0 .

Now its time to add constraints for the UIView and the imageView. Add the top, bottom, trailing and leading constraints as 0 for the UIView. Then add the top constraint for the UIImageView to the SuperView’s safe area. See the image below,

Make imageView’s top constraint priority to 900 .Then add the trailing , leading and bottom constraints to 0 for the imageView. All the errors will go by now.

Make the number lines of the UILabel to 0 . Create a reference of the UILabel and add some values to it.

Run your app and you will be able to see a stretching header view now in your app.

That’s it . Now you know how to add a stretchy header in UIScrollView. Get the source code from here.

If you enjoyed reading this post, please share and recommend it so others can find it 👍👍 !!!!

You can follow me on Medium for fresh articles. Connect with me on LinkedIn and GitHub.

--

--