Hey I want to add a scroll view to my view controller, I have dragged a UIScrollView onto the canvas, it is the required size (228*128). I want this scrollview to scroll a view of size (576*128), i.e. double width. I'm not sure how to go about doing this. Do I first draw the (576*128) view on a separate xib file? How would I link all this up after? The image below is my setup. Do I have to create a custom class for the UIView that contains the content and init this is my view controller? Just not sure how to go about it. Thanks!
updated image below.........
You can lay this out entirely in Interface Builder.
Start with a fresh ViewController. In the Size Inspector on the right, set the Simulated Size to Freeform. Set width to 640 and height to 600. This will give you a sufficiently wide ViewController to see the full width of your scroll view (for layout purposes only).
Drag out a scrollView. Add constraints to center it in the view, and constrain it to the bottom of your ViewController. Constrain its width to 576 and its height to 128. We'll fix up the width in a later step.
Add a contentView to the scrollView by dragging out a UIView and dropping it into the scrollView. Pin it to the left, top, right, and bottom of the scroll view and constrain its width to 576 and height to 128. To do this, click on the pin icon at the bottom of the screen |-[]-|, uncheck Constrain to margins, turn on all four orange I-beams (struts), set their constants to zero, check the boxes next to width and height and set their values to 576 and 128 respectively. Finally, click on Add 6 constraints.
Make the background of the contentView yellow so you can see it.
Add content to your contentView. I added three labels "Left Side", "Middle", and "Right Side".
Now let's make the scrollView the right size. Click on the scrollView's width constraint and make it a Placeholder by clicking on the Remove at build time checkbox.
Add another width constraint to the scrollView. Set it equal to 228, and set its priority to 750. With this lower priority, you won't have conflicts in Interface Builder, but when you build the other one will be left out and this will constrain your scrollView to a width of 228.
At this point, your Document Outline will look like this showing all of the constraints:
Now build, and your scrollView will scroll!
Link your scrollview to an outlet, then do this:
Objective-C:
[scrollView setContentSize:CGSizeMake(576, 128)];
Swift:
scrollView.contentSize = CGSize(width:576, height: 128)
After this, you can add elements to your scrollview seperately, or you could add them to a uiview and then add it to your scrollview by doing:
Objective-C:
[scrollView addSubview:view];
Swift:
scrollView.addSubview(view);
(By the way, you say 'double width'. 228 * 2 is not 576px but 456px)
Related
I created a scrollview in storyboard with multiple views but the scrollview does not scroll. See the screenshot. I have a scrollview with images and another view embedded that spans outside the view area. I would like the scroll view to scroll down but it does not when I see the code in the simulator.
You need to add a UIView with 1000(or whatever you want) height constant to scrollView and make the UIView equal width to view
ScrollView needs to know its scrollable area, so you need to provide information about width and height for ScrollView's content:
width - you can create empty view (with height constraint equal to 1), place it inside scrollView, set its leading and trailing constraints to scrollView and set width constraint equal to main view. Then, scrollView will know that its scrollable area has the same width as screen.
height - you need to provide top and bottom constraints for first and last components inside scrollView (and all components should have specified height). I guess you forgot about setting bottom constraint for the last item.
I have a view hierarchy that looks like this (based on other answers and Apple's advanced AutoLayout guide for working with UIScrollView):
The 2 steps required for ScrollView are:
Set up constraints for position and size (frame) of ScrollView: The same way you do it with any other view.
Set up constraints for content size: By making sure that there are constraints from the ScrollView's subviews touching all edges (leading, trailing, top, bottom) of the ScrollView, if you're doing this in interface builder and not programmatically.
Step 1 worked fine at first and this was the result:
No problems with position and size as expected. I just need to define the content size (content height and content width) now in Interface Builder with Step 2.
Now I add the constraints touching all 4 edges of the ScrollView like so:
Suddenly, the ScrollView doesn't know it's position and size (frame) anymore.
I've looked at other answers and followed the various steps, but can't seem to resolve this issue. Sorry I'm not able to post Storyboard screenshots because of privacy issues
Set the scroll view's top, bottom, leading, trailing constraints to its superview to 0.
Set the view that is inside the scroll view and set its top, bottom, leading, trailing constraints to its superview to 0.
Select the view that is inside the scroll view, go to the size inspector and set the "Intrinsic size" to "Placeholder".
Scroll views can be a little tricky at first. You really have 3 parts:
Actual frame of the scroll view
Actual frame of the subview(s) contained in the scroll view
The contentSize of the scroll view - that is, how far it should scroll in either direction
So, 1. is pretty straight-forward.
The second part also seems straight-forward, except that we tend to "pin" subviews to the inside edges of their superviews. In the case of scroll view subviews, those constraints are what defines the contentSize. You also have to make sure the subviews have a "size".
Starting with just one subview, you would:
set the scroll view's constraints as "normal".
set the size of the subview - just for demo purposes, set it to 100 x 100
pin all four edges of the subview to the four edges of the scroll view
Run the app. Assuming you set background colors so you know what you're looking at, you should see the scroll view positioned and sized as you'd expect... you should see the subview of 100 x 100 sitting somewhere inside the scroll view... and you will likely not be able to do any actual scrolling.
If you go back and change the subview to, say, 100 x 800, and still have its bottom constraint pinned to the bottom of the scroll view (the subview's superview), and run the app again... You should be able to scroll up and down for the full 800 pt height of the subview.
The way to think about it is: the scroll view's content - whether it's one or many subviews - has to define its own size, which will define the scrollable area (the scroll view's contentSize).
Hope that makes sense!
I have a UIView with 3 UIViews as its subviews. I have set layout constraints for these subview as fixed aspect ratio. i.e if the screen size changes their width will change but aspect ratio will always be the same.
Now i have also made width of the UIView (the red one as shown in screen shot) changing as the screen size changes.
But i am struggling to make constraint for height of this view. what i want is its height should be set according to the total height of the subviews inside it.
since the height of the subviews will change if the width of the screen changes, because i have made their aspect ratios fixed.
As of right now i have made height of the Red superview fixed.
but i want it to be variable according the total height of all the subviews inside it.
Here is the screen shot of my viewcontroller and its preview.
As you can see there is some space remaining because of the fixed height of red super view.
Details of the constraints i have added so far are as bellow.
Main Red SuperView
**1st (Top), 2nd (Middle), 3rd (Bottom) Subviews respectively **
You can add a bottom constraint from the 3rd view to its superview, then you have to remove the fixed height constraint of the superview.
Add an outlet for the height constraint of the red view if you haven't done it already.
If you are doing this in viewDidLoad, call layouIfNeeded in controller's view.
call for every subview, setNeedUpdateConstraints and layoutIfNeeded.
Then calculate your desired red view's height (I would do 3*subview.frame.size.height + topPadding + bottomPadding) and set the red view's height xconstraint constant to this.
call setNeedUpdateConstraints and layoutIfNeeded on red view.
To support same behaviour in all resolution. you need to set layout as follow.
Red View
UIView Top
UIView Middle
UIView Bottom
hope this help you.
I've been facing this issue from past 2 weeks and not yet got a solution.
I'm using UIScrollview in my application where the problem exists.
Generally in my app, there is dynamic text and images with different sizes will come from webservices. For example, imagine the Facebook Newsfeed. My application is similar to the Facebook newsfeed. Sometimes, there will be only text, sometimes there will be text and images. And comments for that post.
As i've seen in many links, the heirrarchy i'm following is SuperView-->UIScrollView-->Content View and the elements are placed in that content view. I'm assigning the constraints from the elements in the contentview to the Superview (ContentView --- constraints -- SuperView). When the content in the view exceeds the size of the superview, it has to scroll. But the scrollview content size is limited to the size of 600x600 i.e., in main.storyboard, when we design for W any x H any size. I've seen many tutorials and searched many sites. But following them gives me no luck.
Any help is appreciable.
Here is how to set up a scrollView in Interface Builder from scratch that works with Auto Layout.
Start with a new ViewController. Drag out a scrollView such that it fills the view. Untick Constrain to margins and constrain the left, top, right, and bottom edges of this scrollView to the left, top, right, and bottom of its superview with offsets of 0. This allows the scollView to fill the screen on any device in any orientation. You can make your scrollView take up less of the screen if you like, just make sure it is fully contrained.
Add a view to your scrollView. This should be the only top level view on your scrollView and it will serve as your contentView.
Constrain the left, top, right, and bottom edges of this contentView to the left, top, right, and bottom of the scrollView with offsets of 0. At this point, you will see warnings about ambiguous content size. That is because you haven't told it yet how big your content view will be.
To size the contentView, add width and height constraints to the contentView. If you want it to scroll, the width and height must be larger than the width and height of the scrollView itself. If you only want to scroll vertically, set the width of the contentView to be equal to the width of the scrollView. To do this, in the Document Outline view, control-drag from the contentView to the scrollView and select Equal Widths from the pop up.
If you want to be able to change the height of your contentView from code (to account for dynamic content), first create a height constraint for your contentView by control-dragging within the contentView and selecting Height from the pop up. Create an IBOutlet to the height constraint by control-dragging from the height constraint (found in the Document Outline view) to your ViewController's code. Give the outlet a name like scrollViewHeight then set the height with a value like scrollViewHeight.constant = 2000 when you need to change the scrollView's height.
Simply add your UIScrollView to your UIViewController's view in the storyboard and add the appropriate constraints in the interface builder.
Then, build your content view in the code and give it any frame you want, now start adding your controls to this content view and calculate the size of each one (especially the height), and at the end you have the total height of your controls.
Now set the frame of the content view to match that height and add it as a sub view to your scroll view, then set the content size in the code like this:
_scrollView.contentSize = contentView.frame.size;
Another note, do this changes to the sizes in the viewDidLayoutSubviews to avoid any problems with different screen sizes but be careful, this event is called many times so have a BOOL or something to ensure that the code that creates the view and add it to the scroll view is executed once, e.g. like this
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
if (! built) {
// Do everything I explained above here
built = YES;
[self.view layoutSubviews];
}
}
So I'm trying to create a UIScrollView only in storyboard that allows me to add scrolling labels for more than the height of the VC. Here's what I did:
Created UIScrollView that took up the size of the any width any height VC
Made constraints 0 for spacing to nearest neighbor on top, bottom, left, and right
Created a view that is a subView of the UIScrollView with the same width as the any width any height VC but height of 1500 (because I only want it to scroll vertically).
Set constraints to nearest neighbor as 0 for ONLY left, top, and right and set the height constraint as 1500.
I put a label at the top of the subView and at the bottom
When I run the app on an iPhone 6, does not scroll vertically as I want it to. Any ideas why this is not working? Thanks in advance.
To obtain the scroll you have to pin the sub view (the "content view") to the top, left, bottom and right of the scrollview.
In addition you have to give it (to the "content view") an explicit (=not related to the scroll view) height and width because these are used by the scrollview to calculate its content size.
In your case set the width equal to the VC main view width and the height to 1500.
When width or height are bigger than the scrollview size, it will scroll.
Scroll view constraints (pinned to main view)
Content view (pinned to scrollview + height 1500, width=mainview width) + label constraints (as an example: 20 20 from content view top left)
For an easier visualisation, I created a video on how to do that.
Video on how to create a vertical-only scrollview in iOS
Have you set the contentsize bigger than the screen itself? In your case, just bigger in height.
As Apple Documentation says:
"You must set the contentSize property to the size of the scrollable content. This specifies the size of the scrollable area."
The only solution is add constraints to the right and bottom of the bottom subview of scroll view's child view.
Also check if all the views from top to bottom have got proper constraints along with height.
For the scroll view ' s wrapper view add equal width and equal height constraint to its superview.