This question already has an answer here:
How to set the NSLayoutAnchor to generate an centered subview with aspect ratio 1:1
(1 answer)
Closed 4 years ago.
I have a view and it's subview. I want to define subview constraints to be the following:
Center X & Center Y of view and subview coincide (easy!),
Subview width & height are equal to
min(view.bounds.width, view.bounds.height)
How do I express this in terms of Autolayout constraints?
Here's one option:
Aspect Ratio of 1:1 with Priority: 1000
CenterX & CenterY with Priority: 1000
Top / Bottom / Leading / Trailing all set to >= 0 with Priority: 1000
Width = SuperviewWidth with Priority: 999
Height = SuperviewHeight with Priority: 999
Related
I have the following two texts the Timer constraint works fine. However when doing the complete same with Score just using leading constraint it's stuck.
Anyone has an idea what I'm missing?
Because leading has zero value unlike trailing which = view width , so applying multiplier to zero results in a zero
You can make it with centerX / trailing also
Just change the leading Constrain of Score to Superview.Trailing instead of Superview.Leading :
And then set the Score constraint multiplier to 6.27.
I will update the answer with the calculation I made shortly.
UPDATE:
The multiplier of Score.Leading constant to Superview.Traling constant is :
multiplier = View.width / (View.width - View.width / 1.2)
In my case the View width in iPhone X is 414
414 / 1.2 = 345
414 - 345 = 69
414 / 69 = multiplier
I am trying to improve my app to looks the same on every iPhone device. I started designing on iPhone 8 plus.
I added 3 buttons to the view and set 3 constraints(width/height and aspect ratio) 1st button = Width:300 Height: 65 aspect ratio
2nd button = Width: 175 Height: 65 aspect ratio
3rd button = Width: 200 Height: 65 aspect ratio
I added them to stackView and set some options(axis: vertical , alignment: center ,distribution: fill proportionally, spacing: 19)
Now i want to set the stackView so it will looks exactly the same on every device.. When i add 3 constraints (top/right/left + aspect ratio) i dont get the results i want. Any idea what i am doing wrong?
Set stackView distribution = FillEqually , then when you give stackView these constraints
top , left , right and aspect ratio
any item will have it's height resized , and give each one the aspect you want so the width will stretch accordingly
I applied flexible height & width to my UILabel and now I want to use that type of functionality by using Auto Layout.
I am able to increase height and width of UILabel as Device width and height, but X and Y is not changed according to Device width and Height.
Ex:-
Device :- iPhone 7
UILabel :-
X : 20
Y : 120
Width : 300
Height : 30
Device :- iPhone SE
UILabel :-
X : 20
Y : 120
Width : 245
Height : 25
Now problem is that Size of UILabel decrease with aspect ratio but X & Y coordinate was not changed.
According to flexible height & width that will set like 17 & 102, but in auto layout it was not change.
Constraint :
Constraint Image
You have fixed X and Y Position for your label (Which is not device specific)
If you need to achieve this you need to set X and Y according to Centre of your view
I have create to set centre X (For Y Pos )
And How I have set centre of Y Pos
EXPLAINATION
The centre of UIView according to self.view is 318.5 and required space from top is 20 so final multiplier is 20:318.5
as every view has different centre
For Iphone SE centre would be around 17
Don't Forgot to set First Item to Label.Top as we need 20 from TOP
OUTPUT:
Hope it is clear to you :)
I have attach a image to make a label height dynamically. Select trailing constraint and change relation from "Equal" to "Greater Than Equal". Make sure number of line of label should should be "0".
I'll briefly explain the situation: There is a ViewController VC and a View V inside it with the following layout constraints:
horizontal (left and right) spacing to VC is 0
vertical (bottom only) spacing to VC is 0
aspect ratio 75:23
like this:
____
| |
| |
|____|
|____| <- V
I wanna place place 3 view inside V, so lets say we divide V in 4 pieces:
___________
| | | | |
| | | | |
|__|__|__|__|
I wanna place my new 3 Views V1, V2 and V3 like this:
___________
| | | | |
| [1][2][3] |
|__|__|__|__|
that is, all centered vertically on V middle and the View Vi on (i/4) of V width.
How can I do this in storyboard (without code) ?
Connor's answer would definitely work, another thing you could do is use the NSLayoutConstraint Multipliers. Here are the steps:
1) Create three different UIViews all of equal width. For this example I used UIImageViews but that's irrelevant for this purpose.
2) Set each one to have the same vertical constraint (i.e. 50pts from the bottom, or set each one to be "Vertically Centered In Container"
3) To space them out evenly on the horizontal plane, you could set them each to be "Horizontally Centered In Container".
4) Once each view is horizontally centered in the container, change their multiplier to determine the distance the view's center point on the x-axis is from the superview's center point on the x-axis. If you wanted the three views to be spaced evenly, I would set the multipliers at (0.5, 1.0, 1.5) respectively.
Here's an image that show three views with a width and height of 50:
EDIT - To explain even further:
What's happening here is you're setting the center of the subview on the x-axis to align with center of the superview's x-axis, but when you set the multiplier you're telling it to be set a fraction of that distance. When it's set to 1.0 you're saying you want the subview's centerX to be 0.5 the width of the superview. When you set the multiplier to say 0.5, You're essentially saying you want the centerX of the subview to be 0.5 of 1/2 the width of the superview (1/2 * 1/2 = 1/4) so you're setting the centerX of the subview to 1/4 the width of the superview. Same thing with 1.5 - you're then saying you want the center of the subview to be 3/2 of 1/2 the width of the superview (3/2 * 1/2 = 3/4) so the subview's centerX would be 3/4 the width of the superview.
This is a great case for a UIStackView. Configure your container view (V) as:
let myContainer = UIStackView()
myContainer.axis = .horizontal
myContainer.alignment = .center
myContainer.distribution = .equalCentering
The axis tells it to stack subviews horizontally. The alignment gives the alignment for the non-axis; that is, it vertically centers each subview. And an equalCentering distribution will tell the stack view that the space between the centers of each subview should be equal.
Then all you need to do is configure the size of each subview (ie. add a programmatic constraint for width, dividing by the container width), and addArrangedSubview for each subview.
I've put the following constraints to my UIImageView (Name = RunwayGallery):
Width: >= 200
Width: <= 600
Align Center X to: Superview
100:133 Ratio to: RunwayGallery
Top Space to: ImageAbove, Equals 10
So why is the UIImageView always 200 width? Even when there is enough screen space on both sides (and below) to enlarge the UIImageView to fill the screen.
Many thanks.
Don't define the width of the image view in constraints. Define the padding that you want to the left and the right of the image view. Then auto layout can make your image view as large as possible without growing too large.
You need to add more constraints to tell the UIImageView which width between 200 and 600 to choose.
What do you expect the width of the superview to be? Assuming the superview's width will be between 200 and 600, you can tell the UIImageView to fill the width of the superview by removing both width constraints and adding the following constraints:
Leading Space to: Superview Equals: 0
Trailing Space to: Superview Equals: 0
Now the UIImageView knows to stretch so that there is no space between its leading (left) and trailing (right) sides and the superview's leading and trailing sides.
Alright, I've mixed some of the answers of you guys and came up with this:
Leading Space to: Superview Equals: 0 (priority 900)
Trailing Space to: Superview Equals: 0 (priority 900)
width <= 600 (priority 1000)
This fully works. It makes sense if you think about it. It is filling to both sides with the leading and trailing space, UNLESS it becomes greater than 600.
Thanks for the answers! Appreciated.
EDIT: This is still the same:
Align Center X to: Superview
100:133 Ratio to: RunwayGallery
Top Space to: ImageAbove, Equals 10