UIImageView in my UITableViewCell changes size on click

Question

I have a fairly vanilla UITableView in my app used to display an image and text in the default/standard way. The first time a UITableViewCell is requested I return it with a placeholder image and start an asynchronous download of the real image. When the download is complete I replace the placeholder image.

If a download fails, the placeholder image remains. Clicking on such a row acts normally. If the download is successful, clicking on a row with the intended image leads to the UIImageView expanding to the height of the row (and the width increases at scale). The UIImageView never returns to normal size. Crude attempts to set the frame of the UIImageView do not alleviate the issue of mysterious resizing.

// from my - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; method
// after boilerplate cell dequeuing code
cell.textLabel.text = [selectedNoun title];

// add placeholder image
UIImage *placeholderImage = [UIImage imageNamed:@"placeholder.png"];
cell.imageView.image = placeholderImage;
[cell.imageView setContentMode:UIViewContentModeScaleAspectFit];
//...
// If the image has been downloaded I set it
cell.imageView.image = iconDownloader.image;

This is driving me nuts. It actually only happens in one of two tables in my app, but after comparing them line or line I can't see any difference. Hoping that someone has come across this before.

Thanks!

EDIT: I don't have a good explanation for my solution other than to say that images over a certain size appear to lead to this behavior and the use of actual thumbnails (even images somewhat bigger than the UIImageView's frame) do not exhibit this behavior.

If you have custom UITableViewCell then make sure that your UIImageView is not named with "imageView" — kalpeshdeo, Jun 09 '15 at 21:05

score 25 · Answer 1 · answered Jun 09 '15 at 21:06

25

If you have custom UITableViewCell then make sure that your UIImageView is not named with "imageView"

answered Jun 09 '15 at 21:06

kalpeshdeo

1,236
1
11
16

6

In my case, I had a phantom outlet left over still called imageView that I needed to delete. – Eric Conner Jul 07 '16 at 03:31
1

surprising this was my issue as well! I had changed the outlet name, but never fully deleted it. Make sure you're checking all the outlet names of your UIImageView. For whatever reason, having it named imageView resized my UIImageView – Rickybobby Aug 14 '17 at 01:41
Awesome! fixed it for me!! – BrettStuart Jun 23 '19 at 05:39
I had the same issue. Fixed by rename imageView. – Sunil Targe Aug 21 '19 at 02:26
Thanks, fixed without renaming imageView, just added `@synthesize imageView;` inside cell `@implementation` – quarac Aug 30 '19 at 08:36

XJones · Answer 2 · 2011-12-21T21:25:05.047

11

The only things that come to mind that effect the size & appearance of a view within its superview are:

Are you changing the frame/bounds/center properties anywhere? Where/how is the frame set initially?
imageView.autoResizingMask should be set to UIViewAutoResizingNone
imageView.clipsToBounds should be set to YES

EDIT: more suggestions

I'm shooting in the dark b/c your posted code looks fine and if you've set imageView.clipsToBounds that should constrain the drawn image to the imageView frame. Here are a couple more things to try:

Implement tableView:willDisplayCell:forRowAtIndexPath: and set the imageView properties there. If imageView.frame is the problem, this likely won't fix it.
Add your own UIImageView to the cell configured how you want it and don't use the built in imageView property. If the behavior of the default cell is causing the problem this should work.

EDIT: large image problems

I don't know exactly how big the "really big images" are that you are currently using but they are likely the issue. From the UIImage docs (emphasis is mine):

You should avoid creating UIImage objects that are greater than 1024 x 1024 in size. Besides the large amount of memory such an image would consume, you may run into problems when using the image as a texture in OpenGL ES or when drawing the image to a view or layer. This size restriction does not apply if you are performing code-based manipulations, such as resizing an image larger than 1024 x 1024 pixels by drawing it to a bitmap-backed graphics context. In fact, you may need to resize an image in this manner (or break it into several smaller images) in order to draw it to one of your views.

edited Dec 21 '11 at 21:25

answered Dec 20 '11 at 20:23

XJones

21,959
10
67
82

No I'm not changing the frame/bounds/center anywhere. How it is set initially I'm not sure. I added the suggestions from 2 and 3 but to no avail. – Jon Whitmore Dec 20 '11 at 21:55
I have a suspicion it has to do with the fact that the images I'm putting in the table with the problem are really big while the images in the table without the problem are actual thumbnails. – Jon Whitmore Dec 20 '11 at 22:06
that shouldn't matter b/c you have set `contentMode` to fit them within the bounds of the `imageView` and you've set `clipToBounds` to ensure that the `imageView` won't draw anything outside it's bounds regardless. If you're using a standard cell (vs custom) then the `imageView` frame is configured for you. You could post more code showing the cell instantiation/configuration as well as the image downloaded handler. It could also be something in a `tableView` delegate method. As an aside, if the downloaded images are very large you probably should scale them for display to conserve resources. – XJones Dec 20 '11 at 22:38
I've basically posted the important code. I removed only the usual dequeuing stuff and an if statement. – Jon Whitmore Dec 21 '11 at 20:25
In my testing I have proven that really big images lead to the resizing issue and the use of actual thumbnails leads to business as usual. I don't have an academic argument to present. I think I have merely found a bug in iOS. – Jon Whitmore Dec 21 '11 at 20:32
1

I highly doubt this is an iOS bug. There's an explanation, you just haven't found it. I still advise you not set "really big images" to the `imageView` for memory reasons. – XJones Dec 21 '11 at 20:37
I have to agree with you. I would really like to know the explanation. I'm using big images 'cause that's what we have at the moment. Your advice is well taken. – Jon Whitmore Dec 21 '11 at 20:41
You can scale them after they are downloaded and before they are set to the imageView. search for UIImage resizing/scaling and you'll find some examples. Most of the downloading libraries people recommend also do this. – XJones Dec 21 '11 at 20:42
Thanks for the tip. We're very concerned about traffic over the wire and will be producing smaller images on the server. – Jon Whitmore Dec 21 '11 at 20:54
I found out that my problem was arising from the big size of my images. @XJones thank you for the comment about resizing/rescaling. I wrote a helper method in my singleton, that does the resizing and scaling. – Septronic Jan 03 '16 at 13:01
In my case, I accidentally had an image view on my custom cell that was the outlet for both the built in imageView and my own customImageView property on the view controller. Removing the outlet connection for the imageView solved it. – Chris Livdahl Jan 14 '19 at 22:32

score 3 · Answer 3 · edited Sep 27 '16 at 06:02

3

My issue was slightly different, I had a custom UITableViewCell with own UIImageView and when cell disappeared and reappeared, the image would be incorrect size. My problem was that I was setting cell.imageView in one place and cell.thumbnail (custom image) in another, so I changed all references to cell.thumbnail.

Hopefully it helps someone in the future with similar issue.

edited Sep 27 '16 at 06:02

Hiren

12,720
7
52
72

answered Aug 09 '13 at 08:07

frin

4,474
3
31
23

Similar issue for me: making sure that a custom `UIImageView` in a cell was not named `imageView` (named it to `photoView`) fixed the issue. I am guessing that standard `imageView` is dynamically loaded and added as subview once you access that property.. – raheel Jan 28 '14 at 01:48

score 3 · Answer 4 · edited May 23 '17 at 12:10

3

This answer helped me. But I had to make sure to call [cell layoutSubviews] in the method that actually does the setting, like this:

cell.imageView.image = image;
[cell layoutSubviews];

Hope this can be of use to you!

edited May 23 '17 at 12:10

Community

1
1

answered Sep 30 '15 at 13:14

Valentina Badea

31
2

never call layoutSubviews directly – tspentzas Feb 13 '16 at 13:31
@user1826261 I would appreciate an explanation. Help me understand. – Valentina Badea Feb 15 '16 at 16:35

score 1 · Answer 5 · edited Dec 05 '13 at 04:56

1

follow these steps:

Select the ImageView on your custom cell
go to Show to Identity Inspector
Scroll all the way to the end and uncheck the "User Interaction Enabled" checkbox.

edited Dec 05 '13 at 04:56

Gopal S Rathore

9,885
3
30
38

answered Dec 05 '13 at 04:29

HeavyMetal

131
2
7

*sigh* actually it didn't. It's an intermittent problem for me. – Nancy Aug 22 '16 at 19:23

score 1 · Answer 6 · answered Dec 21 '11 at 00:41

1

In these situations I use this Image loader framework. It includes a method to set a placeholder image of your choosing, while downloading images in the background, and as an added benefit it caches images guaranteeing the same image won't ever have to be downloaded twice. Its a great piece of work that I've found very useful for tableview image loading.

SDWebImage: https://github.com/rs/SDWebImage

answered Dec 21 '11 at 00:41

Hubert Kunnemeyer

2,261
1
15
14

I'm using a similar pattern. Thanks. – Jon Whitmore Dec 21 '11 at 20:33

score 1 · Answer 7 · answered Dec 27 '11 at 16:48

I had the same problem, and I didn't figure out the reason for that. Anyway, it's something related to the placeholder image: if you load an image of the same size that the placeholder, no resize will be performed, but if the sizes don't match, the loaded image will be resized to the placeholder dimensions, and resized again when clicked.

So, if you want to avoid the problem, use a placeholder that matches the row height.

score 0 · Answer 8 · answered May 24 '12 at 10:14

0

doing something like

CGRect bounds = [self bounds];
[self setImage:image];
[self setBounds:bounds];

when setting image fixes the problem for me

answered May 24 '12 at 10:14

user1414732

9
1

score 0 · Answer 9 · answered Jan 16 '15 at 08:19

0

If you reload the tableview when it finish loading, the image get the size that it was suppose to have

[self.tableview reloadData];

answered Jan 16 '15 at 08:19

Aitul

2,982
2
24
52

score 0 · Answer 10 · answered Jul 15 '19 at 12:00

0

I fix the problem with:

cell.selectionStyle = .none

answered Jul 15 '19 at 12:00

clopex

459
6
11

score 0 · Answer 11 · answered Mar 03 '20 at 12:59

In my case, I faced this issue in iOS 12 however iOS 13 works fine.

I changed UIImageView to UIButton and set background image as like below which fixes my issue.

cell.imageButton.setBackgroundImage(UIImage(named: "name_of_the_image", for: UIControl.State.normal)

I know this is way too late to post but someone might find it helpful.

score 0 · Answer 12 · answered Dec 20 '11 at 20:23

This is pretty unlikely, but you should try to look into what happens to the frames of the UITableViewCell's subviews when its isSelected property switches from NO to YES (I.e. what happens when you tap a cell). I doubt that will help much, but it's worth looking into (if you can find anything...that's all under the hood of UITableViewCell I would imagine).

You should also look into the imageview's clipsToBounds property. Maybe that has something to do with it?

UIImageView in my UITableViewCell changes size on click

12 Answers12