I am making an app that has a (child) View inside a Scroll View. I understand I have to explicitly set the child View's width since the Scroll View won't provide that information to the child, but how can I make this child View's width auto-adjust based on the width of the device?
For example, in the below I've set the width to 380 which centers the "Quotes" in iPhone 6, but makes them slightly right of center in iPhone 5.
You can use auto layout to set the width of your subView equal to your main View by performing a control drag from your subView to your main View like this:
Then select "Equal Widths" from the popup
Select viewController
Stretch the view you want full screen size to the size of the screen
Click the central icon from the three choices along the bottom of the window
You will an icon pop up
The top 4 values will have a dotted red line joining them
click them all
at the bottom of the pop up you will see 'add 4 constraints'
click this
Done!
You can delete the constraint for width. The view will place it self horizontally becuase of the leading and trailing space to superview. No need for a specific width.
I think your scrollview will be scrolling vertically so in that case you probably need to provide a constraint for the height or your view, and update scrollview contentsize accordingly to this.
Since your child view is located in the view hierarchy of your view controller's view you can assign constraints between your child view and your view controller's view.
Ctrl drag from your child view to your view controller's view. You will see option to set them to have equal widths. Select it. Then adjust the constant if you want the width of your child view to be lower.
You can then add leading and trailing constraints between your child view and your scroll view.
Doing it in this way will also ensure that you set the content width of you scroll view dynamically and correctly.
Let me know if it works for you
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 am using autolayout in Xcode and am creating a fairly tall (1300px) ViewController with a uiscrollview to navigate up and down. I made the viewcontroller freeform so its dimensions are [375,1300]. I then incorporated the scrollview, added the content view as well as all the subviews & constrained everything, leaving no constraint errors. At runtime there are no errors, but everything is all smushed into the normal screen size when I intended for it to be very tall (~1300px) and scrollable. Any clue as to what I am doing wrong?
Below is a diagram showing the issue where:
The Outer Black Blox is the ViewController's view
The Inner Black Boxes are subviews
and The Blue Box is what is displayed on the screen
Yes, your correct #Ryan Cocuzzo. I think you need to set sub view priority from 1000 to 250. See below screen shots.
1) Select height constraint of the subview
2)Then go to show to size inspector
3) Now change the priority constraint from 1000 to 250.
4)Finally you get like this
Make sure the following are true:
The 4 content views are subviews of the UIScrollView, not your view controller.
The autolayout constraints on the 4 content views must reference the UIScrollView only, not the view controller's view.
The 4th box cannot have a bottom constraint.
It looks like the 4th box has a constraint to make it's bottom align with the bottom of the view controller's view. This would force the other views to smush up together. The 4th box also cannot have a bottom constraint so that the scrollview can resize itself to encompass it's subviews.
I've been trying to create a UIScrollView for user registry but with no success. I'm using auto layout and all of the fields that go inside the scroll view are static. Because of the usual ambiguous height issue, I've added a UIView inside the scroll view, set the constraints to the margins of the scroll view and centered aligned it. After that I added all of the fields inside that Content View, in the storyboard.
The content fields have their constraints setup as you would expect, but when I get to the lowest field and set the bottom constraint to the bottom of the Content View then everything breaks.
I'm asked by Xcode to set the priority of some views, and when I do as is says, the Content View size stays the same and the views are shrunken.
I tried not to put the last bottom constraint and resize the Content View by code but the height is not resized as is should.
I'm looking for a good solution to do this in storyboards and auto layout.
Update: I added a bottom constraint with a low priority, but the content scroll view is not expanding to show all of the fields.
Add&Set ScrollView(UIScrollView)
Add&Set ContentView(UIView) with subviews
! Set ContentView Width equal to View Width
Set all subviews constraints
View1 should be tied to the top of the ContentView
View4 should be tied to the bottom of the ContentView
All SubView (View1, View2, View3, View4 ...) must have a height and distance between each other
P.s. In your case, if iOS > 9.0 you can replace ContentView with UIStackView
You are using auto layout so the size of the content view is determined by constraints. Follow the below steps to provide proper constraints:
Drag the Scroll View inside main view and provide constraints Top, Bottom, Leading and Trailing in align with Super View (Main View) as
per screenshot.
Take View which will contain your content and drag inside Scroll View. and provide the constraints Center X, Center Y, Top, Bottom,
Leading and Trailing in align with Scroll View as per screenshot
Put all the element inside content view which is a subview of scroll view and provide Top constraint relative to the element above
it, to make equal space between the elements (eg. label, button etc.)
(Make sure you provide required constraint for X-position)
Last element is "Register Account" button make sure you provide the Top Constraint relative to country and Bottom constraint relative to
superview (content view) and change the priority for Top or Bottom
constraint as per screenshot, otherwise it gives error.
Ok, here's what I'm trying to do:
I would like to create a scroll view to scroll vertically, in case my text is longer than the screen size (think iPhone 4 vs. iPhone 6).
I've added a scroll view and placed a view within that. I embedded by label for the text within the view.
However, the scroll view currently will scroll only horizontally.
Is there a way to constrain the label width to be the width of the screen? How do I do this?
You can constrain the width to contentview to be equal to scrollview width. And pin the four sides of label to the content view.
Also you will need to pin all sides of content view to scrollview, if you haven't already did that.
If you push the constraint button on the bottom of your storyboard pin it to both the left and right side. Uncheck constraint to margins and pin it both 0. :)
With Xcode 6, w:Any and H:Any, i want to make a view that can be scrolled horizontally, there is 4 view in the scrollview placed horizontally, and one is take full width, (see picture)
How to achieve this with Xcode 6 new universal layout paradigm?
i mean, i am confused with what constraints i should use for each element to make it work
As in Xcode 5 you need to make the contents of the scroll view a multiple of the outside of the scroll view, and both the scroll view and content view need there bounds to be fully constrained.
To do this for different width screens:
Make the scroll view and constrain its bounds.
Add a UIView into the scroll view to constrain the contents size of the Scroll view, we'll call it a content view.
Add constraints to the outside of the content view so that the contents of the scroll view is bounded by it.
Make the content view equal widths to the scroll view.
Edit the equal widths constraint so the content views width is a multiple of the scroll views widths (the multiple needs to be the number of pages)
Add relevant height constraint to the content view (probably equal height with the scroll view).
Here's a sample project that does this. For a more detailed explanation there is a blog post here