Question

我有一张桌子。我使用xib文件创建单元格。
我需要一个单元格（当前用户）作为渐变背景，我创建了一个背景渐变层，但它不适合查看。我下拉列表后，它就可以了。

您可以看到我的屏幕截图，这是我的代码

//In the table cell,
if data.userUniqueId != nil && userUIID != nil && data.userUniqueId! == userUIID! {
            let startColor = UIColor(red: 253/255.0, green: 162/255.0, blue: 75/255.0, alpha: 1)
            let endColor = UIColor(red:251/255.0, green:215/255.0, blue: 126/255.0, alpha:1)
            self.setGradient(colors: [startColor.cgColor, endColor.cgColor],angle: 90)
            self.layer.borderColor = UIColor.white.cgColor
            self.layer.borderWidth = 2
            number.textColor = UIColor.white

        }

这是梯度法

 func setGradient(colors: [CGColor], angle: Float = 0) {
        let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height))
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = gradientLayerView.bounds
        gradient.colors = colors

        let alpha: Float = angle / 360
        let startPointX = powf(
            sinf(2 * Float.pi * ((alpha + 0.75) / 2)),
            2
        )
        let startPointY = powf(
            sinf(2 * Float.pi * ((alpha + 0) / 2)),
            2
        )
        let endPointX = powf(
            sinf(2 * Float.pi * ((alpha + 0.25) / 2)),
            2
        )
        let endPointY = powf(
            sinf(2 * Float.pi * ((alpha + 0.5) / 2)),
            2
        )

        gradient.endPoint = CGPoint(x: CGFloat(endPointX),y: CGFloat(endPointY))
        gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY))

        gradientLayerView.layer.insertSublayer(gradient, at: 0)
        layer.insertSublayer(gradientLayerView.layer, at: 0)
    }

还有如何从图层中删除渐变以供下次使用细胞？

编辑： 表格查看代码

extension RecordsViewController : UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return values.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: "ScoreBoardCell", for: indexPath) as? ScoreBoardCell {
            let score = self.values[indexPath.row]
            cell.setData(indexPath.row, score)
            cell.selectionStyle = .none
            return cell
        }
        return UITableViewCell()
    }
}

Answer 1

问题是这一行：

gradient.frame = gradientLayerView.bounds

在此代码在cellForRowAt中运行时，您的gradientLayerView尚未完全布置，因此尚不知道其bounds。因此，您会在gradient上加上frame，这在布局完成后将不适合其视图。

我认为，您可以通过将调用移至cell.setData到tableView(_:willDisplay:forRowAt:)来解决此问题，此时应知道像元大小。

还有如何从图层中删除渐变以供下次使用细胞？

好吧，这里的问题是您的条件别无选择：

if data.userUniqueId != nil && userUIID != nil && data.userUniqueId! == userUIID!

问题是：不是怎么办？在这种情况下，如果已添加渐变层，则需要将其删除。您没有针对这种情况提供任何逻辑。 —另外，您还需要小心，因为如果添加了渐变层并且您的逻辑现在导致您添加另一个渐变层怎么办？基本上，您的整个方法都没有考虑到有关表视图单元格的最基本事实，即它们已被重用。

Answer 2

您需要在内部调用

var once  = true

override func layoutSubviews() {
  super.layoutSubviews()
  if once  {
        let startColor = UIColor(red: 253/255.0, green: 162/255.0, blue: 75/255.0, alpha: 1)
        let endColor = UIColor(red:251/255.0, green:215/255.0, blue: 126/255.0, alpha:1)
        self.setGradient(colors: [startColor.cgColor, endColor.cgColor],angle: 90)
        once = false 
   }   
}

要正确删除单元格边界的位置，要删除

cell.contentView.subviews { 
  if $0.tag == 200 {
    $0.removeFromSuperview()
  }
}

并给它一个标签

 let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height))
 gradientLayerView.tag = 200

将任何内容添加到单元格时，请不要froget tp将其添加到contentView

contentView.addSubview(gradientLayerView)

Answer 3

[Xcode 12 Swift 5.2]

在找了几个小时之后，对我来说没有任何用处。在 layoutSubviews() 中更改渐变层的边界或在 willDisplayCell() 中设置渐变层。

所以我创建了一个渐变层并创建了它的 UIImage 并将该图像添加为背景。和这里的魅力一样，这是一个甜蜜而简单的扩展，用于将渐变层转换为 UIImage。

func getImageFrom(gradientLayer:CAGradientLayer) -> UIImage? {
        var gradientImage:UIImage?
        UIGraphicsBeginImageContext(gradientLayer.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            gradientLayer.render(in: context)
            gradientImage = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
        }
        UIGraphicsEndImageContext()
        return gradientImage
    }

制作 CAGradientLayer 的代码：

 let gradientLayer = CAGradientLayer()
gradientLayer.colors = [
            UIColor.init().Hex(hexString: "#EB0089").cgColor,
            UIColor.init().Hex(hexString: "#FD2E59").cgColor
        ]
        
        gradientLayer.cornerRadius = self.layer.cornerRadius
        
       
        gradientLayer.startPoint = CGPoint(x: 0, y: 1)
        gradientLayer.endPoint = CGPoint(x: 0, y: 0)
        gradientLayer.frame = Button1.bounds

let GradientImage = UIImage().getImageFrom(gradientLayer: gradientLayer)

在您想要的任何位置设置 GradientImage。

UITableViewCell背景渐变在第一次渲染时不起作用

3 个答案: