I have a scroll view with content that is 1000px tall and would like to be able to lay it out for easy design on the storyboard.
I know it can be done programmatically but I really want to be able to see it visually. Every time I put a scroll view on a view controller it won't scroll. Is it possible to get it to work like I want or do I have to do it in the code?
This question is related to
ios
xcode
uiscrollview
uistoryboard
Note that within a UITableView
, you can actually scroll the tableview by selecting a cell or an element in it and scrolling up or down with your trackpad.
For a UIScrollView
, I like Alex's suggestion, but I would recommend temporarily changing the view controller to freeform, increasing the root view's height, building your UI (steps 1-5), and then changing it back to the standard inferred size when you are done so that you don't have to hard code content sizes in as runtime attributes. If you do that you are opening yourself up to a lot of maintenance issues trying to support both 3.5" and 4" devices, as well as the possibility of increased screen resolutions in the future.
Here's how to setup a scrollview using Xcode 11
1 - Add scrollview and set top,bottom,leading and trailing constraints
2 - Add a Content View to the scrollview, drag a connection to the Content Layout Guide and select Leading, Top, Bottom and Trailing. Make sure to set its' values to 0 or the constants you want.
3 - Drag from the Content View to the Frame Layout Guide and select Equal Widths
4 - Set a height constraint constant to the Content View
The key is the contentSize.
This is often missing and not indicated when adding a UIScrollView.
Select the UIScrollView and select the Identity Inspector.
Add a contentSize
keyPath as a size
to the scrollView in the Identity Inspector and setting it to (320, 1000).
Scroll away.
For this example, I have unchecked the Autolayout feature of the Interface builder. And, I'm still using (for no reason at all) the relatively old 4.6.1 version of Xcode.
Start with a view controller that has a scroll view over it (the main view).
1: Add a Container View, from the Object Library, to the scroll view. Notice that a new view controller is added to the storyboard and it is linked to the view controller with the scroll view.
2: Select the container view and, on the Size Inspector, make it anchor to top and left without auto resizing.
3: Change its height to 1000. (1000 is used for this example. You should apply the value that you require.)
4: Select the new view controller and, from the Attributes Inspector, change Size to Freeform.
5: Select the view of the new view controller and, on the size Inspector, change the height to 1000 (which is equal to the container view's height).
6: For your test later, while still on the view of the new view controller, add a label at the top and at the bottom of the view.
7: Select the scroll view from the original view controller. On the Identity inspector, add an attribute with the keyPath set to contentSize, type set to Size, and value set to {320, 1000} (or your container view's size).
8: Run on the 4-inch iPhone Simulator. You should be able to scroll from the top label up to the bottom label.
9: Run on the 3.5-inch iPhone Simulator. You should be able to scroll from the top label up to the bottom label.
Remember that Xcode 4.6.1 can only build for iOS6 and below. Using this approach and building for iOS6, I am still able to achieve the same results when the app is run on iOS7.
Here is a simple solution.
Set the size attribute of your view controller in the storyboard to "Freeform" and set the size you want. Make sure it's big enough to fit the full content of your scroll view.
Add your scroll view and set the constraints as you normally would. i.e. if you wants the scroll view to be the size of your view, then attach your top, bottom, leading, trailing margins to the superview as you normally would.
Now just make sure there are constraints in the subviews of the scrollview that connect the top and bottom of the scroll view. Same for left and right if you have horizontal scrolling.
Here are the steps that worked for me on iOS 7 and XCode 5.
Drag a ViewController (it comes with UIView "View").
1.1 Select "View Controller" and select "File Inspector" and uncheck "Auto layout".
Enter "contentSize" for keyPath. Select "Size" for Type. And Enter {320, 1000} for value.
Note: Step 4 is simply saying that the scroller contains some content whose size is 320x1000 units. So setting contentSize will make scroller work.
Select View Controller, Select "Attributes Inspector" then select Freeform from Size.
Note: step 5 will allow us to change the size of "View" that the view controller comes with.
Select "View" and then select "Size Inspector".
Note: 5, 6 & 7 is purely for us to see stretched or entire expanded view inside StoryBoard. Note: Make sure to unselect "Auto Layout" on View Controller.
Your View hierarchy should look like:
In iOS7 I found that if I had a View inside a UIScrollView on a FreeForm-sized ViewController it would not scroll in the app, no matter what I did. I played around and found the following seemed to work, which uses no FreeForms:
Insert a UIScrollView inside the main View of a ViewController
Set the Autolayout constraints on the ScrollView as appropriate. For me I used 0 to Top Layout guide and 0 to Bottom layout Guide
Inside the ScrollView, place a Container View. Set its height to whatever you want (e.g. 1000)
Add a Height constraint (1000) to the Container so it doesn't resize. The bottom will be past the end of the form.
Add the line [self.scrollView setContentSize:CGSizeMake(320, 1000)]; to the ViewController that contains the scrollView (which you've hooked up as a IBOutlet)
The ViewController (automatically added) that is associated with the Container will have the desired height (1000) in Interface Builder and will also scroll properly in the original view controller. You can now use the container's ViewController to layout your controls.
i wanna put my 5 cents to accepted answer: i've been researching topic for 2 days and finally found a solution that i will be using always from now on
go up to item 4 in accepted answer and forget about adding attributes of frames and contentsizes and so on
to make everything automatic just use solution from this link
everything is clear, easy, elegant and works like a charm on ios 7. i'm pretty glad with all that lol
Disclaimer :- Only for ios 9 and above (Stack View).
If you are deploying your app on ios 9 devices use a stack view. Here are the steps :-
Apparently you don't need to specify height at all! Which is great if it changes for some reason (you resize components or change font sizes).
I just followed this tutorial and everything worked: http://natashatherobot.com/ios-autolayout-scrollview/
(Side note: There is no need to implement viewDidLayoutSubviews unless you want to center the view, so the list of steps is even shorter).
Hope that helps!
You should only set the contentSize property on the viewDidAppear, like this sample:
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
self.scrollView.contentSize=CGSizeMake(306,400.0);
}
It solve the autolayout problems, and works fine on iOS7.
After hours of trial and error, I've found a very easy way to put contents into scrollviews that are 'offscreen'. Tested with XCode 5 & iOS 7. You can do this almost entirely in Storyboard, using 2 small tricks/workarounds :
So far for the storyboard work, now you need to add a single line of code to the viewController's 'viewDidLoad' method to set the scrollViews contents so it contains the entire 'enclosing view'. I didn't find a way to do this in Storyboard:
- (void)viewDidLoad
{
[super viewDidLoad];
self.scrollView.contentSize = CGSizeMake(320, 800);
}
You can try doing this by adding a contentSize
keyPath as a size
to the scrollView in the Identity Inspector and setting it to (320, 1000).
I think Apple should make this easier in storyboard, in a TableViewController you can just scroll offscreen in Storyboard (just add 20 cells, and you'll see you can simply scroll), this should be possible with a ScrollViewController too.
Here's a bit of a grubby answer that get's to the same solution for vertical scroll views, but (against the ethos of stackoverflow) doesn't answer the question. Instead of using a scrollView, just use a UITableView, drag a normal UIView into the header, and make it as big as you want, you can now scroll the content in storyboard.
Here are the steps with Auto Layout
that worked for me on XCode 8.2.1.
Size Inspector
of View Controller
, and change Simulated Size
to Freeform
with height 1000 instead of Fixed
.View Controller
as RootView.Scroll View
as subview of RootView and rename it as ScrollView.Vertical Stack View
as subview of ScrollView and rename it as ContentView.Attributes Inspector
of ContentView, and change Distribution
to Fill Equally
instead of Fill
.View
as subview of ContentView and rename it as RedView.Red
as the background of RedView.View
as subview of ContentView and rename it as BlueView.Blue
as the background of BlueView.Update Frames
button.
View hierarchy:
View Controller Scene (Height: 1000):
Run on iPhone7 (Height: 1334 / 2):
If you are using auto-layout than best approach is to use UITableViewController with static cells in storyboard.
I have also once faced the problem with a view that require much more scrolling so change the UIScrollView with above mentioned technique.
Getting Scrolling to work in iOS7 and Auto-layout in iOS 7 and XCode 5.
In addition to this: https://stackoverflow.com/a/22489795/1553014
Apparently, all we need to do is:
Set all constraints to Scroll View (i.e. fix scroll view first)
Then set distance-from-scrollView constraint to the bottom most item to scroll view (which is the super view).
Note: Step 2 will tell storyboard where the last piece of content lies within Scroll view.
Source: Stackoverflow.com