I have the following components:
What I would like to do is have the same sizes for the leading and trailing constraints of my view on the right, whatever the size of the screen is.
I though about adding two views as placeholders. The first one starting on the left edge of the main view and finishing on the middle of the big orange square. And for the second one, starting on the middle of the big orange square and finishing on the right edge of the main view. Then both small orange squares would be centrally align inside.
But I was wondering if there was a better way whether it's by code or with the Interface Builder.
I think you can reach this by setting the priority to the constraint between the big orange and the view on left to Heigh or low
And required priority to leading and trading to the view on the right.
Maybe I'm missing something, but why not simply:
Pin Blue Leading to BigOrange Trailing
Pin Blue Trailing to SuperView
Center LittleOrange inside Blue...
And turn Blue transparent at runtime.
Related
I am trying to create three containers (UI Views) as in the following example:
As you can see, in my case the TopContainer (the orange one) and the BottomContainer (the red one) have different dimensions. Also, I have a MiddleContainer (the white one) which is NOT located in the middle of the screen or in the center. In fact, the BottomContainer is a bit larger than the TopContainer.
Question: how can I keep them constrained no matter which phone my user has?
I tried to constraint the three components to the margins and between each others but it's not enough because, in that case, XCode argues that for each component the height and the width are ambiguous. Therefore I tried to maintain also the Aspect Ratio for all the three components and it seems to work, but with iPhone X (like iPhone XS) I get a ugly bottom line, so the bottomContainer doesn't fill the whole screen.
I know that there should be a "Bottom Space to" to set up for my BottomContainer in order to solve this issue but apparently I have it not, as you can see on the right side of the following screenshot:
Do you have an idea of what I am doing wrong? Do you have an alternative way to proceed?
I would solve it with a UIStackView with two UIView (orange and red). The UIStackView is set to distribute Fill Proportionally.
The orange view is the size of your orange view plus the size of the white view.
Then I'd add the white view as a child to the orange view and constrain it to the bottom of that view and with a fixed height.
To get rid of the bottom gap, set the bottom constraint to Superview instead of Safe Area.
See the screenshot for details:
As per your comment, I think this is what you can do!
Align the "middleComponent" to the center vertically, to its superview.
Set the height to it, as you want to have a fixes height there.
Then pin the "topComponent"'s bottom to the top of "middleComponent".
Pin the top of your "topComponent" to the top of the superview.
Pin the top of your "bottomComponent" to the bottom of the "middleComponent"
Pin the bottom of your "bottomComponent" to the bottom of your superview.
All these views will have have their left and right pinned to the superview's left and right.
Hope this helps
I'm just getting started with iOS development, and I'm following a series for making a game.
I want to align the circle (see screenshot) but there is no constraint for left
How can I make sure it aligns left for example on the iPhone 4 (see screenshot).
Xcode version (7.3.1 (7D1014))
Option 1: Hold control button, drag to the left and select `Leading spaces to container. The object that you are defining the space from should be highlighted. You should get the following menu:
Option 2:
1. Select the object
2. Press the pin button
3. Set the distance from the frame
4. Pressed the red button
5. Select Add constraints
Leading is left, and Trailing is right
First step, the most important one :
Remove that circle, and make sure your view has no constraint exception (look at the debugger) and that everything is where it should, on all phones. Ff that is correct, move on to the next steps.
Technically you should just be using Left or Leading, they're almost identical. (Leading is actually different, it'll align to the right in Arabic localized phones for example).
So what you wanna do is make sure your view has all its constraints set correctly, obviously, and for what I'm looking at you just need Top, Bottom Left and Right (or Leading and Trailing).
Just drag & drop from the circle to the view that is supposed to be the "anchor". For example, I'm guessing your top left circle will have its Left constraint going against the border of the view, and Top/Right/Bottom will be against the black bars. Easy.
For the left, drag & drop between the circle and the superview (the uppermost view in the hierarchy) and select Left/Leading. Then select the constraint and look at the properties.
Look at the image I have as an example. If you see the constraint properties on the right, I'm saying :
First item = "The leading side of my message box"
Relation = Should be equal (in distance)
Second Item = To the leading side of the Header label
Its plain english, the left side should align to the left side.
Your case is similar, you want the left side of your Image to be aligned with the left side of the View !
Now the 3 others constraints are sliiiiightly different, because you don't want Right-on-Right, Top-on-Top and Bottom-on-Bottom.
You actually need the Bottom of your circle to be aligned with the Top of the view under it, the Right of your circle to be aligned with the Left of the view on its right, and the top of the circle to be aligned with the bottom of the top bar.
Following?
Now you can adjust these constraints, you have a "Constant". This is the distance that the "Equal" refers to. If you say "the distance between this and that should be equal to zero", the two views will be sticking together. So usually you can add some margin.
Important note ! If you use the drop down for each Item (first and Second), you will see you can tick/untick margins ! This is important, it automatically adds Apple-advised margins, which is a value of 8, that is counted on top of the Constant value. So if you HAVE a margin and a constant of 0, you actually have a spacing of 8. This is to make your life easier because you'll usually have many margins and its easier to count from zero.
Any question?
I have three views I want to divide in a superview.
Currently, when I set proportional heights, I get weird results when updating the multiplier in those constraints.
As you can see, there is weird space between the top and the first proportional view and the second.
I want no room in between.
Who can help me out?
Two things immediately
It would be simpler to set the proportional height in this case between each of the views and their superview. This may not be what you want but either way my example below would work with slight tweaking
You only need to set two of the views to have proportional height. The third view (the one in the middle) can just take up the remaining space in between them.
See the Red, Green and Blue views -
The red view hugs the top, left and right and has a proportional
height
The green view hugs the bottom, left and right and has a proportional
height
The blue view hugs the left and right and has vertical spacing (zero)
to the red view and vertical spacing (zero) to the green view.
I have this layout when running it on an iPhone 6, which is EXACTLY what i want:
However, here it is when running on the iPhone 4S (or on the iPad):
I really can't wrap my head around this. As you can see, the above picture has the text leaving the area, and the image being "shrunken". It is as if, the first image has the image resizing itself, and in the latter the text is filling up the blank space. How do i fix this?
EDIT
Here are the constraints for the left-side image, and the right-side table:
Left image:
Right table:
And here they are selected in IB:
am not sure what you are doing with other elements but for the table and image i can suggest you those constraints. first clear all constraints of these two element and then try those.
for table in right side -
top to superview
bottom to superview
width - fixed
trailing to superview
for image on left
top to superview
bottom to superview
leading to superview
trailing to superview
put constraint values are according to your design. this will keep the right side table fixed width and resize the image to fill the rest of gap. i think this will solve your problem.
So, it's a little hard without being able to try out the layout myself, but here's what I think you need to do:
On your left image, remove the "Trailing Space To Superview" constraint.
On your right tableview, add a Width constraint, constraining the table to its current width.
This means the text in the table will stay in the same location, and the left image will grow or shrink depending on the space available.
In the above, the orange, blue and green views are subviews of the yellow view. I need the parent (yellow) view's borders to hug its subviews. The only movement that's occurred between the two images is the green subview moving up and to the right.
Because the bottom of the orange view is now lower than the bottom of the green view, the parent view hugs the orange view's bottom edge.
Similarly, because the green view's right edge is past the blue view's right edge, the parent view hugs the green view's right edge.
Is there a way to do this with Auto Layout constraints, or would I have to write custom code?
For the bottom edge, both the orange and green views require two vertical space constraints each. They are:
Vertical space constraint with relation set to "Greater Than or Equal" and constant set to 0.
Vertical space constraint with relation set to "Equal", constant set to 0 and a priority lower than the first constraint.
The first constraint ensures that no matter what, the space will be greater than or equal to zero. The second constraint says if possible, also have the space equal to exactly zero.
The above can then be replicated for the right edges of the blue and green views, using horizontal space constraints instead.