I have my ViewController in Storyboard. Everything seems fine in Storyboard, but when I build it on emulator, it shows strange white place on the side. When I changed the background of my View to blue color, I realized that white space was caused by my View. What can cause this kind of problem?
My hierarchy of wiews and constraints:
My Storyboard view:
View on emulator:
Make sure your scrollViews and contentViews LeadingSpace and TrailingSpace are 0, It seems you are leaving 20 pts from LeadingSpace and TrailingSpace.
Your constraints should look like this:
Make sure you set MainView/ContentView width equals to scrollView.
What you are messing is, you are setting scrollView width equal to ViewControllers View, remove that constraint and it should work hopefully.
Edit/Update:
I have done demo for test and it is working perfectly fine without any workaround. You can see below screen shot of Storyboard Preview for iPhone 5S and iPhone 6S Plus. ViewControllers view is in Blue color and ContainerView is in Orange color.
Here are the constraint of scrollView:
(While adding constraint make sure you press Alt button)
And the ScrollViews constraint are as below:
ContainerView Contraints:
And the ContainerViews constraint are as below:
One last thing, inside container view all view's should have top to bottom constraint in order to calculate the height required for scrollView. And also do not create conflicting constraints as - Setting imageView's LeadingSpace and TrailingSpace to ContainerView(SuperView) and at the same time setting fix width.
Related
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 have a label, an Image View, and a button in a vertical stack view. The alignment is set to fill, and the distribution to equal spacing with an offset of 10. On my storyboard, the label appears on top, the image in center, and the button at bottom.
However, when run on simulator or device, the UIView is stripped from the view entirely, so the label appears at the top of the screen, and the button directly below the label.
My only constraints are set on the stack views to the superview
Edit: Forgot to mention the UIImageView is inside of a UIView
I had a similar problem. My UIView in my UIStackView had only a Width constraint and would disappear at runtime. I found I could make it show up again with either of these options:
Add a Height constraint
Add a Top and Bottom constraint
I was having the same issue with a tableview in a stackview. Added the Height constraint to the view and it worked now everything shows fine
Setting a Y constraint on the UIView border caused it to appear when hitting the play button, but it grew outside of the screen bounds.
I had to set size constraints on the UIView in order for it to display properly.
I'm facing a problem with Autolayout. I want to setup a simple scrollview controller, with the following pattern View -> ScrollView -> View -> "All my content" explained everywhere when searching on the web.
Here is my Storyboard :
In theory everything is correct, but the Equal Widths constraint seems to behave very strange. I made a videos for you to be able to see :
https://www.youtube.com/watch?v=lAezdxg5L4E&feature=youtu.be
PS : The view controller is not linked to a *ViewController.swift, so there is no self-made code behind this controller.
How to solve that ? Thank you.
You have laid out your constraints for the wCompact hRegular size class, which applies to all iPhones in Portrait. When you switch to landscape, none of the constraints are installed which explains your issues. Convert your constraints to wAny hAny and all will be good.
After recreating your problem, I did this to convert to wAny hAny:
I went to each constraint and turned off the tick mark next to wC hR installed. You'll also need to do this for the ScrollView and Container as well.
Then I set the size class back to wAny hAny.
Then I went back to each constraint and ScrollView and Container and turned on the tick next to installed and deleted the wC hR one by clicking on the "x".
If you do this, your green Container view will appear in both Portrait and Landscape and it will scroll vertically.
Two hints:
If the reason you set wCompact hRegular was that you find it distracting to work with a square viewController, then click on the viewController in the Storyboard and set the Simulated Metrics Size to iPhone 4.7-inch in the Attributes Inspector.
You should really set Equal Widths between the Container and the ScrollView instead of setting Equal Widths between the Container and the top level view. In your case it doesn't matter because the ScrollView and its SuperView have the same width. But if your ScrollView wasn't the entire width of the screen, then you'd want to constrain the Container width to the ScrollView width to prevent horizontal scrolling.
If you are talking about the contentView(container in your app) of the scrollView if doesn't work like that.
eg. if you set contentView inside scrollview to equal width and height of the scroll view if wont work.
If subviews of containerView is complicated, normally I design contantView outside of scroll view. (see screen shot) and set it programmatically.
Or I just set auto-layouts equal width to both scrollView and container of scrollview too. (see screenshot)
I see you use size class, possibly you don't have contraint for iphone landcape
Ok, I tried the page with several buttons but all of them will not fit in one screen. So, I create the scroll view and the view and then put all of buttons inside the view. The storyboard look fine. Other devices such as iPhone 5 and 5S look fine but when I tried 6 and 6 plus, the size of scroll view was incorrect. I couldn't figure what went wrong.
You have to modify constraint for
scrollview with uncheck constraint to margin with all left right
bottom and top is zero
Container view to super view set equel width constraint
container view to scrollview set horizontal center constraint.
Each UIBUtton set top/left/bottom with constant height not set bottom constraint.
I have a viewController, which is configured for the iPhone5 screen size. In red rectangle is the view.
To make this view show properly in iPhone4 - I used auto layout. But when I specify constrains such as: leading edge, trailing edge, bottom space and top space (in top space I even made constraint's priority to LOW ) - the view still goes partially down the screen as if my constraints don't work.
BUT if instead of top space constraint I specify view's heigh and delete top space constraint - everything works perfectly.
Does anyone can explain it please? Thank you.
Thats because when you set up the top space constraint it will move the view by the constant you provided. iPhone 4 and iPhone 5 screen height is different but the constant remains the same so obviously it will behave differently. One way to troubleshoot your interfaces is to switching between iPhone4 and iPhone 5 on storyboard device on storyboard (first button from left to right on the bottom right corner of interface builder).
Auto-layout is all about experience in my opinion. I struggled alot with it until i learned. If you want your view to be attached to the bottom of the screen you should set the BOTTOM SPACE to 0 and specify the view's height like you did or adjust constraints for it's subviews so that the height is set dinamically according to the views inside.