Implementing ScrollView in XCode6 with responsive layout and storyboards
I have an input page with labels and buttons that are too long to fit on the screen of any iPhone. I want the user to scroll vertically to do all inputs.
I would like to make a layout in a storyboard.
All the suggested answers I can find either in different situations: - Layout everything by code - Content are images that are natively sized - Can work with autolayout / xcode 5, but I can't get the job done for responsive layout and xcode6
Here visually what I'm talking about. The yellow box is a view that contains input elements. The black box is something that can be seen at any time.
Here's what I've tried based on my research:
- Added a ScrollView inside the main view that fills it completely. (I think it should be a black rectangle.)
- Added a View to the scrollview (to act as a content container). (Yellow rectangle)
- Added elements required to view content. To get to what is visible on the screen, I dragged and expanded the view so that it was big enough to contain everything.
- Added constraints to bind content view to scrollview from all sides.
- Added constraints so that content will have the same width and height as the top-level view.
- Added restrictions on the width and height of all elements and from their sides to the sides of the container view.
What I get in the simulator: just elements that can fit into the original screen size.
Can anyone please help resolve what I feel should be a common problem?
Thank.
source to share
Thanks to hardik, I think I figure it out. Most of what I did was correct, but I didn't have a key set of constraints (and I had one additional one that I didn't need or need.)
This is what I consider to be the method of use and the minimum set of constraints that make it work.
- Add scrolling to the main window. Enter scrollview all view.
- Add content view inside scrollview. Expand it if necessary to add your content (labels, buttons, etc.).
- Add restrictions related to the presentation of content on the scrollview from all sides.
- Add constraint limiting content view width to main view width - not scroll width. Leave the height alone. (The height limit is an extra bit I had that I didn't need.)
- Add constraints that snap the scrollview to the main view from all sides. (This is a key addition.)
Now you need to add content constraints in order to post content. Obviously, they differ depending on your situation. I needed to have constraints that defined the layout completely from top to bottom and from the side.
source to share