Search code examples
objective-cuitableviewuiimageaccessoryview

UIImage as accessory view in UITableViewCell not showing


Within my app, I bring up a UITableView when prompting the user to select an item. Based on whether the item is in stock, out of stock, on order, etc., I want to display an image on the right-hand side of the UITableViewCell.

I have tried using the accessory view button, but it isn't showing up on the UITableViewCell. I have tried changing the UITableViewCellStyle to UITableViewCellStyleValue2 (the style with the detail closure button), and have also tried setting the accessory type of the cell directly.

static NSString *CellIdentifier = @"MyCellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    //cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:CellIdentifier];
}

[cell.textLabel setText:@"Testing"];
[cell.detailTextLabel setText:@""];

//cell.accessoryType = UITableViewCellAccessoryNone;
//cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

UIImageView *imageView = [[UIImageView alloc] initWithImage:[myImageFilePath stretchableImageWithLeftCapWidth:0 topCapHeight:1.0]];
[imageView setContentMode: UIViewContentModeScaleAspectFit];
[imageView setFrame:CGRectMake(0, 5, cell.frame.size.height - 10, cell.frame.size.height - 5)];

cell.accessoryView = imageView;

return cell;

When the app runs, the UITableViewCells appear with the "Testing" text, but there is no image on the right-hand side of the cells.

Is there another method that needs to be overridden in order to implement a custom UIImage for the detail diclosure button?

The "button" is more of a status indicator, because I don't want the tap of the button to do anything different than tapping anywhere else on the UITableViewCell does (just select the row).


Some additional info:

If I remove

[imageView setFrame:CGRectMake(0, 5, cell.frame.size.height - 10, cell.frame.size.height - 5)];

then the image shows up in the UITableViewCell, but it is too big and does not fit on a single row, so it overlaps with other rows' accessory views.

I was using the setFrame so that it would resize the image to fit with the UIViewContentModeScaleAspectFit so that it would fit on the row, but it seems to prevent the image from appearing at all.

Note that in this example cell.frame.size.height = 44.


If I change the frame to:

[imageView setFrame:CGRectMake(0.0, 0.0, 120, 44)];

then the image appears on the row.

However, since it is 120 pixels wide, it is cutting off the text with the trailing ... earlier that needed. The image could fit about 3 times before the trailing ..., with the width being 120 and height being 44.

How can I get the trailing ... to get closer to the image?

If I reduce the 120 to a lower value, the image moves to the right and eventually runs off the cell.


Solution

  • The width of the UITableView was 804. Updating it to 768 allowed me to use the original code that was posted.