I have 4 buttons in an row, how can i align this in the middle on each device? iphone 4s, iphone 5s, iphone 6, iphone 6 plus.
Only on the iphone 6 it looks good. On the iphone 4s the buttons going outside the view and on the 5s and 6 plus is it not centered.
On the left view you see the layout, and the right view you see an preview.
How can i fix this issue? I have tried auto layout but this doesn't work..
Here with the constraint alignment (horizontal) on each button. But they are not in the middle..
thank you.
To align multiple buttons in the center of the canvas, you can place two "dummy" or "helper" views on each side. Then apply the following constraints:
equal width for the two dummy views.
leading space to superview = 0 for the left dummy view.
trailing space to superview = 0 for the right dummy view.
horizontal spacing = 0 for the dummy view and the button.
horizontal spacing = some fixed value for the buttons.
You can set the dummy view's height to 0.
Below is an example in the storyboard. For the sake of simplicity, I only included two buttons. You can have as many buttons as you like using this method.
I might be missing something here. But is it all that you need, to have multiple buttons centered vertically in the container and also horizontally (with no overlap and good symmetry). If so, you can do the below.
The constraints are -
Button A - Center vertically in container
Button B:Center Y = Button A:Center Y; Button C:Center Y = Button B:Center Y
Button A: Leading space to superview = some constant (say 30)
Button C: Trailing space to superview = same constant as above
Horizontal spacing (Button A - Button B) = Horizontal spacing (Button B - Button C) = some constant (say 10)
Width (Button A) = Width (Button B) = Width (Button C)
Related
I have 2 UILabels side by side. The one on the right grows as the content inside changes (using sizeToFit) and when it grows, the one on the left should shrink and truncate if needed.
Here are the current constraints I have:
The left label:
Leading space to superview: 8
Width <= 156
Top space to superview: 0
Height: 32
Trailing space to right label: 8
The right label:
Trailing space to superview: 8
Width >= 0
Top space to superview: 0
Height: 32
Leading space to left label: 8
Leading space to superview <= 172
Using what I have here the right label will grow as it should, but the left label will not shrink and truncate the text inside. What am I doing wrong?
Edit: Both labels should have a static height. The right labels width should grow and the left labels width should shrink.
For growing and shrink constraints each UIView have this methods:
contentCompressionResistancePriorityForAxis:// For setup shrink constraints
contentHuggingPriorityForAxis:// For setup growing constraints
Don't forget of priority.
p.s. Storyboards have same fields in params for each view.
I have a scroll view with the constraints:
equal width to Safe Area
equal height to Safe Area
Align Center X to Superview
Align Center Y to Superview
It contains only a vertical Stack View with the following constraints:
Align Center X to: SuperView
Proportional Width to Superview (multiplier 0.9)
Top Space to Superview: 0
Now, if I add enough items to the stack view, so that it exceeds the bottom of the Scrollview, I can't scroll it. Why is that so and how can I make it work?
here is my storyboard:
https://drive.google.com/file/d/1TZHl3d_HCptqx8ezcOpNJjH8RSitOln5/view?usp=sharing
In InterfaceBuilder, is there a way to add an
Align Center Y to
constraint? I can't find this type of constraint anywhere and I'm not sure how to create it by control + drag.
Align center Y to` = Center Vertically
Align center X to = Center Horizontally.
Press control on your element, hold it and link it to an other element, select Center ....
Is it possible to make the following in Xcode's Interface Builder with auto layouts, without writing any code:
step1 : Add 2 views(green and blue) into a stack view and set alignment and distribution as fill.
step2 : set height of the blue view as equal to the superview
step3 : edit height constraint of the blue view with multiplier 0.6 instaed of 1.0
now the views(blue and green ) will cover the screen with 60 % and 40% respectively
What I want to achieve:
Custom View 1
aligned at the top
fixed height = 20px
width = window width
Horizontal Split View
just below the custom view
width = window width
height = as large as possible
Custom View 2
aligned at the bottom
fixed height = 20px
width = window width
It's a really simple layout: a header and a footer at the top and bottom of the window, and a split view in between with some content to the left and to the right that should resize with the window. However, Apple designed the Auto Layout manager so poorly, I can't seem to get this to work. (I've fumbled around for about three hours now!)
The problem is: As soon as I give the custom views a fixed height, the window height is locked, I can't resize it vertically any more. I'm trying to do this with the following constraints:
Custom View 1
Constraints
height = 20px
Custom View 2
height = 20px
Constraints
Leading horiz space from Custom View 1 to Superview = 0
Leading horiz space from Custom View 2 to Superview = 0
Leading horiz space from Split View to Superview = 0
Trailing horiz space from Custom View 1 to Superview = 0
Trailing horiz space from Custom View 2 to Superview = 0
Trailing horiz space from Split View to Superview = 0
Top vert space between Custom View 1 and Superview = 0
Vert space between Custom View 1 and Split View = 0
Vert space between Custom View 2 and Split View = 0
Bottom vert space between Custom View 2 and Superview = 0
Top vert space between Custom View 2 and Superview = 344px (!)
The last line is added by Xcode, and I can't delete it. Of course, this is responsible for the fixed vertical layout. How can I get rid of it???
OK, I finally figured it out.
I had to leave IB's redundant constraint in, but give it a priority of 1. IB had given it a priority of 1000, always overriding my constraint.
Every view needs to have enough constraints for the layout system to calculate the position (x and y) and the size (width and height). If the system does not have enough information to calculate these properties, the layout is considered ambiguous. Interface Builder in Xcode will not let you create an ambiguous layout, so it will add constraint to ensure a fully constrained layout.
Based on your information, it seems as though subview2 is sufficiently constrained. However, I think maybe you haven't set the height of the view as a constraint. The frame you set for a view is ignored by the layout system. That would introduce ambiguity. Try adding a height constraint to subview2.