如何在UICollectionView上设置渐变固定背景？

Question

我使用了以下代码。

CAGradientLayer* collectionRadient = [CAGradientLayer layer];
collectionRadient.bounds = self.collectionView.bounds;
collectionRadient.anchorPoint = CGPointZero;
collectionRadient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor],(id)[endColor CGColor], nil];
[self.collectionView.layer insertSublayer:collectionRadient atIndex:0];

但它包含的细胞包括图像。所以细胞没有显示出来。

我想在Cells下绘制UICollectionView的渐变背景，并在滚动视图时修复它。 请告诉我。

Answer 1

试试这个......您必须指定一个视图才能使用背景视图。

CAGradientLayer* collectionGradient = [CAGradientLayer layer];
collectionGradient.bounds = self.view.bounds;
collectionGradient.anchorPoint = CGPointZero;
collectionGradient.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor greenColor] CGColor], nil];
UIView *vv = [[UIView alloc] init];
vview.backgroundView = vv;
[vview.backgroundView.layer insertSublayer:collectionGradient atIndex:0];

Answer 2

在Swift 3.0中

我喜欢从渐变的自定义类开始

import UIKit
@IBDesignable
class GradientView: UIView {
    //set your start color
    @IBInspectable var startColor:   UIColor = UIColor.black { didSet { updateColors() }}
    //set your end color
    @IBInspectable var endColor:     UIColor = UIColor.white { didSet { updateColors() }}
    //you can change anchors and directions
    @IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
    @IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
    @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
    @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}
    override class var layerClass: AnyClass { return CAGradientLayer.self }
    var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
    func updatePoints() {
        if horizontalMode {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
        } else {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
        }
    }
    func updateLocations() {
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
    }
    func updateColors() {
        gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePoints()
        updateLocations()
        updateColors()
    }
}

将自定义类放在项目中的某个位置并添加到目标中，您只需按照前面的说明进行操作，并将其添加为背景视图而不是背景颜色或发送到后面的单独普通视图

如此实施：

let gradient = GradientView()
gradient.frame = self.view.bounds
//add to your collectionView
collectionView?.addSubview(gradient)
collectionView?.sendSubview(toBack: gradient)
self.collectionView?.backgroundView = gradient

Answer 3

方向

1. 创建视图
2. 将该视图分配给您collectionView的backgroundView
3. 创建渐变
4. 将渐变层添加到collectionView backgroundView

Code Swift 4.2

  private func addBackgroundGradient() {
    let collectionViewBackgroundView = UIView()
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame.size = view.frame.size
    // Start and end for left to right gradient
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]
    collectionView.backgroundView = collectionViewBackgroundView
    collectionView.backgroundView?.layer.addSublayer(gradientLayer)
  }

如果要从上到下渐变，只需删除endPoint和startPoint。您可以阅读有关渐变here的更多信息。

请注意，startPoint和endPoint是在(0.0, 0.0)至(1.0, 1.0)的坐标平面中定义的。