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?
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 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.
Why the pin constraint doesnt work? I have no constraints, and I want to pin one view to bottom of main view, so I select the child view, then I click the icon from "w:Any h:Any row" in Interface Builder bottom right (Pin), then i click the bottom "I" to create bottom constraint, but if I resize the controller view (in design mode) the view is not moved but something like this appears: (The red line with number - instead of moving the blue view to bottom).
I have pinned it to "bottom layout guide". I also tried to pin it to "view" from dropdown while pinning, but that doesnt work too.
If I look on the "Issue navigator" there is only warning saying "Position and size are ambigious for View"
Without any other other constraints there is no way for Xcode to know what you want to do with the view, all it knows is that you want the bottom of your subview to stay 99pts away from the bottom of the superview, but doesn't know what to do with the top, left, or right edges.
Try adding constraints for the remaining 3 edges, it can be as simple as setting the width and height (the options under the bottom edge in your screenshot), or something more complex depending on what you want to achieve.
You need to define the position of view properly. So that constraints can define position and size of the object.
Like in your case you have only provided constraint from the bottom, which will not be sufficient to define position. So you need to define either Height and Width constraints or top, left and right constraints.
And as long as long red line is being shown keep adding constraints.
I want to have 15 buttons equally spaced between them and correctly leading and trailing the superview vertically. I set constraints so that the left set of buttons aligns to the left margin and the right set aligns to the right margin. The first button leads from the top margin in each set, and the remaining buttons each have a constraint for vertical space set to the upper neighbor. I thought this would be enough to make it work but it wasn't. As you can see, for an iPhone 4, the number of buttons displayed on the screen is only 12 so I would definitely need to somehow dynamically change the button size depending on the screen size. I am attaching a screenshot from the storyboard that shows the Any x Any editor view and a preview for the 3.5-inch screen.
This was really easy to accomplish using stack views. Simply select all the buttons and click the leftmost icon (bottom right side of left pane) which is named Stack, and see the magic happening!
Try to set the constraints like this:
First select the all elements on left side and give leading constraint:
Now select first element and give top constraint:
Now select the second element and select it , and drag it to first element and give vertical spacing: , repeat giving vertical spacing for all the elements, So that each element will be vertical space constrained with its top element!!.
Do the same for elements on right side.
Give the trailing constraints for all elements on left,
and the select top element and give top constraint
and then select one element below top element and give vertical spacing between those two, repeat it for all the elements!!! So that each element will be vertical space constrained with its top element!!
Note: I only gave left constraints, you can try for right side too!!!!!
Add height constrain to the top left button to be 1/15 of the superview height and for all buttons let their height equal to the top left one.
Note it will work only if the vertical spacing is zero between buttons.
If you have a vertical space value for example x, then set it as 1/15 - 14 * x
Note #2 in iOS 9 only, seems the stack view will help perfectly in that
I've got a widget that is not laying out correctly on device (its looks OK in IB, but its not quite right). The widget is a label and its located about mid-screen. Interface Builder gave it a Vertical Space Constraint with a 'Bottom Anchor'. Here, bottom means bottom of the screen (rather than a widget below, or anchor to top screen).
I'm in the inspector, but I don't see how to change to a top anchor (preferably, to the widget above). I tried reading Apple's docs and Editing Constraints in particular, but it was a confusing and did not explain how to make the change (or I missed the discussion - which was 7 sentences).
Below is a screen capture under Interface Builder showing the Vertical Space Constraint anchored to the bottom of the screen. And its attributes leave a lot to be desired - Equal, Constant and Priority don't really help.
Does anyone know how to edit constraints? Specifically, I want to (1) change a vertical spacer's anchor from bottom to top; and (2) anchor against the widget above, and not the top of the screen.
Select the "Embedded" and the "Calculated" element together by shift-clicking.
With those two elements selected, use the constraints menu:
This menu, together with careful selection of elements, is central to happy editing of constraints in IB. In your case, choose the central item, the Pin menu. Choose Vertical Spacing - this will create a new constraint on vertical spacing between your two elements. Alternatively, select a single element and pin "Top space to superview" to pin to the top instead of the bottom.
You can now select and delete the vertical spacing to the bottom of the view. IB wouldn't let you delete this before since you have to have a complete, non-ambiguous set of constraints. After adding your new vertical spacing constraint, you now have this.
To illustrate further, here is an empty view controller, with a single text field which I have dragged on:
All of the constraints are purple, which means IB has added them for me (they are System constraints) and they can't be removed - they are the minimum constraints needed to position and size the text field.
Now, I'll select the text field, and pin the top space to the superview:
Now you can see that the two vertical space constraints have changed to blue (they are now user constraints) and they have a thicker appearance in the editor. This means that one of them can be deleted. I select the constraint for the bottom space and hit delete:
Note that this still has the appearance of a user constraint - but if I try to delete it, IB will automatically recreate the system constraint pinning to the bottom of the superview, getting us back to square one.
I have written about this, and similar autolayout topics, here.
I got one word for Autolayouts. If it works, it works but if it does not, then use the old fashioned way (use code)