I'm trying to use auto layout to dynamically size my UITableViewCell heights. For basic cell design, like to labels in row, I've managed to achieve what I want. But I can't get it working for the following:
Setup
I'm using Swift and Xcode 6.4 targeting iOS8 and above.
TableView row height is set to UITableViewAutomaticDimension.
Estimated height for TableView is set to 100, which should generally be close to the final height.
The title's vertical hugging priority is set to low (250).
Didn't change the other elements hugging and compression priority.
Here's the prototype cell:
The image to the left has a fixed height. The title text should grow to fit the complete text. It's a label with rows set to 0. The subtitle should not grow because it will only be short text.
My constraints setup
For the image leading and top constraint set to 18. Trailing constraint to title and subtitle label set to 18. Bottom constraint set to 18 with priority low (249).
For the title label top and trailing constraint to superview set to 18. Leading constraint to image 18. Bottom constraint to subtitle is 0.
For the subtitle label top constraint to title label is 0. Trailing space to superview is 18. Leading constraint to image is 18. Bottom constraint to superview is 18 with priority low (250).
The Problem
No matter what, I want the bottom space to the superview to be 18 units. That means, if the text's (title + subtitle) height is less than the image's height. The image's bottom constraint should ensure 18 unit bottom margin. If the title grows in height and the total text is higher than the image, the subtitle's bottom constraint should ensure 18 unity bottom margin and the image's bottom constraint should be ignored.
I'm thankful for any suggestions how to solve this, because I'm at a point, where I'm just punching in some random values to the constraints...
Update
Please see the marked answer on how to setup constraints to achieve the layout I needed. If your cells do not layout properly on the tableview's first load, please se this question for a workaround: iOS 8 Auto height cell not correct height at first load
Firstly, UITableViewAutomaticDimension despite the name isn't documented for auto TableView row heights. Just don't implement heightForRowAtIndexPath and implement estimatedheightForRowAtIndexPath as you have.
To address the layout problem, it is not a priority issue but a problem with your constraints. Because you have a fixed top and bottom constraint from your image, the cell will never grow to be larger than the image + 36pt. The solution is to make your top and bottom constraints from your image >= rather than =.
After doing this, you will probably find that there are red warnings in IB for ambiguous constraints. This is because with greater than or equal to constraints, the layout can't determine the correct Y position of the image view. The solution: add a center Y in superview constraint to the imageView.
Related
I have a horizontal collection view that contains an UILabel. I have mentioned the collection view cell's size in the delegate method.
And added leading, trailing, height and vertical center constraints to that label as shown in the below image.
But in the output, the width of the label is getting increased or decreased based on the text and the collection view cell size as well.
I want to keep the size of the collection view cell fixed as mentioned in the delegate method.
How can I accomplish this?
Two things.
First, it sounds like you might be adding a width constraint to the label that’s equal to the label’s text width. That width constraint will force the cell to expand to meet the requirements of the leading, trailing and now width constraints. Instead, make the width constraint equal to the width the label should be.
Second, set the label’s .numberOfRows property to 0. This will make it so the label will break into multiple horizontal lines instead of going wider.
Edit:
Another thing that could help might be to adjust the horizontalCompressionResistance property on the label to 249 or something lower.
I've a simple layout that I know how to do it with a horizontal stackview. But for learning purpouses I want to know if it is posible to code using AutoLayout constraints.
The layout is simple, it's a rectangular row that contains an image and a label.
The problem is that the label can have multiple lines and be bigger than the icon.
The desired layout is that image and label had to be centered in Y axis and the bigger height one have a margin of 8 points at top/bottom.
You should give the image and the label a margin constraint for both top and bottom. Use greater or equal as relation for these margin constraints.
Give a top and bottom margin constraint for image and label. Set high priority with relation Greater Than or Equal.
First Write this in viewDidLoad
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 44.0;
Set numberOfLine property to 0 in StoryBoard
Set UIImageView Constrains like:
Fixed Height and Width and Vertical Center in Container.
Set UILable Constrains to HorozontalSpacing from UIImageView Trailing Top Bottom from SuperView i.e Cell.
Hope it will work...
I came across a problem when configuing the cell of UITableView. I add two labels vertically in the content view of the UITableViewCell, and I also add constraints for the top, leading and bottom layout attributes:
I think that the height of the cell can be caculated dynamically as I have set all the vertical layout and with the instrinct size of the label, the height can be inferred.
so, I can not understand the error message that IB told me.
The second problem is that the height of cell appear on the IB is not changed with the constraint I`ve make. If I decrease the bottom constraint for example, and it is the label to change its size to fit the constraint, but not the cell change its height.
If you need to add top , leading and trailing(or width) to the 1st label. Then add bottom ,leading and trailing(or width)for the bottom label. Then add bottom constraint for 1st label to 2nd label.Then by selecting both labels, add equal height constraint.It will solve your problem.
The meaning of this conflict is that when your label content is increasing dynamically, which label's content is needed to give more priority before whom.
More precisely it can be said that if you increase one of the label's content hugging priority i.e. 252 then that label's content increment and size will be given more priority for incrementing it foremost. As autolayout executes according to the priority of constraints, it faces ambiguity in terms of increasing the views of labels if you do not set the content hugging priority.
I am not sure why but I have having so much trouble with constrains and auto layout. I have the below view and I want to make it display as is shown but every single approach I take to get seems to be incorrect.
I have been following this tutorial online Auto Layout Tutorial in iOS and I am rather trying to describe my constraints. Following this technique this is what I have:
Description of my constraints.
Label:
Centered in the view
51 from the top
All images:
Must have equal height and equal width.
Are separated from the left and right by a 0 gutter.
All inner gutters separating the images are 12.
I have also included my storyboard.
storyboard link
for this you just declare height and width of the first imageview with respect ViewController use equal heights and equal widths and then change in the multiplier default it will be 1 adjust to your size then for the remaining imageviews you just give equal widths and equal heights of the first imageview.
If you want keep height and width constant , don't pin it, just use horizontal centre constraint. Pin it up using auto layout , hope this is helpful.
You are set image height and set image bottom constraint and does not set label height that you are many choice
Set your label height because you run iPhone 4 or 4s that your label doesn't display.
remove your image bottom constraint because you are set fix image height.
you image doesn't fix height that remove your set image height and all image select and set equal height constraint (all image height same).
Better You should move that four image views into a uiview(childView) .Make sure that 4 image views are the subviews of UIView.
-Add equal width and hight constraint to SuperView from the childView.
- Add multiplier value for the EqualHight and Equal Width constraints by selecting both constraints on storyboard(like 1:2.1,1:2.2).it may keep the same distance in all orientation
Add Y position and X position by trailing space and leading space, centre vertical in container.
Then Select the 4 uiimageviews and make sure they have same width and hight,after that
select 4 image views then click the pin button and check the equal width and equal hight.
Add leading ,top and trailing space for image1
[1,2]
[3,4]
add trailing and top space for image 2
add leading ,top and bottom space for image 3
add trailing ,top and bottom space for image 4,
I read many post of contentview in scrollview,but the problem is slightly different.check out the image
and i have following hierarchy
Here the label is multiline label and its fill up with too many content size.
so, the problem is
1. according to the lines of the label, height of label changes and
2. accoring to height of label, contentview height changes.
so, that it scrolls. and i want this things to be done with autolayout.
And one thing i want to mention is , i'm using ios 8.1 and xcode 6.1
The thing that you can use for your UILabel is -> Select your Label and go to Attributes Inspector and find Autoshrink set it as Minimum font size then you may describe your minimum font size.
For addition to your view, you may want to use constraints between your label and content view. So I recommend to use this documentation Auto Layout Guide. And if the documentation is too long to read you may read this answer.
You should add constraint to content-view as leading, trailing, top, bottom & equal width & equal height with scrollView. For imageView add constraint as leading, trailing, top & height. For the Label add constraint as leading, trailing, top & bottom, also check that you are setting no of lines to be zero. & For read more button add constraints as height, width, centre horizontally in container & bottom. Don't forget to add bottom constraint to button otherwise your scroll view does not understand its content size & you will get warning as ambiguous content size to scroll view.