Как добавить градиентный фон на весь экран в iOS приложении на Swift?

Проблема и её решение

Вы столкнулись с типичной ошибкой начинающих разработчиков. Ваш код почти правильный, но есть два важных момента:

• Перекрытие дочерних элементов — добавление sublayer поверх всех остальных слоёв делает невидимыми UI-компоненты.
• Некорректное обновление размеров — frame слоя не обновляется при повороте экрана.

Лучший способ — использовать отдельный UIView для градиента и добавить его как самый нижний слой. Вот правильное решение:

import UIKit

class ViewController: UIViewController {
    
    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setupGradientBackground()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // Обновляем frame градиента при изменении размеров (поворот, split view и т.д.)
        updateGradientFrame()
    }
    
    // MARK: - Gradient Setup
    private func setupGradientBackground() {
        let gradientView = GradientView()
        gradientView.translatesAutoresizingMaskIntoConstraints = false
        view.insertSubview(gradientView, at: 0) // Вставляем на самый низ иерархии
        
        // Заполняем весь родительский view
        NSLayoutConstraint.activate([
            gradientView.topAnchor.constraint(equalTo: view.topAnchor),
            gradientView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            gradientView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            gradientView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
    
    private func updateGradientFrame() {
        if let gradientView = view.subviews.first as? GradientView {
            gradientView.gradientLayer.frame = gradientView.bounds
        }
    }
}

// MARK: - GradientView
class GradientView: UIView {
    
    var gradientLayer: CAGradientLayer {
        return layer as! CAGradientLayer
    }
    
    // Переопределяем класс слоя
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }
    
    private func setupGradient() {
        gradientLayer.colors = [
            UIColor.systemBlue.cgColor,
            UIColor.systemPurple.cgColor
        ]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) // Верхний левый угол
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)   // Нижний правый угол
    }
}

Почему это работает?

• Отдельный UIView — градиент теперь живёт в собственном view, который вставляется в самый низ иерархии (at: 0). Все остальные элементы (кнопки, лейблы) находятся выше и не перекрываются.
• Переопределение layerClass — вместо создания CAGradientLayer вручную, мы заставляем UIView использовать CAGradientLayer как свой основной слой. Это автоматически связывает градиент с размерами view.
• Auto Layout — используем констрейнты, чтобы gradientView всегда занимал весь экран, даже при повороте.
• viewDidLayoutSubviews — обновляем frame градиента после любого изменения размеров (поворот, Split View, мультизадачность).

Более простой вариант (без отдельного класса)

Если вам не нужен переиспользуемый класс, можно сделать проще:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let gradientView = UIView()
    gradientView.translatesAutoresizingMaskIntoConstraints = false
    view.insertSubview(gradientView, at: 0)
    
    let gradient = CAGradientLayer()
    gradient.colors = [UIColor.blue.cgColor, UIColor.purple.cgColor]
    gradient.locations = [0.0, 1.0]
    gradient.frame = gradientView.bounds
    gradientView.layer.addSublayer(gradient)
    
    NSLayoutConstraint.activate([
        gradientView.topAnchor.constraint(equalTo: view.topAnchor),
        gradientView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        gradientView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        gradientView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
    
    // Сохраняем ссылку на слой для обновления
    self.gradientLayer = gradient
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    gradientLayer?.frame = view.bounds
}

Оба подхода корректно работают на iOS 13+ и решают все ваши проблемы.

class ViewController: UIViewController {
    
    private let gradientLayer = CAGradientLayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        gradientLayer.colors = [
            UIColor.systemTeal.cgColor,
            UIColor.systemIndigo.cgColor
        ]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        
        // Вставляем слой под все остальные
        view.layer.insertSublayer(gradientLayer, at: 0)
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        gradientLayer.frame = view.bounds
    }
}

gradientLayer.startPoint = CGPoint(x: 0, y: 0.5) // слева
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)   // справа