创建一个带有前导/尾随褪色边缘的 UIView

Posted 2023-02-23

【中文标题】创建一个带有前导/尾随褪色边缘的 UIView

【英文标题】：Create a UIView with leading / trailing faded edges

【发布时间】：2019-03-21 12:20:30

【问题描述】：

我有一个UIView，我也想应用淡入淡出/渐变。我希望它只出现在边缘，我想要创建的效果是

图像顶部的灰线。中间为灰色，两边都褪为白色。

我尝试过类似的方法

  func render(content: FeedItem) 
        print(content.item.externalId)

//        rowSeperatorView.backgroundColor = UIColor.usingHex("f2f2f2")
        iconContainerView.backgroundColor = UIColor.usingHex("3bac58")


        let gradientLayer: CAGradientLayer = CAGradientLayer()
        gradientLayer.frame = rowSeperatorView.bounds
        gradientLayer.colors = [
            UIColor.white.cgColor,
            UIColor.usingHex("f2f2f2").cgColor,
            UIColor.white.cgColor,
        ]
        gradientLayer.locations = [0,0.5,1]

        rowSeperatorView.layer.addSublayer(gradientLayer)




        iconContainerView.layer.cornerRadius = 5
        iconContainerView.clipsToBounds = true
        iconContainerView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner]
    

但似乎无法达到这个结果。

【参考方案1】：

您快到了，尝试添加startPoint 和endPoint，然后使用位置属性。

    let gradient = CAGradientLayer()
    gradient.frame = rowSeperatorView.bounds
    gradient.colors = [UIColor.white.cgColor, UIColor.usingHex("f2f2f2").cgColor, UIColor.white.cgColor]

    gradient.locations = [0, 0.4, 0.6]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.0)

    rowSeperatorView.layer.addSublayer(gradient)