I have a UIImageView inside a UITableViewCell. The cell height changes based on the number of lines of text in a UILabel using estimated row heights. I want this image to be centered vertically in the cell, with a fixed width, and height >= 40 and <=80. As the cell height increases I want the image to increase to that max height then stop, always remaining vertically centered. To do this, I added those two height constraints and the width constraint, plus constraints to the top and bottom of the cell with a constant of 5 for some padding and a priority of 250. Adding a background color to the image view you can see it is being laid out as expected. But when I set the image on the image view, the height is changing unexpectedly.
With 3 lines in the label:
without an image: image view is ~60pt tall as expected
with an image: image view is 80pt tall - expected it to be ~60
With 6 lines in the label:
without an image: image view is 80pt tall as expected
with an image: image view is 80pt tall as expected
Why is that? How can I make sure the image in the image view doesn't affect the image view size, as I want the cell height determined by the auto layout constraints to determine it?
Here's a sample project.
While I wasn't able to get the expected image view height using those auto layout constraints, I did achieve the goal by using a single height constraint and manually setting its constant in layoutSubviews of the UITableViewCell, calculated to be max(40, min(contentView.bounds.height - 5 * 2, 80)). And then added a CenterY constraint to the superview to keep it vertically centered. Now adding an image to the image view doesn't unexpectedly change the image view height.
Related
I am using table view automatic height and have joint the label to the bottom of the table view cell and number of lines set to 0 and that is running fine.
But the problem is that there is an image view as well. If the text of label is of one line then, image view bottom should set to the bottom of the table view cell to avoid cutting of the imageview. Attached is the image of the design.
Can I set it within the storyboard instead of doing it programmatically?
Set the bottom of the imageView constraint to be greater then or equal
today i have set up some constraints in a view but there looks awful. Which Constraints have i to add (see screenshots)
In XCode
In Simulator
If I have understood your requirement right, you need to have four images with labels below these individual images. If this is the case, you can use collection view whose cell contains a image view and a label. You can give the spacing between cells, size of cell and intercell spacing through delegates. Also just you need to specify image view and label constraints in collection view cell. Like for instance, image view placed horizontally centre and pinned to top of superview, label placed horizontally pinned to bottom of image view and top of label to give a gap between them.
Fix the all images height and width, and given the leading, trailing, top and vertical spacing between label and images. Also fix the label height. You will given the min 4 and max 6 constraints for every fields.
I am trying to dynamically resize my UITableView Cells in swift:
Above is my cell setup for the smallest possible screen size (iPhone 4). The green view (an image) will enlarge if the screen width increases and retain its aspect ratio. It's pinned to the top, leading edge trading edge and aspect ratio enabled. The label below is centered horizontally. The top pinned to the bottom of the image and the height and width fixed.
I have this code in viewDidLoad:
tableView.estimatedRowHeight = 262
tableView.rowHeight = UITableViewAutomaticDimension
If I run the app I get the warning:
Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead. The cell is also the wrong size only about 25pts in height. What am I doing wrong here?
First if all, check out this link. You may be missing an overload:
custom UItableView not displaying correctly on ios8
Second, look at your constraints again. Just for the vertical dimension, you've set the distance from the image to the top, from the image to the label, and from the label to the bottom.
The size of the label will be given by the text.
But the size of the image is uncertain. You have a leading constraint and an aspect ratio, but how does that specify a size?
Basically if you were to render this yourself, would you have enough information to do it?
Try add constraint: label's bottom to cell's bottom
Remove label's fix height.
Hope this can help.
I have written some auto layout code programmatically. I have successfully achieved the following layout (without an image in the image view):
There are two views, an image view followed by a single line label
The label is filled with text
The image view height and width is constrained to the label's height
The label's height is the "intrinsic height"
Everything works perfect.
When I programmatically, in response to some events, set an image in the image view, the image view is resized to fit the image, and this causes the label's height to change to match the image view, ignoring the intrinsic height of the label calculated by the text in the label.
I set the height of the label using this constraint:
self.subjectLabel.autoSetContentCompressionResistancePriorityForAxis(ALAxis.Vertical);
Maybe there is something wrong with that? Does anyone know where I have gone wrong?
I ended up working around this by resizing the UIImage using the ideas from this page: http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way.
I resized the image during layoutSubviews to ensure that the frames for all the subviews has been calculated.
I am using custom cell in UITableView. There are 4 views in cell. 3 UILabels and 1 UIImageView (grey colored one) as shown below. Text of labels are dynamic so width and height is dynamic.
Here width of UIImageView depends on 2 labels. So issue is to specify constraints between labels and UIImageView that will decide the width of UIImageView.
See below what happens if first label's text is long.
How to specify constraints when width depends on width of multiple labels?
Update : I tried setting number of lines for labels to 0 and intrinsic size to placeholder. It's not working, too. Below is how it looks. I tried setting intrinsic width and height to none, but it gives error when I do that for both label, not giving error if set that for only one label.
Update : I changed properties and below is displayed what are they now and how the cell is displayed.
Cell :
Constraints for label in first row (pink colored) :
Constraints for label in second row (cyan colored) :
I solved this after experimenting with lot of things. The only thing I had to do is to set horizontal and vertical content compression resistance priority to required.i.e. 1000.
I did this for all labels because I don't want any of the labels to trim their content.
One more thing which is too much important is Getting Right Height Of Cell. If there is even 1pt of error in calculating custom cell's height it will not be displayed as expected.
Hint :
If height of any view is greater than expected then possibly calculated height of cell is greater than what is actually required.
If any of views is shrinking vertically or not displaying whole content then possibly calculated height of cell is lesser than what is actually required.
Yoy can test if height is wrong by adding/removing constant value to height (variable) you calculate for cell.