Saturday, June 11, 2022

Scroll View - Interface Builder

 Here are the steps to make a Scroll View that has an embedded UIView that specifies the height of the contents of the scrollable area.

Create a new app with a View Controller.

Place a Scroll View inside the View Controller.




Constrain the position of the Scroll View. This example will position the Scroll View to use most of the available area. Just use the sizing handles and make the Scroll View fill the parent view. You can choose any size you want. Constrain the scroll view to the Safe Area.


Next place a UIView inside the Scroll View. This example will use a "Container View".







Use the sizing handles to make the Container View the same size as the Scroll View.






Constrain the Container View to the Scroll View's "Content Layout Guide". Constrain leading, top, trailing, and bottom and set all of their values to"0".








Now constrain the Container View to the Scroll View's "Frame Layout Guide". Constrain to "Equal Widths" and set the multiplier value of the constraint to "1".




This example will show vertical scrolling. Therefore set the height of the Container View to something larger than the Scroll View.


This example sets the height to "1200".



Before testing this, place a label somewhere near the bottom of the Container View.



Now run it in the iPhone Simulator. This example uses an iPhone 8.

Drag in the simulator to see the label.




And that's it!