Creating UIImageView in Custom Cell leaves Artifacts from old image when using ScaleAspectFit

Question

I have a table with a CustomCell, when drawing the cell I create a UIImageView and add it as a Subview to a scrolView. The image also has it's contentMode set to UIViewContentModeScaleAspectFit. The problem is when the next Cell is drawn if the image is smaller than the previous image then the borders of the previous image will still be there.

The code is such;

  UIImageView *smallImgView = [[UIImageView alloc]initWithFrame:CGRectMake(picXCount,0, 216, 216)];
  smallImgView.image = nil;
  smallImgView.contentMode = UIViewContentModeScaleAspectFit;

I am now thinking that I should collect the dimensions from the image and set the CGRectMake to that size rather than using the contentMode but if there is an easy fix...

Setting the image to nil does not work and another idea is to load a blank image first (which is nasty). Any ideas would be appreciated.

EDIT

Here is the cell Method

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    cellID = @"Cell"
    newsItemCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID forIndexPath:indexPath];
    if (cell == nil)
    {
        cell = [[newsItemCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    for(int imgCount = 0; imgCount < [[newsExtraImages objectAtIndex:indexPath.row] count]; imgCount++)
    {
        UIImageView *smallImgView = [[UIImageView alloc]initWithFrame:CGRectMake(picXCount,0, 216, 216)];
        smallImgView.image = nil;
        smallImgView.contentMode = UIViewContentModeScaleAspectFit;
        [smallImgView setImage:[allImages objectAtIndex:[[[newsExtraImages objectAtIndex:indexPath.row] objectAtIndex:imgCount] intValue]]];

        picXCount = picXCount + 216 + 12;

        [cell.newsItemImages addSubview:smallImgView];
    }
    [cell.newsItemImages setContentSize:CGSizeMake(picXCount, 216)];

    return cell;
}

In short it checks a 3D array to see how many images there are in there for this cell, if there are 5 it creates the UIImageView 5 times each time adding them to the view. The next cell is the next list of images which may only have 3 in and so on.

The picXCount keeps track of where to plot the images horizontally in the Scroll View (newsItemImages). The Content is also set so it scrolls.

score 1 · Accepted Answer · answered May 31 '13 at 14:33

1

Can you provide the cellForRowAtIndexPath code. I have a suspicion that you add a new UIImageView over and over again above existing one every time you have to provide a cell for a different item. And when it turns out you get to reuse some cell you stack the UIImageViews on top of each other.

answered May 31 '13 at 14:33

i-konov

842
1
7
19

I have just edited. I am sure you are right it is what it look like is happening (some times there are three or more stacked up), I am just not sure what I should be clearing/not reusing. Thanks @Ivan. – Recycled Steel May 31 '13 at 15:50
I have edited again, I cut some comments out and managed to cut the test for a cell. – Recycled Steel Jun 03 '13 at 08:44
can I simply not reuse the Cell? And if so how does one do that? – Recycled Steel Jun 04 '13 at 09:10
You do actually reuse the cell but i don't see any "return" statement in the code above. Also when you get a reusable cell you don't check if these UIImageViews aren't already there. In that case you should remove them and them run the code that adds new once as you did. Anyway you still keep stacking image views. If you need only 5 image views i suggest that you add them to the cell XIB design and then show or hide the needed number of views through outlets depending on your data. – i-konov Jun 04 '13 at 12:48
Sorry for my delayed replies! I've been pretty busy lately. I hope we will get your work done :) – i-konov Jun 04 '13 at 12:51
many thanks for your help with this. Yes I see now I am just stacking the images. The problem is that there may be 1 image or 100 which is why I am creating them. I think I am going to need to remove all (some) of them and start again (or refill) but how do I find the UIImageView(s) on the next "pass"? (added the Return to above, cut that off too some how). – Recycled Steel Jun 04 '13 at 14:44

Recycled Steel · Answer 2 · 2013-06-05T14:36:40.703

With guidence from Ivan I managed to do it, not sure it is the most ecinomical method but...

When an image added to a view I now add a Tag too. There is now a For loop which looks over the cell's Scroll View just before it is made which removes all subview which are not 0 (the default).

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    cellID = @"Cell"
    newsItemCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID forIndexPath:indexPath];
    if (cell == nil)
    {
        cell = [[newsItemCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }

    // Remove the old Subviews from the cells if they are there
    for(UIView *subview in [cell.newsItemImages subviews])
    {
        if (subview.tag != 0 )
        {
            [subview removeFromSuperview];
            NSLog(@"Removing View with Tag : %i", subview.tag);
        }
    }


    for(int imgCount = 0; imgCount < [[newsExtraImages objectAtIndex:indexPath.row] count]; imgCount++)
    {
        UIImageView *smallImgView = [[UIImageView alloc]initWithFrame:CGRectMake(picXCount,0, 216, 216)];


        smallImgView.tag = imgCount + 1;  // I added this, plus one to keep it above 0


        smallImgView.contentMode = UIViewContentModeScaleAspectFit;
        [smallImgView setImage:[allImages objectAtIndex:[[[newsExtraImages objectAtIndex:indexPath.row] objectAtIndex:imgCount] intValue]]];

        picXCount = picXCount + 216 + 12;

        [cell.newsItemImages addSubview:smallImgView];
    }
    [cell.newsItemImages setContentSize:CGSizeMake(picXCount, 216)];

    return cell;
}

My name is Ivan hehe ;) ...I am very glad to have helped you, dude! — i-konov, Jun 05 '13 at 13:42

Creating UIImageView in Custom Cell leaves Artifacts from old image when using ScaleAspectFit

2 Answers2