ios - UICollectionViewCell 中的渐变背景

Question

我创建了一个UICollectionView像信用卡一样的单元格，并希望添加渐变层作为这张卡片的背景。首先，我为 shadow( shadowView) 添加了背景视图，然后为渐变 layer( bgView) 添加了第二个视图，并添加CAGradientLayer为bgView. 但我没有得到任何渐变视图。这是我的代码：

class CardCell: BaseCell {

    private var shadowView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.white
        view.layer.shadowColor = UIColor.shadowColor.cgColor
        view.layer.shadowOffset = CGSize(width: 0, height: 1.0)
        view.layer.shadowOpacity = 0.1
        view.layer.shadowRadius = 15.0
        return view
    }()

    private var bgView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.layer.cornerRadius = 5
        view.layer.masksToBounds = true
        view.backgroundColor = .clear
        view.layer.addSublayer(createGradientLayer(for: view))
        return view
    }()

    override func setup() {
        super.setup()
        addSubview(shadowView)
        addSubview(bgView)

        // setup constraints
        shadowView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.9).isActive = true
        shadowView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 1).isActive = true
        shadowView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        shadowView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

        bgView.topAnchor.constraint(equalTo: shadowView.topAnchor).isActive = true
        bgView.bottomAnchor.constraint(equalTo: shadowView.bottomAnchor).isActive = true
        bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
        bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true

    }

    private static func createGradientLayer(for view: UIView) -> CAGradientLayer {
        let color = UIColor(red:0.95, green:0.42, blue:0.64, alpha:1.0)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.bounds
        gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.1, y: 1.1)
        return gradientLayer
    }

}

但是，如果我更改此代码并从中删除渐变设置bgView init并在约束后将其写入，一切正常，但阴影视图消失了：

. . .
bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true

bgView.layoutIfNeeded()
bgView.layer.addSublayer(CardCell.createGradientLayer(for: bgView))

标签： iosswiftswift4gradient

Answer 1

extension UIView {
func addGradientToViewWithCornerRadiusAndShadow(radius:CGFloat,firstColor:UIColor,secondColor:UIColor,locations:[CGFloat]){
        for layer in (self.layer.sublayers ?? []){
            if let layer1 = layer as? CAGradientLayer{
                layer1.removeFromSuperlayer()
            }
        }
        let gradient = CAGradientLayer()
        var rect = self.bounds
        rect.size.width = ScreenWidth
        gradient.frame = rect
        gradient.colors = [firstColor.cgColor, secondColor.cgColor]
        gradient.locations = locations as [NSNumber]
        gradient.startPoint = CGPoint.init(x: 0, y: 0)
        gradient.endPoint = CGPoint.init(x: 0, y: 1)
        gradient.cornerRadius = radius
        gradient.shadowRadius = 2
        gradient.shadowColor = UIColor.lightGray.cgColor
        gradient.shadowOffset = CGSize.init(width: 0.5, height: 0.5)
        gradient.shadowOpacity = 0.5
        self.layer.insertSublayer(gradient, at: 0)
    }
}

尝试使用这个 UIView 的扩展。让我知道这是否有帮助。