In my app I have a Image for my background with labels on top of it that are not moving correctly on the iPhone 6 Plus. I am having trouble with the constraints to make the labels move correctly with the image. With the screenshot I attached what constraints should each label have to keep it aligned with the image? Thank you!
screenshot
this shows the suggested constraints
constraints
Your constraints aim on left alignment. So that's way it only works on the size that you were building on, and other display sizes are not aligned properly.
Try to, at least these:
add left leading constraint between superview and textField
add right trailing constraint between button and superview
add spacing constraint between textfield and button
set exact width constraint of your button.
... then add suggested constraint or add your own to them.
Like this (iPhone 6):
View as iPhone 6 Plus:
View as iPad Portrait:
... etc
Is that exactly what you asked?
Related
I wasted few hours on constraints and I am still having issue.In
iPhone 6 screen, it is working perfectly but it is not working in iPhone 5/4. I set all views (image is background) to have fix W/H and hit auto add missing constraints.
As you can see on iPhone 5 its always pin to right, sometime to left. I Can't add anything its comes with error.
Any help? or some damn good tutorial for this :)
I made an example just for one row of your buttons, so they can be reused for other UI elements.
I put these constraints onto my buttons:
LEFT BUTTON:
left leading constraint
top leading constraint
height constraint
RIGHT BUTTON
right trailing constraint
top leading constraint
height constraint
And constraints related to both buttons:
(you need to select both buttons to be able to apply relation constraints)
spacing constraint between buttons
equal width of these buttons
In Interface Builder it looks like this:
And these layout is universal, so I chose some device sizes to present:
iPhone 5
iPhone 6
iPhone 6 Plus
... etc.
Everything looks fine in IB. When I run my app using an iPhone5/iPhone6/iPad sims, it's completely mangled.
In IB:
In iPhone6 sim:
In the above sim, the buttons are cut. The textfield and textview are also cut. For the TF & TV, they are aligned center but trail off the edges on both sides.
I have the buttons width set
Editor > Pin > Widths Equally
The title label is set with a
Horizontal Center in Container
constraint
The textfield and textview also have
Horizontal Center in Container
and
Editor > Pin > Width
Is there some way to fix this?
-- EDIT --
After a few tries with constraints, looks like I have everything working except the two buttons.
Current listing of constraints:
As suggested by others, you should consider using the Auto-layout feature if you plan on constructing your views using the IB.
Here are some tutorial links:
RayWenderlich.com Part One
Youtube video This one covers a bit of size clases
Hope they help.
UPDATED:
I've read your updated post, you need to add width and height constraints. The view you see in the IB right now is 600 by 600 points, and the simulator one is smaller, which means that if you leave it as is, when you run the app you'll only see what the iphone screen has the capacity to show.
You need to add more constraints than what you used, try defining an equal width for the buttons, and assign the left one a left margin constraint, the right one a right margin constraint, give both of them vertical spacing constraint related to the text view or long label, the text view or long label should have left and right margin constraints, a height constraint and a top constraint to the textfield, the textfield should have a vertical spacing constraint to the label, also left and right and height constraint, and last the label should have leff, right and height constraints plus a top constraint to the main view.
I feel that those are all you need, but Xcode will through warnings at you if it feels you are missing something.
Try it, and let us know.
I have some issues with auto layout, hopefully some of you can help me =).
I add a UIView to an empty view controller, like this:
Then I add constraints for leading and trailing space, like this:
Which results in this:
I can't understand why it sets them as equal to -16.0. If I change those values to 0, then Xcode complains about the width of the gray UIView.
When I run the app on iPhone 5 simulator, it looks fine:
However, when I run the app on iPhone 6 Plus simulator it adds white space on the left and on the right:
I don't want the gray UIView to have any space from the left of from the right no matter how big the screen is. How can I fix it? Thanks!
Double click the constraint and open it. There select first or second item and deselect "Relative to margin". Then set your constant as 0.
Xcode is showing -16 because it is calculating space with respect to a margin and not the edges.
Check following link for more info on margins. Editing Auto Layout Constraints
You can clear all existing constraints on the view,and in Any*Any mode, add constraints for all 4 space to superview, which are Leading, Trailing, Top, Bottom. Then it will have the equal width with the screen no matter how big the screen is.
I am not a huge user of Interface Builder.
I am working with Size Classes of the kind Compact/Regular (for all iPhones portrait), right now.
I have added a button but this button is not scaling up for different sizes of iPhones.
What constraints I have to add to that button to make that button scale according to the screen?
Thanks.
If you want the button to get larger with screen size regardless or the aspect ratio of the button, add constraints for leading, trailing, top, and bottom from the button to the parent view.
If you want to maintain some aspect ratio, set constraints on leading, trailing, and top or bottom from the button to the parent view. Then set an aspect ratio constraint on the button itself.
In any case, be sure to set whatever numerical constant you want on the various constraints. Annoyingly, Xcode 6 does not seem to let you select constraints of different types and set them all at once like Xcode 5 used to. So it takes a few more clicks now.
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.