在UICollectionView中，UIImageView应该是圆形视图而不是菱形

Question

I have UICollectionView with UIImageView on it (as shown at image).

And I want to make it as circle view. But, when I running application, it's appearing as diamond (image below).

In (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { I setup it as

[cell.photo setImageWithURL:[NSURL URLWithString:url] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

    cell.photo.layer.cornerRadius = cell.photo.bounds.size.width / 2;
    cell.photo.layer.masksToBounds = NO;
    cell.photo.clipsToBounds = YES;

For setup image I used libs SDWebImage

And I'm sure, that cornerRadius value is correct (it's half of image width). Also I didn't make any manual changes in storyboard properties (position set as auto layout). What I missed?

Answer 1

Your problem is that cell can be re-layout after cellForItemAtIndexPath: and size of cell will be changed after it.

Solutions for you: 1) Put cell.photo.layer.cornerRadius = cell.photo.bounds.size.width / 2; into

- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath

2) Create custom class for your UICollectionCell and override layoutSubviews function:

- (void)layoutSubviews {
    [super layoutSubviews];
    self.photo.layer.cornerRadius = self.frame.size.width / 2.0;
}

Answer 2

This helped me a lot.

In Subclass of UICollectionViewCell, CustomCell.m:

-(void)layoutSubviews
{
    [super layoutSubviews];

    [self layoutCell];
}

-(void)layoutCell
{
    [self layoutIfNeeded];

    [[imgThumbView layer] setCornerRadius:imgThumbView.bounds.size.width/2];

    [[imgThumbView layer] setBorderColor:[UIColor redColor];

    [[imgThumbView layer] setBorderWidth:1.5f];

    [[imgThumbView layer] setMasksToBounds:YES];
}

Answer 3

为了让你的图像看起来像一个圆圈，你必须确保你的框架是一个完美的正方形，并将角落半径设置为或多或少60.这对我有用，希望对你有帮助！

Answer 4

Your cornerRadius value is correct but cell.photo.layer.masksToBounds = NO; which in incorrect set it to cell.photo.layer.masksToBounds = YES; and if its still not working then make sure that the height and the width of your ImageView should be same.