UIImageView displays an image out of bounds in a subclass of UICollectionViewCell

Question

I need to create a UICollectionViewCell user interface to show the image and name for the image. And on top of the image there is a frame image that is 2 pixels wider in width and height than the image. However, no matter what I do, the image seems larger than the image frame. I did the same to represent the table and it works great.

Here is the code:

//GridCell.h @interface GridCell : UICollectionViewCell @property(nonatomic, strong) UILabel *lblName; @property(nonatomic, strong) UIImageView *image; @end //GridCell.m #import "GridCell.h" @implementation GridCell @synthesize image, lblName; - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code UIImage *bg = [UIImage imageNamed:@"borderUIimgLg.png"]; UIImageView *bgImage = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, frame.size.width, frame.size.width)]; [bgImage setImage:bg]; [bgImage setContentMode:UIViewContentModeScaleAspectFill]; NSLog(@"BG Image size %f, %f", bgImage.frame.size.width, bgImage.frame.size.height); UIImageView *contentImage = [[UIImageView alloc] initWithFrame:CGRectMake(2.0, 2.0, frame.size.width-4.0, frame.size.width-4.0)]; [contentImage setContentMode:UIViewContentModeScaleAspectFill]; [contentImage setClipsToBounds:YES]; self.image = contentImage; [self.contentView addSubview:self.image]; [self.contentView addSubview:bgImage]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(2.0, frame.size.width, frame.size.width - 4.0, 21.0)]; [label setFont:[UIFont fontWithName:@"HelveticaNeue-Bold" size:11.0]]; [label setTextAlignment:NSTextAlignmentCenter]; [label setBackgroundColor:[UIColor clearColor]]; self.lblName = label; [self.contentView addSubview:self.lblName]; } return self; } 

UICollectionViewCell has a size of 67 x 100, so in the bgImage code should always be 67 x 67, and its beginning should be (0,0), and the contentImage should have a frame (0, 0.63.63). By debugging, this seems right. However, conentimage is always more than bgImage. The original image size is 80 x 80. I tried setClipToBounds, setContentViewMode in either cell.ContentView or the image, but no one works.

A screenshot of the problem is attached.

Any help is appreciated.

Answer 1

you use 2 times frame.size.width instead of frame.size.height on another

edit, try the following:

in a cell when using the initWithFrame methods, use the self.bounds property of the cell. if you initialize viewing the image inside the border, use the CGRectInset method to initialize the image with smaller borders and set the image viewing center to the same as the contents of the cell content

Answer 2

Now you can find the answer, try:

 contentImage.clipsToBounds = YES; 

Answer 3

Try changing the UIViewContentModeScaleAspectFill to UIViewContentModeScaleAspectFit.