In a page of my application, I would like to add a Label text on top of a bottom bar.
I have succeeded that by adding the following constraint:
BottomBarImage.top = Label.bottom + 24
The problem is that the label is planned to show 2-3 lines of text.
I have tested on simulator and the result is only one line is showed.
Important note: By removing the constraint, the lines in Label are shown correctly (but the position of the Label is wrong of course)
How can we fix the multiline issue ?
Thanks
The problem is that your constraints are insufficient.
A label that is not under auto layout just sits there, inert; at layout time, its size is the size you gave it in the storyboard.
But as soon as you add a constraint to it, the label comes under auto layout. That changes everything. A label under auto layout is self-sizing: it automatically adapts to the size of its content. It will automatically adapt to the necessary height, but only if its width is fixed (so that it knows when to wrap). You have not given any width constraint for this label, nor have you given it a preferredMaxLayoutWidth, so the auto layout engine doesn't know how to do that.
So, to fix this problem, add a width constraint to your label or give it a preferredMaxLayoutWidth. Or, if you know both dimensions, give it both a width constraint and a height constraint. (And make sure the numberOfLines has been changed to 0; the default is 1 which is a single line only.)
Related
I have a UIView with 3 UIViews inside, I need every UIView to define it's one height depending of its contents and at the same time, the parent view should change its size depending of its children. But I'm having this issue:
I need the first UIView from the second column's height to always stick to its content and leave the remaining space in the end of the column. In other words, what I want is the second column's first UIView to shrink.
Here's my IB, the greater than or equal constraints are not working as I expected (I highlighted the relevant constraints):
I've tried changing priorities but nothing's working, hope you can help me out, thanks.
EDIT: I forgot to show what's going on inside each UIView. The image might be present or not so if it's not I remove it and "pass" the UIView's height responsibility to the label, just that:
A greater than or equal constraint will always be as small as possible while satisfying all other constraints. So in this case it is correct...
The reason it is correct is because the label you are using will allow its frame to grow beyond its content.
To fix this you need to change the content hugging priority on the two labels on the right hand side.
To do this, select the label and go to the measurements section in Interface Builder property inspector.
Near the bottom you will see "Content Hugging Priority". Change the vertical value of this to 1000 (a.k.a. required).
This will tell the label to keep its frame as small as possible to fit the content. And so, the greater than constraint will have to be taller to satisfy this.
I got it working by extending the labels to the bottom of each UIView, now the UIViews have no excuse to expand more than the label's height.
I have a UILabel with the following constraints
and I set the number of Lines equal to 0. The layout on IB can be seen below. I want this UILabel to expand dynamically based on the text that I receive where the views below it get pushed down based on the height of the UILabel. However, that is not what happens.
As seen below, the UILabel doesn't appear at all. It seems to have a height of 0 regardless of what I set the text to be. Does anyone know what I need to modify to make this happen? Does anyone know why the UILabel has a height of 0?
UPDATES:
Things I tried given the comments below.
word wrap, nothing changed
adding a height constraint on UILabel, text gets cut off after the first line
height constraint with greater than or equal to constant, text still gets cut off after the first line
I created a dummy View according to your requirement.
Button has fixed constraints : leading width ,height, top space.
For label : leading, trailing, topSpace to button
3.For View below the label: give leading, trailing, height , top space to label
so here label height is not fixed .so it will change according to text.
After setting the text in label try out "labelName.sizeToFit()" this will automatically adjust the height of your label.
You should try to set a height constraint to your Label.
Considering the information you provided, it seems like it doesn't have enough height because you are using bottom constraint to the view under it. Rearrange your constraints or give a height constraint to the UILabel.
Select the UILabel,Set the Line Breaks mode is Word Wrap and set the number of lines is 0, example is given below,
And set the Height Constraints, If you set height contraints then select the UILabel, see the right side, select show the size Inspector --> Double click the height Contraints --> Relation --> set the Greater Than or Equal, its automatically expand the label, example is given below,
hope its helpful
So I created this scenario in order to understand how views increase in height according to their content. However am still not able to make it happen.
This is what I have now:
the textview is growing according to content. however the uiview containing it is disappearing. what constraints should I use so that when the uitextview becomes bigger, its parent view also increase in height?
Start by clearing all your constraints from everything so we have a fresh slate.
Step 1: Build your view hierarchy. In this example, we want something like this:
The view controller's view, which we'll call parentView has a subview, which we'll call redView. That redView has a child, a Text Field, which we'll call textField.
The hierarchy looks like this:
Step 2: Set any constraints that are specific to any individual view. In this case, we probably only want to set a width constraint on our text view. For now, I'll just set a width of 200pts.
Step 3: Set the constraints between textView and its parent, redView. Let's say we want a 10pt border all the way around. Let's add these constraints:
Once we've added these constraints we'll gets some auto layout warnings and errors. For starters, because the constraints I added for with and space to superview don't match the actual sizes, I'll get some warnings like this:
There will also be some errors describing missing X and Y positions for redView and for textView. There are really twice as many errors here as necessary. textView knows where to position itself relative to redView. We don't need more constraints to sort out textView's position. However, redView doesn't know where to position itself yet... and so ultimately, textView also sort of doesn't exactly know.
We can update the textView's frame to get rid of the warnings, but let's go ahead and fix the actual errors.
Step 5: Set up redView's constraints relative to the superView. redView already know what size to be. Notice we had no errors for redView's width. It just doesn't know where to be. In this case, I'll go simple and say we want redView to be centered. So we'll want to add these constraints:
Now we've fixed some of the problems. The only problem that remains is the height for everything.
To fix this, we must set the content sizing priorities of textView. Set these all to 1000 and change the "Intrinsic Size" property to "Placeholder".
By now, all of the auto layout errors should be gone and we should only be left with warnings because our storyboard frames don't match what our constraints say they should.
We can fix that by selecting parentView and updating all the frames:
There's one final caveat to this auto layout puzzle when it comes to autosizing based on content size: what happens if our text view has no content?
If our textview has no content, auto layout will choose a height of 0, and our users won't even be able to see that there's a text view there, much less tap in it to add content (and make it expand). When using auto layout and content-based sizing, we should almost always be sure that we've set either an explicit or minimum size for the content view.
We don't have to worry about our textView's width, as we set this explicitly to 200. So let's add a minimum height constraint. Start by adding any height constraint:
Now go to the size inspector for the textView, find this height constraint we added, and edit it into a greater than or equal to constraint:
Storyboard won't reflect the change in content in our textView and resize it appropriately, but your constraints are now set up correctly and this will behave appropriately on your device or in the simulator.
ON UITextView make your you unselected These
Scrolling Enabled
Bounces
Bounce Horizontally
Bounce Vertically
Shows Horizontal Indicator
Shows vertical indicator
Now Change your auto layout constraints like this.
On the Storyboard Page, click on your textview.
Then click on the small triangular in the lower right corner.
Click first on "Clear Constraints".
An then on "Add Missing Constraints".
Its the easiest way.
I have a table view with fixed height cells. In the cell there are 3 labels; name, address and type. The name label can be 1 or 2 lines while other 2 labels are only 1 line. I want to come up with something as in the screenshot. When the name label is 2 lines, it decreases the padding on the top and bottom of the cell.
So, I set the constraints between labels to be equal to some constant number. And also used inequality constraints between the name label and the cell's contentView. It actually worked and produced the screen below. But it gives me ambiguous layout in autolayoutTrace for the all 3 labels. I guess my inequality constraints are causing the problem.
How can I achieve this screen properly?
If you are sure that height of all labels are fixed and will not change in future then it seems you are doing in correct way. For ambiguous layout you may have sent some constraint that are not required or conflicting, you can debug constraints and make necessary changes. Reference :Debug Constraints
put the two labels in a container. Then set left margin, right margin, and center Y alignment constraints on the container.
I have a label which is going to contain a big description. I want the label to continue growing on new lines. In the image, its the label which starts with event_venue.....
The even_venue.. label has 3 constraints for now:
Vertical space with eventt_title
a horizantal space with the leading of the superview
a width constraints which defines that the label width is always less than the superview.width.
What I want to acheive is to make the event_venue.width less than superview.width, but if it has more text, it should display in new lines. Is this possible using autolayout?
This are possible steps which can create expandable UILabel
Set layouts for UILabel fixing its position
Set number of lines = 0
Set content vertical compression resistance to 1000 (this will allow text to push the label)
Since you want UILabel to expand you cannot give it fixed height constraint or its parent fixed height constraint. Sometimes depending upon condition giving height constraint is necessary to avoid error then you need to set its priority lower than vertical compression resistance
Yes, this totally is possible. I see answers here that are close to solution but not complete. Here is a solution which works with auto layout in Storyboard, no coding of sizeToFit or anything. Your modified steps would be:
Vertical space with eventt_title
A horizontal space with the leading of the superview
A horizontal space with the trailing of the superview
Set UILabel's Line Breaks as Word Wrap.
Set UILabel's lines property as 0.
I have solved a similar problem. I had to make a label that had a variable amount of text. Here's what I did:
In the storyboard, place your label with the origin where you want it.
In the Attributes Inspector, "Label" section, set the Line Breaks = Word Wrap
Fill the label with random placeholder text to the maximum shape you want. For example, if you wanted to fill the whole width and have room for a maximum of three lines of text, you could do:
abcdefghijklmnopqrstu
abcdefghijklmnopqrstu
abcdefghijklmnopqrstu
In the code, set the text of the label using setText:
[self.myLabel setText:#"MyLabelText"];
This did it for me. Your situation may be a little different in that I wasn't changing the width of the superview and it sounds like you might be. But if the width constraint is set on the label then I would expect this to work in your case, too.
I had a similar question about label resizing, and the answer that I found that was useful to me is here: UILabel Auto Size Label to Fit Text. This is a good starting source for code on how to resize your label programmatically.
I would recommend that you also add a horizontal trailing auto layout constraint from the label to the edge of the superview. Do that and you can then get rid of your current width constraint.
AutoLayout facilitate you for orientation purpose. I don think it will give you automatic expansion. You have to define label with width and height completely, otherwise you will see dots at the end of label. So you may use UITextView expanding it all over the screen. And set textView.backgroundcolot = clearColor.