I have to admit that I'm not a big fan of Auto Layout. But I guess I need to use it because of iPhone X.
Anyway, I have a simple layout. I have a map view (MKMapView) object and a view (UIView) object in pink at the bottom.
I have two layout requirements. (1) The top of the map view must sticks to the safe area. (2) The bottom of the pink view sticks to the superview.
First, I select iPhone X as a layout device.
As for the map view, I select the safe area and the map view and add align to top edges. I also add align to left edge and align to right edge. So I get the following.
As for the pink bottom view, I select the (super) view and the pink guy to add align to bottom edges. I then add align to the top, left and right edges. Also, the height is set to 48 pts. So I get the following.
Now, if I switch the layout device to iPhone 8 Plus, the layout will hold. But if I switch from iPhone X to iPhone SE, it will miserably break as shown below.
How can I maintain my layout regardless of devices? Thanks.
I can't completely replicate what your screenshots show; in particular I can't get the top level View to have the descendant constraint of "Bottom Space to Bottom View". I suspect you have some other constraints that are causing the conflict. I think it would be best to start over on this view controller to make sure you don't accidentally add constraints that don't belong.
Drag a Map Kit View and a View into this new controller, rename the View to "Bottom View" and add new constraints to the Map Kit View like this:
Then add the constraints for the Bottom View like this:
Related
I am extremely bad at creating layouts for multiple screen orientations. All along I've been using suggested constraints on Auto-Layout but sometimes they don't work as desired. I've been trying to learn how set up my layouts properly by reading and watching tutorials, but I still cannot understand how exactly constraints work!
What I am trying to do is to make the button widths equally like so in iPhone 7:
But on other devices such as iPhone 4S, the second button width shrinks, which is not what I wanted:
Can someone please explain to me how constraints work in layman terms? I do not understand things like:
Leading/Trailing Space
Constrain to margins
Equal Widths and Heights
Top, Bottom, Baseline etc. (What do they even mean?)
Here's how to make two equal-width buttons:
Create two buttons
Add a vertical position constraint to each button. For example, you could position them in the center of the parent view using the "Align->Vertically in Container" function (in the lower-lefthand corner of the interface builder window)
Select both buttons. Add an equal width constraint between them using "Add New Constraints->Equal Widths"
Constrain the left edge of the left button to the leading edge of the parent view
Constrain the right edge of the left button to the left edge of the right button. Add space between the buttons using the "Constant" property of the constraint you created.
Constrain the right edge of the right button to the right edge of the parent view
Hope that helps! š
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 went through ray wenderlich's tutorial about autolayouts (link) and then began working on a demo project thinking I've figured it all out but I was wrong. As shown in the screenshot below I have a navigation bar, 2 views and 1 button. The layout on portrait mode looks fine without adding any constraints on views or the button, and understandably in landscape mode views are messed up. I tried adding following constraints on views and those don't seems to work.
View#2: Select view 2 > Editor > Align > Horizontal center in container (hides view completely)
Add Top space to superview. Again view goes away from both landscape and portrait preview.
If I can display view#2 correctly I am planning to add vertical space between view#2 & view#3 and then between view#3 and button#4.
My main concern is to resize the views so that it shows all views and buttons in iPhone 4s landscape mode. Any advise or suggestions are appreciated.
EDIT: Here's the end result that I am trying to get:
The reason your views go away when you add constraints is because a UIView has no intrinsic content size, so its size is {0,0}. The view appeared when you didn't add constraints because the system adds constraints for you, if you don't add them yourself; the system added ones are top, left, width, and height. So, you need to set the size of the views somehow. You can give them explicit size constraints, you can pin them to the edges of the superview, you can give them relative heights based on other views, etc.
Since you want the 2 views to get proportionally smaller in landscape, you should give them heights that are relative to the superview. You do this by selecting the view and the superview, and choosing "Equal Heights" from the pin menu. Edit that constraint to change the multiplier to something like 0.25 for the blue view and 0.2 for the orange one (this assumes that orange or blue view are the first item in the constraint -- if they are the second, then you should use the inverse values of 4 and 5). You should also do the same for the widths, since it seems you want them to get proportionally smaller too.
Hey, I'd like to obtain what you see in the pictures: in Compact Height mode (landscape iphone) both the red and the blue view have to take all screen vertically and half the screen horizontally. In Compact Width mode (portrait iphone)they have to take all the screen horizontally and half the screen vertically. Space between views should be same size in both modes.
I used to think I have to use size classes and auto-layout constraints, but everything I tried failed miserably.
Maybe I have to use a UICollectionView and change flow direction based on orientation (if that is even possible)?
A collection view is probably overkill, because you don't want scrolling and that's the whole point of a collection view--by the time you do the sizing to stop it you'll have done all the work necessary to set a non-scrolling layout.
This is possible with Size Classes in IB. First, In general you will probably find it helpful to name the views in the Document Outline on the left in IB. You will also want to use this outline rather than try to grab the tiny constraint H-lines.
Set up all the constraints except 1) constraints linking the
OrangeView and BlueView to each other, 2) the constraints linking
the OrangeView to the top and left(leading), and 3) The constraints
linking the BlueView to the bottom and right (trailing).
Change the size class setting at the bottom to w-Compact and
h-Any in the funky box system. Now we're designing for a compact width, so views on top of each other.
Create a constraints for vertical space for BlueView.bottom to
OrangeView.Top. Also create constraint for OrangeView to
superview.leading (or ledaing,margin) and BlueView to
superview.trailing.margin. If you select any one of these constraints and look at the Size Inspector on the right (the ruler) you should see an "installed" checkbox not selected, and below that a w-Compact h-Any and another installed box, this one selected.
Now, while keeping the constraint selected just to see what happens, change the sizeClass selector at the bottom to w-Regular h-Any. Notice that in the Document Outline to the left, it should get grayed out.
Now we are designing for regular, so side-to-side. Add constraints linking the views for horizontal space, BlueView.trailing to OrangeView.leading. Also link OrangeView.top to the superview.top or top aligned to BlueView.top, and same for bottoms. You can manually edit the frame first; if not, IB will automatically fill in the wrong values, so edit these after you create them, and verify they are w-Regular and h-Any. With the ViewController selected, select "update frames" and the views should snap to their expected shape for the size class.
Let us know if this works for you or if it was unclear. Good luck!
I am attempting to layout a screen design using constraints (auto-layout) from interface builder and hope to avoid coding constraints, but I would accept an answer for either case I guess.
I have two subviews in a contained in a top level view. I want to fix vertical distance of the first subview to the top of the screen (I was able to accomplish that - common use case for a vertical space constraint). I want the second subview to float (vertically) in the center of the distance between the bottom of first subview and the bottom of the screen. The idea is that the design responds somewhat to iPhone 3.5" vs 4" dimensions.
I am having trouble defining a constraint or set of constraints that would accomplish this.
I have tried setting inequalities on the vertical spacing constraints between the second subview and the top of it's neighbor (the first subview) and the bottom of the superview, and playing with the priorities of those constraints.
An idea that was suggested in a few other related posts on SO is to use a container that is pinned to the bottom of the screen, as well as the pinned to the bottom edge of the first subview, and then center my second subview in the container. I was hoping to avoid complicating the view hierarchy if possible, but maybe that isn't easily avoided.
Any thoughts or suggestions?
UPDATE
This answer describes how to do this in Xcode 6.0 (and probably works in Xcode 5.0 and 5.1).
ORIGINAL
If you want to do this with auto layout, you have to add at least one spacer view. It doesn't have to be the superview of the vertically-centered view (or any other view), so it has a pretty minor effect on your view hierarchy.
I recommend not trying to set up constraints in Interface Builder in Xcode 4.6.3. It's just too painful. But if you really must, this is doable.
Create a spacer (a plain old UIView) from the bottom edge of the top-hugging view to the bottom edge of superview. Set it to hidden. Give it constraints to the top-hugging view and the left and bottom edges of the root view, and pin its width. My spacer width is 10:
Add your middle view (here, a button). Give it a āHorizontal Center in Containerā constraint. Then select both the middle view and the spacer view and give them a āVertical CentersāĀ constraint:
Note that if you drop the middle view when IB is showing the correct guidelines, it will set these constraints for you.
You can test by enabling resizing for descendents (but not siblings & ancestors) and resizing the root view in IB. The middle view will remain centered between the top-hugging view and the bottom of the superview: