如何在TableView Controller的背面应用渐变？

Question

我在情节提要中有一个UITableViewController。我想在桌子背面套上渐变色。我使用此代码在其他视图上应用了渐变，但是在使用表视图控制器的情况下，渐变似乎只是叠加在了表格视图本身上。

我尝试给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类。

CAGradientLayer

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

更改UIView或UIView子类的内衬层类类型

您可以更改UIView的底层或其子类的类类型。
为此，您必须重写UIView或其子类的layerClass属性。

class GradientTableView: UITableView {

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

    // More codes ...  
}  

以CAGradientLayer身份访问图层

由于您拥有CAGradientLayer的内衬层类，因此UIView或子类的.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类的外部轻松访问。

以下是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{ $0.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 }
    }
}

通过情节提要中的Identity Inspector将UITableView更改为GradientTableView。

从情节提要中播放一些值。

您将获得UITableView整洁的渐变背景。

Answer 2

将渐变图层插入from django.shortcuts import render from .models import Post from django.views.generic import ListView def blog(request): context = { 'posts': Post.objects.all() } return render(request=request, template_name='main/blog.html', context=context) class PostListViews(ListView): model = Post template_name = 'main/blog.html' def about(request): return render(request=request, template_name='main/about.html') 并将其指定为UIView的{​​{1}}：-

backgroundView

还要确保您的单元格是tableView颜色