UICollectionViewCell 中的渐变背景答案

【问题标题】：Gradient BG in UICollectionViewCellUICollectionViewCell 中的渐变背景
【发布时间】：2018-07-31 05:51:22
【问题描述】：

我创建了一个UICollectionView，其单元格类似于信用卡，并希望添加渐变层作为这张卡片的背景。首先我为阴影添加了背景视图（shadowView），然后为渐变层添加了第二个视图（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))

【问题讨论】：

this 是否与您想要实现的目标相似？
尝试将视图添加到单元格的内容视图 contentView.addSubview(shadowView) contentView.addSubview(bgView)
@LalKrishna 没有任何改变 :(
你能添加一张你想要实现的截图吗？
@LalKrishna 添加了屏幕截图。我想为图像上的卡片添加阴影。

标签： ios swift swift4 gradient

【解决方案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 的扩展。如果有帮助，请告诉我。

【讨论】：

【解决方案2】：

我认为你的渐变层添加到你的阴影视图显示你的阴影视图消失..你应该总是在层索引为 0 处添加渐变层。

bgView.layer.insertSublayer(CardCell.createGradientLayer(for: bgView), at: 0)

而你的图层创建方法需要使用frame代替bounds。

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.frame
    gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
    gradientLayer.locations = nil
    return gradientLayer
}

【讨论】：

问题依旧。它没有帮助:(
请检查更新的答案...使用框架代替边界。
尝试将位置设置为零作为更新的答案并删除起点和终点。并使用两种不同的颜色。
没有改变任何东西

【解决方案3】：

问题是当您添加渐变视图时，bgView 的布局不完全。所以界限将为零。

解决方案：

private var gradient: CAGradientLayer?

override func awakeFromNib() {
        super.awakeFromNib()
        self.setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        shadowView.layer.shadowPath = UIBezierPath(rect: shadowView.bounds).cgPath

        if let gradient = gradient {
            gradient.frame = bgView.bounds
        } else {
            gradient = TestCell.createGradientLayer(for: bgView)
            bgView.layer.addSublayer(gradient!)
        }
    }

输出：

【讨论】：