Search code examples
iosswiftxcodeconstraintscagradientlayer

CAGradientLayer not being applied to whole screen


I am trying to apply a gradient layer to a screen but annoyingly the layer only takes up half of the screen.

I think the issue seems to come from this problem here:

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

This is my first time working with programmatic constraints so it's a bit tricky for me to see where the problem lies.

Here is an image of what happens

Here is the code below

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

Solution

  • In above code Background color of textView covered gradient layout, so clearing it will make gradient visible

    Your setupLayout method should look like this -

    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
        }