Question

我正在尝试使用KingFisher（图像缓存库）设置带有圆形图像的collectionView。

我不确定应该使用圆角，imageView或单元格本身设置什么。即使细胞是圆形的，图像似乎也填满了正方形。

到目前为止，我正在使用此代码（如果我在将图像更改为正方形后没有设置它）：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
...
if let path = user.profilePictureURL {
                    if let url = URL(string: path) {
                        cell.profilePictureImageView.kf.setImage(with: url)
                        cell.profilePictureImageView.layer.cornerRadius = cell.profilePictureImageView.frame.width/2.0
                    }
                }

和ImageView：

class ProfilePicture : UIImageView {

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.commonInit()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

    func commonInit(){
        self.layer.masksToBounds = false
        self.layer.cornerRadius = self.layer.frame.width/2.0
        self.clipsToBounds = true
    }
}

但是第一次下载图像时，它们就像这样（单元格背景为蓝色）

Answer 1

您可以这样使用：

extension UIImageView {

   func setRounded() {
      let radius = CGRectGetWidth(self.frame) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
   }
}

然后按如下方式调用方法：

imageView.setRounded()

Answer 2

您可以通过调整高度（纵向）而不是宽度来获得圆圈：

self.layer.cornerRadius = self.layer.frame.height/2.0

如果您对结果不满意，您必须调整您的contentMode.scaleAspect。通过调整长边，你可以获得一个圆圈，但你不会看到整个图像。

Answer 3

您可以在图像中得到一个带有UIView扩展名的圆圈

extension UIImage {
var circleMask: UIImage {
    let square = size.width < size.height ? CGSize(width: size.width, height: size.width) : CGSize(width: size.height, height: size.height)
    let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
    imageView.contentMode = UIView.ContentMode.scaleAspectFill
    imageView.image = self
    imageView.layer.cornerRadius = square.width/2
    //imageView.layer.borderColor = UIColor.white.cgColor
    //imageView.layer.borderWidth = 5
    imageView.layer.masksToBounds = true
    UIGraphicsBeginImageContext(imageView.bounds.size)
    imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
    let result = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return result!
}}

UICollectionViewCell - 圆形下载图像

3 个答案: