UICollectionview cells change when scrolling

Question

My UICollectionview looks like this:

My UICollectionviewCell contains an Image, and by setting the corner radius property I am trying to make it round, but this is the result. The same goes for my Image in my HeaderView.

Moreover do my UICollectionviewCells change when I scroll and randomly change appearance, by some finally being round, some even diamond shaped and some icons being black.

Here is the code I'm using for the CollectionviewCell:

func collectionView(_ collectionView: UICollectionView,
                             cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    //1
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewCell",
                                                  for: indexPath) as! CollectionViewCell
    cell.imageView.layoutIfNeeded()
    cell.imageView.layer.masksToBounds = true
    cell.backgroundColor = UIColor.clear
    cell.imageView.tintColor = UIColor.white
    cell.imageView.layer.borderWidth = 2
    cell.imageView.layer.borderColor = UIColor.white.cgColor
    cell.imageView.layer.cornerRadius = cell.frame.width/2


    let icon = categories[indexPath.item]?.image
    cell.nameLabel.text = categories[indexPath.item]?.name
    cell.nameLabel.textColor = UIColor.white
    cell.imageView.image = icon
    let selected = categories[indexPath.item]?.selected
    if selected! {
        cell.isSelected = true
        collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
        cell.imageView.backgroundColor = UIColor.white
        cell.imageView.tintColor = colors.colorBottom
    }


    return cell
}

Here is the code of my HeaderView:

//make the profileImageView round
    imageview.layer.masksToBounds = true
    imageview.layer.cornerRadius = imageview.frame.height/2
    imageview.layer.borderWidth = 4
    imageview.layer.borderColor = UIColor.white.cgColor

Answer 1

1. To make your imageView in UICollectionViewCell round , in Storyboard :

1. Set UICollectionViewCell's clipToBounds to true
2. Set UIImageView's clipToBounds to true
3. Set the aspectRatio of imageView = 1:1

Remove these 2 line from cellForItemAt

cell.imageView.layoutIfNeeded()
cell.imageView.layer.masksToBounds = true

2. Below line must be responsible for the icons becoming black

    cell.imageView.tintColor = colors.colorBottom

Check if you are changing the selected status in categories array whenever a cell is selected?

3. In headerView :

1. Set the aspectRatio of imageView = 1:1 in storyboard
2. From your code, remove:

imageview.layer.masksToBounds = true

3. In storyboard : Set UIImageView's clipToBounds to true

4. Screenshot:

Let me know if you need any other kind of help regarding the code.

Answer 2

您不能假定出队后重新计算了单元格的帧，请改用常量值：

cell.imageView.layer.cornerRadius = 16.0