无法在具有动态高度的子类UITableViewCell中调整UIImageView的框架大小

Question

In my UITableView , all the cells will be a different height. All of them have a background image, which is a bubble picture. All of the cell's TextLabels need to be different widths as well, so I've subclassed UITableViewCell and have given it two properties:

@property (strong, nonatomic) UILabel* messageTextLabel;
@property (strong, nonatomic) UIImageView* bubbleImageView;

I have my custom UITableViewCell 's initWithStyle set up like so:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {

    //stretchable bubble image
    UIImage *rawBackground = [UIImage imageNamed:@"text_bubble"];
    UIImage *background = [rawBackground stretchableImageWithLeftCapWidth:13 topCapHeight:22];
    _bubbleImageView = [[UIImageView alloc] initWithImage:background];

     //textlabel
    _messageTextLabel = [[UILabel alloc] init];
    [_messageTextLabel setFont:[UIFont systemFontOfSize:14.0f]];
    [_messageTextLabel setNumberOfLines:0];
    [_messageTextLabel setBackgroundColor:[UIColor clearColor]];
    [_messageTextLabel setTextColor:[UIColor blackColor]];

    [self.contentView addSubview:_bubbleImageView];
    [self.contentView addSubview:_messageTextLabel];

}
    return self;
}

In my TableView's cellForRowAtIndexPath , I've already tried to just alloc a UIImageView there and set it to the cell's frame, and that works, but when I scroll up and down then the screen gets cluttered with UIImageViews being re-alloced over and over. I've tried the if(cell == nil) technique, but that just makes my entire UITableView blank. So, this is what I have right now:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    Cell *cell = (Cell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    //works just fine
    [cell.messageTextLabel setFrame:CGRectMake(15, 0, 245, cell.frame.size.height -10)];

    //this doesn't work at all
    [cell.bubbleImageView setFrame:CGRectMake(10, 0, cell.frame.size.width, cell.frame.size.height)];

    [cell.messageTextLabel setText:[self.randomData objectAtIndex:indexPath.item]];

    return cell;
}

So my UITableView ends up looking like this when run (cell selected so you can see the frame):

Note that I can set the frame of the bubbleImageView in my UITableViewCell subclass, but I don't know what the cell's height is going to be then. I'm more baffled by the fact that I can set my messageTextLabel 's frame and not my bubbleImageViews. I may be doing something that is very elementary wrong, it's a simple problem though for some reason I'm getting tripped up.

Thank you!

Answer 1

I have seen 2 problems here:

• I think that you have the auto-layout enabled.
  In this case the initial frame and the autoresizingMask are translated to auto-layout constraints automatically.
  After this no frame changes will change the view's size and location - only the constraints...
• You haven't set the contentMode of the image view to UIViewContentModeScaleToFill (this is the default, but it's better define this kind of properties anyway).
  Just add this line: _bubbleImageView.contentMode = UIViewContentModeScaleToFill; right after its initiation.

I think that the solution here is auto-layout - setting constraints properly will solve this issue.
I suggest doing it in the storyboard, with table view controller and dynamic cells...