如何在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];

但是它绘制在包含图像的单元格上，因此单元格未显示。

我希望能在UICollectionView的单元格下面绘制渐变背景，并且在视图滚动时保持固定。 请告诉我如何实现。

- nao0811ta

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];

- Rajesh Choudhary

---

你能解释一下你的vview是什么吗？ - user7219266

Answer 2

说明

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

代码 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。您可以在这里了解更多关于渐变的信息。

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

- DoesData

Answer 3

在Swift 3.0中，我喜欢从自定义梯度类开始。

import UIKit
@IBDesignable
class GradientView: UIView {
    //设置起始颜色
    @IBInspectable var startColor:   UIColor = UIColor.black { didSet { updateColors() }}
    //设置终止颜色
    @IBInspectable var endColor:     UIColor = UIColor.white { didSet { updateColors() }}
    //您可以更改锚点和方向
    @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
//添加到您的collectionView
collectionView?.addSubview(gradient)
collectionView?.sendSubview(toBack: gradient)
self.collectionView?.backgroundView = gradient

- Chris Klingler