如何在 swift 中裁剪 collectionview 单元格外的部分图像

Question

我有一个设计简单的应用程序，右上角只有一个圆形图像。我正在尝试做一些像他们在 bloom 应用程序上所做的事情。

看看图像的边缘是如何在单元格的边缘被切断的，我正在尝试做类似的事情，但我一直这样。

我有一种感觉，整个细胞只是一个图像，所以它看起来像那样，但我不知道制作整个细胞图像是否是我想要做的，因为我计划最终能够在不同时间更改单元格的颜色和圆形图像的颜色，并使用不同的颜色，所以我不感兴趣只为单元格使用大图像，因为我可能也想使用不同的图像。解决这个问题似乎比创建几十个不同的图像更容易，这也会增加应用程序的大小。

我查看了一些不同的帖子，但其中 none 似乎对我有用。

我试过了：

将图像和背景的边框设置为边界
使用所有不同的内容模式
使用 clipsToBound 和 masksToBounds 并将它们设置为 true 或 false。

这是我手机里的内容：

    contentView.addSubview(cellBackgrounded)
        cellBackgrounded.addSubview(imgView)
//        imgView.frame = cellBackgrounded.bounds  set this to = self.bounds, contentView.frame
//        contentView.frame = self.bounds
//        cellBackgrounded.frame = self.bounds
//        imgView.layer.masksToBounds = false
        imgView.translatesAutoresizingMaskIntoConstraints = false
        imgView.image = UIImage(named: "Oval")?.withRenderingMode(.alwaysTemplate)
        imgView.clipsToBounds = true
        imgView.contentMode = .scaleToFill
        imgView.tintColor = .red
        
        cellBackgrounded.translatesAutoresizingMaskIntoConstraints = false
        cellBackgrounded.backgroundColor = .white
        cellBackgrounded.addSubview(cellName)
        cellName.translatesAutoresizingMaskIntoConstraints = false
        cellName.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 50, weight: .bold))
        cellName.textColor = .black
        cellName.numberOfLines = 0
        cellName.textAlignment = .center
        
        darkShadow.frame = self.bounds
        darkShadow.cornerRadius = 15
        darkShadow.backgroundColor = UIColor.offWhite.cgColor
        darkShadow.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        darkShadow.shadowOffset = CGSize(width: 10, height: 10)
        darkShadow.shadowOpacity = 1
        darkShadow.shadowRadius = 15
        self.layer.insertSublayer(darkShadow, at: 0)
        
        NSLayoutConstraint.activate([
            cellBackgrounded.topAnchor.constraint(equalTo: topAnchor),
            cellBackgrounded.leadingAnchor.constraint(equalTo: leadingAnchor),
            cellBackgrounded.trailingAnchor.constraint(equalTo: trailingAnchor),
            cellBackgrounded.bottomAnchor.constraint(equalTo: bottomAnchor),
            imgView.topAnchor.constraint(equalTo: cellBackgrounded.topAnchor, constant: -40),
            imgView.trailingAnchor.constraint(equalTo: cellBackgrounded.trailingAnchor, constant: 40),
            cellName.centerXAnchor.constraint(equalTo: cellBackgrounded.centerXAnchor),
            cellName.centerYAnchor.constraint(equalTo: cellBackgrounded.centerYAnchor),
            cellName.leadingAnchor.constraint(equalTo: cellBackgrounded.leadingAnchor, constant: 10),
            cellName.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            imgView.heightAnchor.constraint(equalTo: cellBackgrounded.heightAnchor, multiplier: 0.7),
            imgView.widthAnchor.constraint(equalTo: cellBackgrounded.widthAnchor, multiplier: 0.7)
        ])

如果还有什么我可以帮忙的，请问，谢谢

Answer 1

使用clipToBounds

根据苹果文档：

When the value of this property is true, Core Animation creates an implicit clipping mask that matches the bounds of the layer and includes any corner radius effects

必须对containerView做clipsToBound才能解决这个问题

containerView.clipsToBound = true

如何在 swift 中裁剪 collectionview 单元格外的部分图像

How to crop part of the image outside of a collectionview cell in swift

ios

swift

uiimageview

collectionview