Understanding Autolayout Constraints - ios

I am new to autolayout and I want to understand the constraints of autolayout.
my question is ->
When we apply constraints between two objects it gives you 3 options in relation tab which are equal, less than or equal to and greater than equal to.
So I want to understand when to use less than or equal to and greater than equal to sonstraint.
If possible please help me with some small demo.

I think this will help you.
suppose you want a UILabel to resize maximum height to 80 pixels depending upon its inner content and if more test are displayed in the label then it should truncate its tail but should not increase its height because you have other elements on screen which will not look good if the label will increase more then that. So here you should use height <= 80. So if you set some minimum value of the label like height >= 40 so if the text of the label is not enough to fit in 40 height then it will stay 40 pixels but if text increases then it will increase max up to 80. So here you came to now about the use of greater then or equal to also. Like if you want a element to be minimum some value and if its resizing at runtime then should not be less then any value, then you can use those constraints. I can describe in brief if needed. Thanks.

Related

Creating a dynamically sizing UILabel in the Xcode interface builder

I want to be able to create a UILabel that will adjust it's size in a more complex way than normal AutoLayout. I've looked over the internet for an answer to this, but to no avail.
Here's what I want it to do.
Say you're viewing it on an iPhone. I want it to be 16 points away from either edge centered in the middle. (Height does not matter in any of this)
However, when the screen gets wider, I want the UILabel to stretch so that it's 16 points away form each edge UNTIL it reaches, say, 500 width. Once it reaches 500 width, I don't want it to get any wider. This is where the 16 points on either side increases, still keeping the label in the center.
Now you're viewing it on an iPad landscape. The UILabel is exactly 500 points wide and in the center.
If possible, I would like to be able to accomplish this using AutoLayout, and not code, but if code is a must, I can deal with that.
Thank you for your consideration. All help is appreciated.
You can do this with 3 constraints:
center the label horizontally in the view
set a width constraint of <= 500
set a leading space constraint of 16. Give this a priority of < 1000.
When the view is wide (like on an iPad), the label will stretch to its full width of 500. Auto Layout will keep the label centered, and it will try its best to satisfy the 3rd constraint by keeping the the leading space as close to 16 as possible. It chooses to break this constraint because the priority is less than 1000.
When the view is narrow (like on an iPhone), the label will have a leading space of 16 (and trailing space of 16 because the label is centered). The width will be whatever is left, because that satisfies the width <= 500 constraint.

Why UILabel's height become zero if doesn't hold any text?

I expected from the label to keep the minimal height of one line even if you remove the text out of it.
Here's the picture:
How it should look (but without whitespace):
If I enter the one whitespace in it, its height gets corrected. But I dont want to put whitespace into empty labels. there should be a better solution.
The UILabel control have an intrinsic content size so if you don't have any text his height will be zero, If you need a min height then you must define a Height constraint with >= your minValue as I said in my comments
I think you can figured it out how do this
First, add a Width and a Height constraints:
Second, change the Equal to the Bigger Than(both for width and height, height could be small one, like 8):
Finally, you are able to change the font size of label freely, the label will became bigger with the bigger font size. And the label size will be (42,8) if you removed text:
One workaround is to use a UITextField instead, set isEnabled to false, and set the placeholder property to " ".
As long as you don't need it's width to ever be shorter than the width of a single space -- UITextFields' sizes are calculated using the placeholder property by default -- then this will always have the height of a non-empty UITextField regardless of whether it contains text or not.

Setting up variable constrains in xcode

I'm having trouble setting up constraints.
This is the thing I am trying to achieve:
I have 2 objects A and B. I want there there to be a maximum of 100 points between A and B if its a larger screen, or less if its a smaller screen.
Also, I want there to be a minimum of a 20 point margin from the main view controller. So on a smaller screen the minimum spacing will be 20 points, and on a larger screen the margin can be as wide as needs in order to satisfy the space between A and B at 100 points.
To illustrate how I want it to look on various screens:
4 inch screen
I want there to be a 20 point margin on either side and the middle (space between A and B) can be variable, i.e. 100 or less.
5.5 inch screen
The margins can be variable and expand as large as they need to, but the middle section (space between A and B) can be a maximum of 100.
Any help how to achieve this would be greatly appreciated.
This can be achieved with help from three dummy views and two width constrains with different priorities. I set up a test project to test my thought. check it out to see whether it's what you needed
https://github.com/dopcn/testSeg

UILabel Autoshrink Mal-use?

I Need a label in my UI to hold up to 32 characters without distorting, so I enabled auto shrink and changed the number of lines to 0:
heres my label on the IB:
now when I run the application it runs off the screen:
how can I make it fit accordingly?
You don't want the number of lines to be 0, because that will tell the label to use any number of lines that it needs. You also have to constrain the label's right edge to its superview's right edge, because without that, it'll run off the right side, as you can see.
remove constraints first
give the width 0 and apply width constraints . Click on the constraints change width constraint = to >= after which side you want (left or right) apply top space and (trailing space or leading space) apply two constraints.
clear the lable text.
try it and let me know after this wat is th problem.
You are on right direction. Set minimum font size and maximum font size of the label and not need to truncate characters, not need to set number of lines. Autoshrink definitely works.

Xcode Autolayout: Place a label next to a dynamic label at a constant distance

Check out the loading date label. It could be '2 May' or '24 December'.
I want to display the label 'days remaining' after it. Since the width of 'loading date' is dynamic, via auto layout I haven't been able to place 'days remaining' after it. It stays at a fixed distance.
How to adjust it in xcode, using autolayout?
I've been able to achieve it via code by disabling autolayout. However with iOS 7 coming up and autolayout would be essential to maintain iOS 6 and 7 at the same time, I thought it would be a good time to do it with autolayout.
Make sure that the spacing between your two labels is set to auto and that your days remaining label is left aligned. I suggest keeping a constraint between the trailing edge of your days remaining and the superview, but lowering the priority a bit. The goal there is to ignore it when the label should be far away from the superview, but not clip or go outside of the visible area when the date is very long.
You may also need to increase the content hugging priority of the date label and/or decrease the compression resistance of your days remaining label.
You may get better insight into what your labels are doing by setting the background color on them temporarily. The goal is to see how large your labels are, where the text is in the label, and where the spaces are. If there are large gaps between the labels that will help you figure out where to add constraints or adjust the priorities. If the labels are taking up the full width then it will help you get the alignment set correct.

Resources