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

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

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()
    }
}

CAGradientLayer 未应用于整个屏幕

CAGradientLayer not being applied to whole screen

ios

swift

xcode

constraints

cagradientlayer