UICollectionViewCell - применение разных CAGradientLayer к разным UIView

Question

TL; DR: есть 2 вида (сверху и снизу), для которых требуется CAGradientLayer.Неожиданное поведение заключается в том, что только вид сверху отображает градиент.Внизу не отображается градиент.

В нашем приложении у меня есть представление, которое имеет вид UICollection, как видно на изображении:

Длякаждый UICollectionViewCell, я создал собственный класс, чтобы сделать детали макета.На UICollectionViewCell у меня есть "topBackground" и "bottomBackground", которые являются представлениями, которые будут содержать метки с информацией для каждой ячейки:

@IBOutlet weak var topBackground: UIView! 
@IBOutlet weak var bottomBackground: UIView!

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

Мы решили добавить эффект градиента на вид сверху и снизу (см. Подробности на изображении, верхний градиент отмечен красным, а нижний - желтым) .

Для кода мы использовали следующее:

override func layoutSubviews() {
        if !didLayout{                
             // Top View
            let gradientLayer: CAGradientLayer = CAGradientLayer()
            gradientLayer.frame = topBackground.frame
            gradientLayer.colors =
                [UIColor.black.withAlphaComponent(0.5).cgColor, UIColor.black.withAlphaComponent(0).cgColor]
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.9)
            topBackground.layer.insertSublayer(gradientLayer, at: 0)
            topBackground.backgroundColor = .clear
            topBackground.alpha = 0.5

            // Bottom View
            let gradientLayerBottom: CAGradientLayer = CAGradientLayer()
            gradientLayerBottom.frame = bottomBackground.frame
            gradientLayerBottom.colors =
                [UIColor.black.withAlphaComponent(0.5).cgColor, UIColor.black.withAlphaComponent(0).cgColor]
            gradientLayerBottom.startPoint = CGPoint(x: 0.5, y: 0.9)
            gradientLayerBottom.endPoint = CGPoint(x: 0.5, y: 0)
            bottomBackground.layer.insertSublayer(gradientLayerBottom, at: 0)
            bottomBackground.backgroundColor = .clear
            bottomBackground.alpha = 0.5

            didLayout = true
        } else {
            print("already performed layout")
        }
    }

Переменная didLayout предназначена для избежания перекрытия нескольких градиентов при прокрутке представления коллекции.

Результаты:

1. Вид сверху отображает градиент (ожидается).
2. Вид снизу не отображает градиент (неожиданно).

Мы знаем, что вид снизу работает с работающими ограничениями, потому что если мы изменим цвет на .clear, он отобразит другой цвет.Это просто gradientLayerBottom, который не отображается.

Есть идеи, как получить gradientLayerBottom для отображения?

Answer 1

Попробуйте это

extension UIView{
    func setGradientBackgroundImage(colorTop: UIColor, colorBottom: UIColor) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
        gradientLayer.frame = bounds
        layer.insertSublayer(gradientLayer, at: 0)
    }
}

Введите UICollectionViewCell класс

class CollVwCell : UICollectionViewCell{

    @IBOutlet weak var VwTop: UIView!
    @IBOutlet weak var VwBottom: UIView!

    override func awakeFromNib() {
        super.awakeFromNib()
        DispatchQueue.main.async {
            self.VwTop.setGradientBackgroundImage(colorTop: UIColor.red, colorBottom: UIColor.white)
            self.VwBottom.setGradientBackgroundImage(colorTop: UIColor.white, colorBottom: UIColor.purple)
        }
    }
}

Выход: