如何在 TableView Controller 后面应用渐变？

Question

我在故事板中有一个 UITableViewController。我想在 table 的背面应用渐变。我使用此代码在其他视图上应用渐变，但在 table 视图控制器的情况下，渐变似乎只是覆盖在 table 视图本身上。

我试过给 tableView 而不是 view 设置渐变，但效果是一样的。

  //MARK:gradient and orientation
    func applyGradient()
    {

        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.view.bounds
        gradientLayer.colors = [UIColor.purple.cgColor,UIColor.red.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 0, y: 1)
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }
    //Gradient
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        applyGradient()
    }

Answer 1

获取UITableView的渐变背景有很多种方法。 关键是利用CAGradientLayer class.

CAGradientLayer

CAGradientLayer 是 CALayer 的子 class。如您所知，CALayer 是 UIView 实例的支持块并进行基本渲染。 CAGradientLayer 用于渐变效果。

更改底层 class 类型的 UIView 或 UIView Subclasses

您可以更改 class UIView 背层的类型或其子class类型。
为此，您必须覆盖 UIView 的 layerClass 属性 或其子 class.

class GradientTableView: UITableView {

    // Note this line of code
    override class var layerClass: AnyClass { return CAGradientLayer.self } 

    // More codes ...  
}  

作为 CAGradientLayer 访问图层

因为你有 class 到 CAGradientLayer 的支持层，你的 UIView 或 subclass 的 .layer 现在是 CAGradientLayer 的一个实例。您可以安全地将类型转换 .layer 强制转换为它。

class GradientTableView: UITableView {

    override class var layerClass: AnyClass { return CAGradientLayer.self } 

    // Note this line of code
    var gradientLayer: CAGradientLayer { return self.layer as! CAGradientLayer }

    // More codes ...  
}  

想办法访问gradientLayer

CAGradientLayer 有它自己的属性使它看起来渐变。使其易于从 UIView 外部访问 class.

以下是GradientTableView的完整工作代码

@IBDesignable
class GradientTableView: UITableView {

    /*
     * You can change the type of backing layer through this override.
     */
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    /*
     * After overriden layerClass, your `layer` is now an instance of CAGradientLayer.
     *
     * You can safely force typecast your `layer` object as CAGradientLayer.
     */
    private var gradientLayer: CAGradientLayer! { return self.layer as? CAGradientLayer }


    // MARK:- CAGradientLayer helpers.
    @IBInspectable private var startColor: UIColor = .white {
        didSet { gradientColors = [startColor, endColor] }
    }

    @IBInspectable private var endColor: UIColor = .white {
        didSet { gradientColors = [startColor, endColor] }
    }


    var gradientColors: [UIColor] = [] {
        didSet { gradientLayer.colors = gradientColors.map{ [=12=].cgColor } }
    }

    /// Starting point for gradient color.
    @IBInspectable var gradientStartPoint: CGPoint {
        set { gradientLayer.startPoint = newValue }
        get { return gradientLayer.startPoint }
    }

    /// Ending point for gradient color.
    @IBInspectable var gradientEndPoint: CGPoint {
        set { gradientLayer.endPoint = newValue }
        get { return gradientLayer.endPoint }
    }
}

通过情节提要中的身份检查器将您的 UITableView 更改为 GradientTableView。

使用情节提要中的一些值。

你会得到一个整洁的 UITableView 渐变背景。

Answer 2

将渐变图层插入 UIView 并将其指定为 tableView 的 backgroundView:-

let gradientLayer = CAGradientLayer()
gradientLayer.frame = yourTableView.bounds
gradientLayer.colors = [UIColor.purple.cgColor,UIColor.red.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)

let backgroundView = UIView(frame: yourTableView.bounds)    
backgroundView.layer.insertSublayer(gradientLayer, at: 0)

yourTableView.backgroundView = backgroundView

还要确保您的单元格 .clear 颜色