UIImageView cover entire UITableViewCell using aspect fill

Question

In the interface builder, I'm trying to create a prototype cell with an image that covers the entire cell but it is not running how it is expected.

As you can see in the following screenshot of my interface builder, I have an image view covering the entire cell, and is constrained to each edge of the cell:

And in fact this is how I expect it to look on the simulator, but instead I get this:

Where as you can see, it is not anchored all the way to the sides, and it may be hard to see, but the image actually extends past the bottom of the cell (if you look hard enough you can see the separator striking through the bottom portion of the image.

This is really buggy and I really have no idea what's happening.

so you are trying to say that you dont want to have the white lines as we can se on the 2nd picture(left and right of the image)?? or i am wrong? — Konstantinos Natsios, Feb 01 '16 at 20:49
correct. It is not extending all the way to the sides of the cell even though the IB shows that it will and the constraint constant is -8, and it extends past the bottom of the cell, which I do not want. — rigdonmr, Feb 01 '16 at 20:55
if you see in the 1st image there are left and right constrains (the blue small lines) that i think there is the problem. Push the constrains button on the bottom and make the left and right constrain to 0. I think this is the problem, but if you could take more screenshots it would be better! — Konstantinos Natsios, Feb 01 '16 at 20:58
with aspectFill, the height of the cell has to be _just_ large enough to contain the whole cell. In this case, it seems constraints are not setup correctly (either that or you have not enabled self sizing), this post should help you get started: http://stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights — ishaq, Feb 01 '16 at 21:08
@ishaq, doesn't self-sizing cause each cell to be different heights based on content? I want all cells to be this size, and crop the image to cover the whole cell. — rigdonmr, Feb 01 '16 at 21:26
If you want all the cells to be the same size, why don't you use the `heightForRowAtIndexPath` method? — Pranav Wadhwa, Feb 01 '16 at 21:29
@penatheboss that should not be necessary.. all cells should conform to the size of the prototype automatically — rigdonmr, Feb 01 '16 at 21:35
@penatheboss that is a very bad idea. `heightForRowAtIndexPath` should only be implemented as a last resort. With self sizing cells support out of the box on iOS 8.0 and later, there is really no reason to implement `heightForRowAtIndexPath` anymore. — ishaq, Feb 02 '16 at 07:08
@rigdonmr ah, I thought you wanted all cells to take on the scaled height of the images. In this case, shouldn't you set `clipToBounds` on cell's contentView, you are working with `aspectFill`, not `aspectFit` so it is going to overflow, no? — ishaq, Feb 02 '16 at 07:22
@ishaq yes, I'm okay with the overflow as long as it's cut off. Imagine the cell is a window and behind it is a larger image. The window only captures its own dimensions of the image. That is essentially what I want. Also, why is implementing `heightForRowAtIndexPath` _a very bad idea_? I get that it's a little unnecessary but sometimes hard code can be more reliable than the interface builder, no? — rigdonmr, Feb 02 '16 at 08:18
@rigdonmr in that case, I think turning `clipToBounds` on cell's `contentView` should fix the issue, does it? As for `heightForRowAtIndexPath`, it's bad because it gets called a lot, and therefore effects scrolling performance, specially if it's not implemented correctly (i.e. performs some elaborate calculation instead of return as fast as possible), it will give you jerky scrolling performance. You can find more detailed treatment of this in the link I posted in my first comment. — ishaq, Feb 02 '16 at 08:41

Salim Braksa · Answer 1 · 2016-02-01T21:59:08.597

1

I think you accidentally disabled cell's Clip Subviews in code or in Storyboard, by default It should be enabled.

If it's not the cell, check it's Content View.

By the way, by disabling Clip Subviews for both Cell and it's Content view, I managed to reproduce your bug.

edited Feb 01 '16 at 21:59

answered Feb 01 '16 at 21:07

Salim Braksa

130
10

But I don't want the _cell to be the height of the image_, I want the _image to be the height of the cell_. – rigdonmr Feb 01 '16 at 21:25
So you want the imageView to fit cell's size ? – Salim Braksa Feb 01 '16 at 21:26

score 1 · Answer 2 · answered Feb 01 '16 at 21:57

Perhaps adding aUIImageView inside of your cell in code.

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    //configure cell
    let imageView = UIImageView(frame: self.cell.frame)
    imageView.image = YOUR_IMAGE
    imageView.center = cell.center
    imageView.frame.size = cell.frame.size
    imageView.contentMode = .ScaleAspectFill
    cell.addSubview(imageView)
}

Hope this helps.

score 0 · Answer 3 · answered Feb 01 '16 at 22:10

Seems that your image constraints are relative to cells contentView margins. You can disable it, see screenshot. Be sure that constant is 0

You need to do Clip Subviews (clipsToBounds) on cells contentView or imageView if you don't want aspect filled image to go beyond bounds. Otherwise you should use Aspect Fit, or Scale To Fill, or do the math manually

score 0 · Answer 4 · answered Feb 02 '16 at 06:11

0

This is because you are setting constraint to margins.

When adding constraints to uiimageview. Uncheck constraint to margin.

answered Feb 02 '16 at 06:11

Irfan

5,070
1
28
32

UIImageView cover entire UITableViewCell using aspect fill

4 Answers4