Am new to iOS & am facing it very difficult to set autolayout. Watched many videos to learn, but all of them giving solution to a specific problem. No video covers all base rules to set an UI object into it's place & with proper flow.
I came from Corona Background & used to set UI programatically very well. Am thinking here same way, but I think apple made it so difficult or people are not able to explain me properly.
Please see 2 images attached in this question & tell me rules to apply to achieve this UI. I request you people to please explain in the general manner so that my other screen can be completed using same rules.
Image 1: http://i.stack.imgur.com/MPE47.png
Image 2: http://i.stack.imgur.com/qEiCm.jpg
A really helpful guideline is
Every element should be able to figure out its position (x and y) and size (width and height).
Ensure that every element only has one way to figure out its position and size.
Remember that the autolayout of all the elements can influence each other.
The most used layout constraints are:
Top The space between the top of the view to another view.
Trailing The space between the right edge of the view to another view.
Leading The space between the left edge of the view to another
Bottom The space between the bottom edge of the view and another view
Width Assign a fix width to a view (Note that it can also be a percentage - aspect ratio)
Height Assign a fix width to a view (Can also be a percentage)
Center Horizontally Always align the view relative to the horizontal center of another view
Center Vertically Always align the view relative the the vertical center of another view
For example in your second image, say the yellow bar is a UIView called titleView.
Set the position of titleView by setting the top layout constraint to the container view. y position is set.
Set the leading constraint to the container view. x position is set.
Set the trailing constraint to the container view. The view's width will now stretch with the screen size. Thus width can now be determined.
Set height to 50. Height is set.
Now... If you also set the width of this view, it will cause the layoutConstraints to break, because you have redefined the width constraint. Some of the constraints will then be ignored.
Another example of how layoutConstraints might influence each other. Lets look at determining the y positions of the second image.
Say titleView has a top constraint to the container + height of 50.
currentCampaignView has a top constraint to the bottom of titleView. (Use vertical spacing) + equal height to titleView. (y + height can be calculated)
the 5 buttons have equal heights. Top buttons have Top space to Bottom of currentCampaignView. Centre buttons have Top space to bottom of top buttons. Bottom button have Top space to bottom of centre buttons.
startCampaignView has equal height to currentCampaignView. Top constraint to bottom of bottom button and Bottom constraint to container view.
Note that because views and buttons have equal heights, all are considered when determining the height. Thus it is very important that they are all interlinked and that the entire height that can be used is specified. In this case it is specified by the first element titleView that has a Top Constraint to the Container view (of which the height should be known) and the last element, startCampaignView, that has a Bottom constraint to the Container view. Because all the views in between are linked on y position and height, the view can work out what each view's height and y position should be.
One more example. (Your first image)
topLeftButton Set the top constraint to Superview. (y), Set the leading constraint to Superview (x), Set height = 100 (height), Set equal width to topRightButton (Note that we do not quite have the width yet, because the width of topRightButton can not be determined)
topRightButton Set the top constraint to Superview. (y), leading constraint to topLeftButton (will be used for x), Set trailing constraint to superview. Now the width of both buttons can be determined, because we have an external startX + endX and we know the two buttons touches each other and are equal widths. Thus the available space will be split to get the width of the two buttons.
Related
I am trying to do the constraints for these horizontals button. I want the ratio of size of buttons to be the same, and the icons to be of equal widths and heights of each others.
Any idea of how i can do that so these buttons resize properly according to the screen size? Thanks!
Make groups of UIView containing the icon and text. Lets call this container view
Place all the n container views inside your storyboard as you would like them to appear. Now:
To the left most container view add a leading and bottom constraint to the super view.
Now to the second container view add a leading space of 0 (or anything you want). Control + drag your second button to the first button. Hold down shift and select equal width, equal height and align bottom.
Now apply the same constraints as your second container view to all your n - 1 container view. n being the number of container view you want to add. Now to your last (nth) container view add, one extra constraint, which would be a trailing space to the superView. Now all your container view ought to have an equal width that will be determined depending on the width of the screen!
If you want to have a specific height or aspect ratio to all your container view. Just add the height or aspect ratio constraint to your first container view and all your subsequent views will get updated accordingly.
OR
If you wish for the height to be dependent on the screen size and not maintain a specific aspect ratio, then you will have to give the first container view a equal height to the whole view with a specific multiplier like 0.15.
You will also have to add appropriate constraints to the icon and label present inside each UIView
Edit: A much easier thing for you to do would be add the icon as an image to the UIButton and add the text as you would normally to the UIButton. The UIButton will appear quite similar to the screenshot you posted. And then just apply the constraints I mentioned above.
Set the width and height as ratio of the SuperView. Set if for one button and for the remaining buttons make the height and width equal to the first button for which you defined the height and width in terms of superview height and size. Use this SO Post to see how to set height and width as ratio of the superview.
Hope this helps.
It's Simple because your All buttons are in single Direction so you can use StackView.
Just simple first apply the equal hight and equal width to all your buttons
now select all the buttons and add them in the stackview
it will be in the right side bottom. (with the constraint icon)
now simple Apply add missing constraint. it will done the work by own and gives better result. (but take care here apply it from the all views in View Controller Section)
And now Bingo try this every Size will show same.
This will work same in simulator also.
The solution is very simple.
See the image below (5 buttons)
The first (blue) button is pinned to the left and bottom of the superview
Each of the other 4 buttons (red, black, green, pink) are top aligned to the first (blue) button
Each button is using a horizontal spacing to the previous button (with a constant of 0). So red button has 0 horizontal spacing to blue, black has 0 horizontal spacing to red, etc
The Last (pink) button is also pinned to the right of the superview
Finally all 4 other buttons are set to have same width to the first (blue) button
That's it!
As for you icons, all you need is to set them to have same width & height to the first icon you have
I m trying to create attached layout, I have added a superview and four subviews each view is aligned to one of the sides, to achieve the + sign in the middle .
Constraints I have added are: aspect ration to each subview and leading trailing margins, along with this also have added a width constraints to left bottom view.
But obviously this isn't working on smaller screen and everything gets messed up, not sure what exact constraints should i add so that I get the desired result on variable screen sizes.
create a superview with required aspect ration.
Add four subviews and make all equal width and equal height.
Pin each superview like "top, left" "top, right" "bottom, left" ""bottom, right""
Give one sub view with ratio according to superview width like if u want 10 px padding horizontally then give 320:155
And Height of one view according to their width.
Find the sample code made for this.
https://github.com/iTamilan/AutoLayoutPlus
You should use proportional height and width for the views, for eg:
For the Top Left view align Top Left view's top to top of the superview and similarly do this for leading. And now make width proportional to half the width of the super view minus half of the separation between the two views.
In short: Top left view's leading = superview's leading
Top left view's top = superview's top
Top left view's width = superview's width/2 - separation/2
Top left view's height = superview's height/2 - separation/2
Similarly do this for the rest of the views and you will be good to go, and your views will be fine on every device
So I'm just trying to wrap my head around Auto Layout; I understand how to use constraints, just not how to apply them appropriately. In the picture below I had set no constraints and simply want this simple design to resize correctly on all size classes (Horizontally and Vertically).
http://tinypic.com/r/2ymxbop/9
What constraints would I need to put in to have these squares resize appropriately on all screens (horizontal/vertical) and can you do this in the ( W:Any H:Any ) size class or do you have to set constraints for each individual size class?
Thanks!
One size class is all you need in this case.
Set a constraint for each of the 4 gaps between the rects (i.e. the space between the top 2, between the top-left and bottom-left, ...).
Set a constraint for each rect to its 2 closest outer edges.
Now you've set four constraints for each rect - and that's all you need!
For that case: follow the steps
1.Add four uiview to screen, two top and two bottom.
2.In your case the view not touching to bottom layout guide,so you have to give fixed height.
Start the add constraints to views.
All views are correct width and height.
3.So take first view from left top,give leading space ,top space and adjecent spacing to right top view. And select the pin button from the canvas below right side option availabe, select height ,give how much height you need.
4.Now select right top view ,give constraint to top layout guide and trailing space.and also same height what you selected before for view one.
5.Now view three ,left bottom view , give leading ,spacing to top view and right spacing to fourth view and select same height .
6.Now fourth view, give spacing to top view ,trailing to container and select height.
Almost completed.
7.Select all views at once ,give equal withs(option available in pin).
lastly some warning will shows ,do update frames.
I am trying to arrange controls in the storyboard using constrains via Interface Builder ("Any Width, Any Height" case). I add there UIView, however, when I press update frames for this element (Selected Views case) according to the given constrains UIView disappears from my view. I guess it size becomes zero. Later on, it is not show up in the screen after the run. The issue is also reported in the issue navigator: Horizontal Position of UIView is ambiguous (marked with the green shape). Anyway, if I set the constrain for width or height (size parameters) together with the constrain of ratio, then the issue disappears, I can update frames, it shows up in the screen during the run.
I am adding the picture with the green marks to make the issue more clear:
The question is whether the parameters of the size are obligatory when I am setting the constrains.
Even if they are obligatory how I can make the size to fit different sizes of the screens or iPhone+iPad because if I set/fix the size it could too big for some screens.
The size is not mandatory. The warning tells you that you must set an X position for this view (constraint between the superView left or right border and the left / right border of the view itself). If you want the view to resize itself to fit each screen size you must set both left and right constraint without the size constraint.
You shouldn't used fixed size (width or height) for view that change size when screen dimension change.
If you want view that fix aspect ratio you can set size that relative to Superview's width or height using:
1) leading and trailing and make sure that
view.leading = superview.leading + fixed_margin
view.trailing = superview.trailing - fixed_margin
and not other way around.
2) equal width or equal height with multiplier, constant relative to superview as you want
So you don't need evil size class.
Suppose that I have the following view controller and this is how I want to see it on all iPhone:
If I run it on iPhone 6 it has the following look:
Here you can notice that UITableView not fit the whole screen and UIImageView doesn't placed at the bottom of the screen.
How can I achieve the required behavior via constraints in XCode 6? I thought that I need the following constraints:
Leading space and top space to container margin for UITableView
Bottom space and trailing space to container margin for UIImageView
Vertical Spacing between UITableView and UIImageView
But it doesn't work as expected even after auto-resolve constraints issues:
Thanks in advance.
Ok, a few things here:
Each view needs enough constraints to define it's x and y position, and it's width and height unambiguously. To start with, go back to Interface builder and delete all of your constraints and lay out the view as you would like it to look. You want to have control over every constraint added, don't let IB automatically resolve the issues, as in all likely hood it won't do what you want.
Do you have an image that is the size you want it to be on screen, once you've factored in #2x, #3x etc? If so, then your job will be easier, as the width and height of the image view can be defined by the width and height of the image (ie the image view's intrinsic content size).
In order to use Autolayout effectively, you need to think about your view holistically, and think about how you want your views to behave when the screen size changes, be clear in your head about the behaviour.
To achieve the layout you want, I would do the following:
Constrain the tableview's leading, top and trailing edges to the superview, with a constant value of 0. This means it can get wider and thinner with the device, it will stretch horizontally, but always stick to the top. This has defined the tableview's x and y position, as well as it's width (height still to go, but keep reading...)
Constrain the image view to match the horizontal centre of it's superview (x position defined) and constrain it's bottom edge to the superviews bottom edge (y position defined). If've you've got the right sized asset, then that will take care of the width and height too. If not, you could go ahead give it explicit width and height constraints.
Now we can constrain the tableview's bottom edge to the top of the image view, with a constant of 0 (ie touching). Note we haven't give the table view an explicit height constraint, so as the device screen grows vertically, the table view will stretch vertically.
Autolayout is hard at first. I'd recommended lots of reading to get over the initial hump, really get to know what a constraint is doing, it's limitations, and the way in which the system parses constraints to translate them into frames. This book is really good, and really helped me learn:
http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194
Best of luck
First make sure you have selected the correct size class. The 'Compact Width | Regular Height' size class must be selected in the Interface Builder. Now add the Trailing space,Leading Space, Top space and Bottom space constraints to the table view. For the image view set the view mode to Aspect fit and add the constraints : Align Center Y ,Top space,Bottom space, Leading space, Trailing space and Aspect Ratio .