CAGradientLayer 未应用于整个屏幕

Question

我正在尝试将渐变图层应用到屏幕，但令人讨厌的是该图层仅占屏幕的一半。

我认为问题似乎来自这里的这个问题：

descriptionTextView.topAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

这是我第一次使用编程约束，所以我很难看出问题出在哪里。

Here is an image of what happens

下面是代码

class OBP1VC: UIViewController {

    let gradientLayer: CAGradientLayer = {
        let caGradient = CAGradientLayer()
        caGradient.frame = UIScreen.main.bounds
        caGradient.colors = [Colours.brightGreen.cgColor, Colours.midBlue.cgColor]
        caGradient.startPoint = CGPoint(x: 0.0, y: 0.0)
        caGradient.endPoint = CGPoint(x: 1.0, y: 1.0)
        return caGradient
    }()

    let bearImageView: UIImageView = {
        let imageView = UIImageView(image: #imageLiteral(resourceName: "br_flag"))
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

    let descriptionTextView: UITextView = {
        let textView = UITextView()
        textView.text = "Hello\n\nWelcome to the new\n\nHome Healthcare"
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.textAlignment = .center
        textView.isUserInteractionEnabled = false
        textView.font = UIFont(name: Fonts.avenirBlack, size: 20.0)
        return textView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.addSubview(bearImageView)
        view.addSubview(descriptionTextView)

        setupLayout()
    }

    override func viewDidLayoutSubviews() {
        view.layer.insertSublayer(gradientLayer, at: 0)
    }

    private func setupLayout() {

        bearImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        bearImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        bearImageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
        bearImageView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        descriptionTextView.topAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        descriptionTextView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        descriptionTextView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        descriptionTextView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
}

Answer 1

以上代码中textView的背景色覆盖了渐变布局，清除后渐变可见

您的 setupLayout 方法应如下所示 -

private func setupLayout() {

        bearImageView.backgroundColor = UIColor.red
        bearImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        bearImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        bearImageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
        bearImageView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        descriptionTextView.topAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        descriptionTextView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        descriptionTextView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        descriptionTextView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        descriptionTextView.backgroundColor = UIColor.clear
    }

Answer 2

将此类添加到您的项目中，并在情节提要中为您的视图提供此类，您还可以设置渐变颜色和位置，并且可以在情节提要中看到它的两种颜色渐变看看...

import Foundation
import UIKit


@IBDesignable
class GradientView: UIView {

    @IBInspectable var startColor:   UIColor = .black { didSet { updateColors() }}
    @IBInspectable var endColor:     UIColor = .white { didSet { updateColors() }}
    @IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
    @IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
    @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
    @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}

    override class var layerClass: AnyClass { return CAGradientLayer.self }
    var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }

    func updatePoints() {
        if horizontalMode {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
        } else {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
        }
    }
    func updateLocations() {
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
    }
    func updateColors() {
        gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        updatePoints()
        updateLocations()
        updateColors()
    }
}