UIImageView should be as circle view instead of diamond in UICollectionView

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?

score 9 · Accepted Answer · answered Aug 10 '15 at 22:15

9

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;
}

answered Aug 10 '15 at 22:15

Vitalii Gozhenko

9,220
2
48
66

2

Adding '(void)layoutSubviews' into custom UICollectionCell working like a magic. Thank you. – levo4ka Aug 10 '15 at 22:52
layoutSubviews will do for me. – jayellos Nov 25 '15 at 03:57

score 3 · Answer 2 · answered Nov 19 '15 at 06:40

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];
}

score 0 · Answer 3 · answered Aug 10 '15 at 20:42

0

To make your image view a circle you have to make sure that your frame is a perfect square and set corner radius to more or less 60. This works for me hope this help you!

answered Aug 10 '15 at 20:42

Luciano Almeida

241
1
6

what about if I have biggest image? in my case I have 170x170 size, so radius is 85 – levo4ka Aug 10 '15 at 20:45
My mistake, you are right for me the solution was in view didWillAppear add the code self.imageview.layer.cornerRadius = self.imageview.bounds.size.width/2; [self.imageview.layer setMasksToBounds:YES]; And make sure that in xib the imageview clipsubviews checkbox is marked. Hope that helps. – Luciano Almeida Aug 10 '15 at 21:00
thanks, yeah, this works in UITableView, but not in UICollectionView :( – levo4ka Aug 10 '15 at 22:14

Piyush · Answer 4 · 2015-08-10T22:44:53.383

0

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.

edited Aug 10 '15 at 22:44

answered Aug 10 '15 at 22:39

Piyush

1,534
12
32

UIImageView should be as circle view instead of diamond in UICollectionView

4 Answers4