在 UITableViewCell 的背景图像上添加渐变

Posted 2023-02-23

【中文标题】在 UITableViewCell 的背景图像上添加渐变

【英文标题】：Adding gradient on background image of UITableViewCell

【发布时间】：2017-11-08 18:59:56

【问题描述】：

我在UIViewController 中有一个UITableView。我正在尝试在UITableViewCell 中的背景图像上应用渐变。我可以绘制一个渐变，但它在颜色之间绘制一条干净的线而不是渐变。

在我的cellForRowAt 中，我将一个对象分配给我的CustomTableViewCell，如下所示：

  let cellIdentifier = "Cell"
  // all the standard data source, delegate stuff for uitableviews

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! CustomTableViewCell
    let scheduleItem = scheduleData[indexPath.row]
    cell.scheduleStruct = scheduleItem
    return cell
  

在CustomTableViewCell 中，我已经声明了这个属性：

    public var scheduleStruct: FullScheduleStruct? 
    didSet 
      configureCell()
    
    // emptyView to throw on top of a background image
    var gradientView: UIView?

我还使用Kingfisher 从互联网上提取图像，这就是ImageResource(downloadURL: url) 部分的情况。设置scheduleStruct时调用的configureCell()方法如下：

    private func configureCell() 

    // get the background image
    if let url = scheduleStruct?.show.image?.original 
      let imageUrl = ImageResource(downloadURL: url)
      backgroundImageView.contentMode = .scaleAspectFill
      backgroundImageView.kf.setImage(with: imageUrl)

      // configure the gradientView
      gradientView = UIView(frame: backgroundImageView.frame)
      let gradient = CAGradientLayer()
      gradient.frame = gradientView!.frame
      gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor]
      // gradient.locations = [0.0, 1.0]
      gradient.startPoint = CGPoint(x: 0, y: 0)
      gradient.endPoint = CGPoint(x: 0, y: 1)
      gradientView!.layer.insertSublayer(gradient, at: 0)
      backgroundImageView.insertSubview(gradientView!, at: 0)
    

任何关于我的错误所在的建议都非常感谢。感谢您的阅读。

【问题讨论】：

在颜色之间画一条干净的线是什么意思？”您能否附上一张显示此结果（也可能是您期望的结果）的图片？

尝试使用这个自定义渐变视图***.com/a/37243106/2303865

您的渐变代码在操场上运行良好。我怀疑问题出在你的 url 或你的 backgroundImageView.kf.setImage 上——如果你把它注释掉，你会得到你的渐变吗？

@DavidShaw 谢谢！事实证明我有一个时间问题，你的建议让我看到了。我发现了一个稍微不同的方法签名，用于设置其中包含完成处理程序的图像。使用它作为替代解决了我的问题。

【参考方案1】：

在David Shaw的建议下，我在configureCell()中注释掉了这一行

  // backgroundImageView.kf.setImage(with: imageUrl)

并且渐变绘制正确。我推断我有一个时间问题，因为我正在异步获取图像。

我查看了方法签名，发现有一个带有完成处理程序的，所以我改用它并且它起作用了：

  backgroundImageView.kf.setImage(with: imageUrl, completionHandler:  (image, error, cacheType, imageUrl) in
    // do stuff
  )

...所以我做了this。