Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIImageView should be as circle view instead of diamond in UICollectionView

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

enter image description here

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

enter image description here

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?

like image 923
levo4ka Avatar asked Aug 10 '15 20:08

levo4ka


People also ask

How do I round an image in IOS?

An image is needed to display inside the circular image view, so download the pictures zip file, extract the zip file and drag the pictures to the Assets Library. Go to the Storyboard and drag an Image View to the main view. Select the image view and go to the Size Inspector. Set the Width and Height to 200 points.


2 Answers

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;
}
like image 109
Vitalii Gozhenko Avatar answered Oct 09 '22 00:10

Vitalii Gozhenko


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];
}
like image 29
Milan Manwar Avatar answered Oct 08 '22 23:10

Milan Manwar