Question

we have a very customized UITableViewCell here. So it basically looks like this:

+----------------+
+   Image view   +
+ (230px height) +
+----------------+
+ Content        +
+ Content        +
+ Overall 340px  +
+----------------+

What I want to do is: Add a background image to the cell that starts where the image ends and also ends where the table cell ends (no background repetition or anything).

So this is what I did:

    // Custom UITableViewCell class, this is part of a method that gets called
    // in an overriden -layoutSubviews
    UIImage *watermarkImage = [UIImage imageNamed:@"myBackground.png"];

    int watermarkWidth = watermarkImage.size.width;
    int watermarkHeight = watermarkImage.size.height;

    int watermarkX = screenWidth - watermarkWidth;
    int watermarkY = imageView.frame.size.height + 10;

    CGRect watermarkFrame = CGRectMake(watermarkX, watermarkY, watermarkWidth, watermarkHeight);

    UIImageView *watermarkImageView = [[UIImageView alloc] initWithFrame:watermarkFrame];
    [watermarkImageView setImage:watermarkImage];

    [self setBackgroundView:watermarkImageView];

This works pretty well, except for the fact that the image is larger than the CGRect and therefore larger than the cell itself. This causes the backgroundView to overlap the cell underneath, which looks pretty ugly to be honest.

What can I do to make the backgroundView respect the cell boundaries? Setting clipsToBounds to YES didn’t work.

Answer 1

Like I posted in the comments: I would enable clipping on self because the subview backgroundView is too large.

In addition: I would use

UIImageView *imgView = [[UImageView alloc] initWithImage:]
imgView.frame = CGRectMake(...)

also try bot setting the frame, because maybe the Cell also sets the frame automatically of the backgroundView