Bug with rounded UIImageViews in a UICollectionViewCell

Question

So today I was experimenting with Collection Views and ran into quite an interesting bug.

The bug is that the imageView circles which I had are never perfect, unless I scroll them off the screen. Their shape resembles that of a rhombus with rounded edges.

And after I scroll up and down again so that the top cells become temporarily out of sight, the cells which were out of sight are now perfect circles.

Here is my code for the cell class:

class FavouritesCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var profilePicutreImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!

    override var bounds: CGRect {
        didSet {
            contentView.frame = bounds
        }
    }

    override func layoutSubviews() {
        profilePicutreImageView.layer.borderWidth = 2.0
        profilePicutreImageView.layer.masksToBounds = false
        profilePicutreImageView.layer.cornerRadius = profilePicutreImageView.frame.width/2
        profilePicutreImageView.layer.borderColor = UIColor.blackColor().CGColor
        profilePicutreImageView.clipsToBounds = true

    }
}

Any ideas about what this may be?

UPDATE---Here are the pictures of what is happening

Before:

After:

Usually I use to set layer properties within initFrame and set masksToBounds=true — tylyo, Sep 27 '15 at 14:53
I'm afraid setting it to true doesn't help. How would you go about setting it with an initFrame? — , Sep 27 '15 at 15:37

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

I answered a similar question here

First, I would call super to layoutSubviews. After that, call layoutIfNeeded when you bind your data to the cell:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
          cellForItemAtIndexPath:(NSIndexPath *)indexPath
     UICollectionViewCell*cell = ...
     // Do your stuff here to configure the cell
     // Tell the cell to redraw its contentView        
     [cell layoutIfNeeded];
}

edited May 23 '17 at 12:04

Community

1
1

answered Nov 16 '15 at 12:10

Pablo Romeu

2,033
1
13
15

Thank you very much Pablo. – Dec 17 '15 at 18:31

score 0 · Answer 2 · answered Sep 28 '15 at 06:57

I think this is related to that you set the imageView's border in method layoutSubview which will be called multiple time during cell's lift cycle under different circumstances.

set the imageView's border in initWithFrame won't help if you init the cell with xib or in storyboard. Instead do it in awakeFromNib. Or do it in a more swift style way like such

@IBOutlet var avatar: UIImageView! {
        didSet {
            avatar.clipsToBounds = true
            avatar.layer.cornerRadius = 37.5
        }
    }

I tried both the didSet and the awakeFromNib, but the bug has not gone away — , Sep 28 '15 at 13:01

Bug with rounded UIImageViews in a UICollectionViewCell

2 Answers2