渐变使集合视图中的单元格之间保持快速切换 [英] gradient keeps switching between cells in collection view in swift

问题描述

我的收藏夹视图单元格具有渐变背景，并且每个渐变都取决于该单元格的标签(例如，圣诞节是紫色渐变，生日是绿色渐变)，但是在收藏夹视图中滚动时，渐变会保持不变在不断变化的细胞上.有办法解决这个问题吗?

I have a gradient background for my collection view cell and each gradient is different depending on what tag the cell is (e.g Christmas is a purple gradient, birthday is a green gradient) however when scrolling through the collection view, the gradients keep on changing cells. is there a way to fix this from happening?

这是我用于将渐变设置为背景视图的代码.它在cellForItemAt

this is the code I use to set the gradient to the background view. it is in cellForItemAt

cell.mainView.setGradientBackground(colours: self.getColourFromTag(tag: self.lists[indexPath.item].tag))

.setGradientBackground是UIView的扩展，它仅将渐变设置为背景.显示在这里:

.setGradientBackground is an extension of UIView which just sets a gradient to the background. shown here:

func setGradientBackground(colours: [CGColor]) {

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = colours
    gradientLayer.locations = [0.0, 1.0]
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)
    layer.insertSublayer(gradientLayer, at: 0)
}

我使用下面的方法来获取渐变中的颜色

I use the method below to get what colours are in the gradient

func getColourFromTag(tag: String) -> [CGColor] {

    if tag == "Christmas" {

        return [Colours.gradients.festive.start.cgColor, Colours.gradients.festive.end.cgColor]

    }else if tag == "Birthday" {

        return [Colours.gradients.lime.start.cgColor, Colours.gradients.lime.end.cgColor]

    }else if tag == "Valentines Day" {

        return [Colours.gradients.strawberry.start.cgColor, Colours.gradients.strawberry.end.cgColor]

    }else if tag == "Charity" {

        return [Colours.gradients.blueberry.start.cgColor, Colours.gradients.blueberry.end.cgColor]

    }else if tag == "Event" {

        return [Colours.gradients.fire.start.cgColor, Colours.gradients.fire.end.cgColor]

    }else{
        return [Colours.gradients.midnight.start.cgColor, Colours.gradients.midnight.end.cgColor]
    }
}

我尝试将每种[颜色]附加到数组中，然后像下面这样将其放置在indexPath.item处的.setGradientBackground中:

I have tried appending each [colour] into an array, then placing that into the .setGradientBackground at the indexPath.item like so:

var colours = [[CGColor]]()

colours[indexPath.item] = self.getColourFromTag(tag: self.lists[indexPath.item].tag)
cell.mainView.setGradientBackground(colours: colours[indexPath.item])

但是，这超出了范围，因此不起作用.有没有人有办法解决吗?谢谢.

however, this does not work since it is out of range. Does anyone have a solution? thank you.

推荐答案

在setGradientBackground()中读取代码，您总是会初始化一个新的CAGradientLayer并将其插入到单元格中的最低位置.每次再次调用setGradientBackground()时，新的渐变层将位于您已插入的所有其他渐变下面.

Reading your code in setGradientBackground(), you always init a new CAGradientLayer and insert it at the lowest position in your cell. Every time setGradientBackground() gets called again, the new gradient layer will be positioned below all other gradients you already inserted.

尝试从子层获取已经存在的CAGradientLayer并设置新颜色.

Try to get a already existing CAGradientLayer from sublayers and set the new colors.

    var gradientLayer = CAGradientLayer()
    if let sublayers = layer.sublayers {
        for sublayer in sublayers {
            if let gLayer = sublayer as? CAGradientLayer {
                gradientLayer = gLayer
                break
            }
        }
    }
    gradientLayer.frame = bounds
    gradientLayer.colors = colours
    gradientLayer.locations = [0.0, 1.0]
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)
    layer.insertSublayer(gradientLayer, at: 0)

编辑

这是更快捷的版本(Swift 4.2)，使用compactMap()来获取layer.sublayers中的第一个现有渐变层:

This is a more swift like version (Swift 4.2) using compactMap() for getting the first existing gradient layer in layer.sublayers:

if let existingLayer = (layer.sublayers?.compactMap { $0 as? CAGradientLayer })?.first {
    gradientLayer = existingLayer
}

这篇关于渐变使集合视图中的单元格之间保持快速切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！