滚动时,渐变背景会不断更改“收藏夹”视图单元格的颜色

时间:2020-07-24 15:19:29

标签: swift xcode uicollectionview

我是个敏捷而又xcode的菜鸟。我的大部分开发工作都围绕观看youtube视频并尽我所能复制他们的作品。我正在从事这个项目,该项目的集合视图中有一个主题列表,这些主题基本上是集合视图单元格中的按钮。

当我为按钮设置纯色背景色时,输出工作正常,并且通过分配单元格的颜色使单元格正常运行。但是,当我想实现setGradientBackground()函数(在youtube上的许多教程中以及下面的代码中列出)时,该应用程序的行为会完全改变:

https://drive.google.com/file/d/1pVHBjeCa7SHrDRtIpmqFoNdQGFOjxz3f/view?usp=sharing

^如上面的视频所示,前2个按钮和后2个按钮在滚动时会暂时改变。但是由于某种原因,中间的按钮(例如微积分BC)保持相同的颜色。以下是我的用于容纳集合视图的View控制器的代码:

import UIKit

class AddSubjectsViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet weak var AddSubjectsCollectionView: UICollectionView!
    //, "Physics I", "Chemistry", "Environmental Science", "Physics II", "Physics III/C"
    let subjects = ["Algebra I", "Geometry", "Algebra II", "Pre-Calculus", "Calculus AB", "Calculus BC", "Statistics", "Biology"]
    let firstColors: [UIColor] = [Colors.Algebra1a, Colors.Geometrya, Colors.Algebra2a, Colors.Precalculusa, Colors.CalculusABa, Colors.CalculusBCa, Colors.Statisticsa,Colors.Biologya]
    let secondColors: [UIColor] = [Colors.Algebra1b, Colors.Geometryb, Colors.Algebra2b, Colors.Precalculusb, Colors.CalculusABb, Colors.CalculusBCb, Colors.Statisticsb, Colors.Biologyb]
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        AddSubjectsCollectionView.dataSource = self
        AddSubjectsCollectionView.delegate = self
        overrideUserInterfaceStyle = .light
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return subjects.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! AddSubjectsCollectionViewCell
        cell.SubjectButton.setTitle(subjects[indexPath.item], for: .normal)
        //cell.SubjectButton.backgroundColor = firstColors[indexPath.item] <- this statement works perfectly if only this is enabled
        cell.SubjectButton.setGradientBackground(colorOne: firstColors[indexPath.item], colorTwo: secondColors[indexPath.item]) //this is where the problem actually lies
        cell.SubjectButton.layer.cornerRadius = 30
        cell.SubjectButton.translatesAutoresizingMaskIntoConstraints = false
        cell.SubjectButton.clipsToBounds = true

        
        return cell
    }

}

这只是Collection视图单元格类(仅是按钮的iboutlet没什么):

import UIKit

class AddSubjectsCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var SubjectButton: UIButton!
}

下面是一个单独文件的代码,其中包含添加渐变背景的扩展名:

import Foundation
import UIKit

extension UIView {
    
    func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
        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)
    }
}

最后,在视图控制器的代码中,我提到了UIColors数组的一些常量,这是一个单独的文件,其中包含RGBA值并将其命名为主题按钮的颜色:

import Foundation
import UIKit

struct Colors {
    //Templating Colors
    static let brightOrange     = UIColor(red: 255.0/255.0, green: 69.0/255.0, blue: 0.0/255.0, alpha: 1.0)
    static let red              = UIColor(red: 255.0/255.0, green: 115.0/255.0, blue: 115.0/255.0, alpha: 1.0)
    static let orange           = UIColor(red: 255.0/255.0, green: 175.0/255.0, blue: 72.0/255.0, alpha: 1.0)
    static let blue             = UIColor(red: 74.0/255.0, green: 144.0/255.0, blue: 228.0/255.0, alpha: 1.0)
    static let green            = UIColor(red: 91.0/255.0, green: 197.0/255.0, blue: 159.0/255.0, alpha: 1.0)
    static let darkGrey         = UIColor(red: 85.0/255.0, green: 85.0/255.0, blue: 85.0/255.0, alpha: 1.0)
    static let veryDarkGrey     = UIColor(red: 13.0/255.0, green: 13.0/255.0, blue: 13.0/255.0, alpha: 1.0)
    static let lightGrey        = UIColor(red: 200.0/255.0, green: 200.0/255.0, blue: 200.0/255.0, alpha: 1.0)
    static let black            = UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
    static let white            = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0)
    
    //Formatic Custom Colors
    
    
    //Math
    static let Algebra1a        = UIColor(red: 211.0/255.0, green: 47.0/255.0, blue: 47.0/255.0, alpha: 1.0) //red 700
    static let Algebra1b        = UIColor(red: 229.0/255.0, green: 115.0/255.0, blue: 115.0/255.0, alpha: 1.0) //red 300
    static let Geometrya        = UIColor(red: 41.0/255.0, green: 122.0/255.0, blue: 84.0/255.0, alpha: 1.0)
    static let Geometryb        = UIColor(red: 66.0/255.0, green: 216.0/255.0, blue: 147.0/255.0, alpha: 1.0)
    static let Algebra2a        = UIColor(red: 200.0/255.0, green: 110.0/255.0, blue: 0.0/255.0, alpha: 1.0)
    static let Algebra2b        = UIColor(red: 234.0/255.0, green: 177.0/255.0, blue: 72.0/255.0, alpha: 1.0)
    static let Precalculusa     = UIColor(red: 255.0/255.0, green: 45.0/255.0, blue: 85.0/255.0, alpha: 1.0)
    static let Precalculusb     = UIColor(red: 255.0/255.0, green: 99.0/255.0, blue: 128.0/255.0, alpha: 1.0)
    static let CalculusABa      = UIColor(red: 191.0/255.0, green: 18.0/255.0, blue: 7.0/255.0, alpha: 1.0)
    static let CalculusABb      = UIColor(red: 240.0/255.0, green: 64.0/255.0, blue: 53.0/255.0, alpha: 1.0)
    static let CalculusBCa      = UIColor(red: 7.0/255.0, green: 32.0/255.0, blue: 191.0/255.0, alpha: 1.0)
    static let CalculusBCb      = UIColor(red: 74.0/255.0, green: 93.0/255.0, blue: 217.0/255.0, alpha: 1.0)
    static let Statisticsa      = UIColor(red: 0.0/255.0, green: 121.0/255.0, blue: 107.0/255.0, alpha: 1.0)
    static let Statisticsb      = UIColor(red: 77.0/255.0, green: 182.0/255.0, blue: 172.0/255.0, alpha: 1.0)

    //Science
    static let Biologya         = UIColor(red: 111.0/255.0, green: 160.0/255.0, blue: 12.0/255.0, alpha: 1.0)
    static let Biologyb         = UIColor(red: 143.0/255.0, green: 194.0/255.0, blue: 43.0/255.0, alpha: 1.0)
    static let Chemistrya       = UIColor(red: 85.0/255.0, green: 85.0/255.0, blue: 85.0/255.0, alpha: 1.0)
    static let Chemistryb       = UIColor(red: 200.0/255.0, green: 200.0/255.0, blue: 200.0/255.0, alpha: 1.0)
    
    //Math Font Colors
    static let Algebra1font     = UIColor(red: 219.0/255.0, green: 155.0/255.0, blue: 146.0/255.0, alpha: 1.0)
    static let Geometryfont     = UIColor(red: 219.0/255.0, green: 155.0/255.0, blue: 146.0/255.0, alpha: 1.0)
    static let Algebra2font     = UIColor(red: 255.0/255.0, green: 199.0/255.0, blue: 131.0/255.0, alpha: 1.0)
}

我完全不知道为什么单元格会在滚动时自动更改其渐变颜色。我尝试搜索有关stackoverflow和youtube的许多教程和问题,但我什么也听不懂。我该如何阻止这种自动更改?

P.S。如果它可以帮助任何人更好地理解我的问题,我希望使UI看起来与快捷方式应用程序非常相似,除了我不想要随机颜色,我想要数组中的渐变颜色。希望有道理。

0 个答案:

没有答案