How could I set gradient fixed background on UICol

Question

I used following code.

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

But it drawn on cells included images. so cell was not shown.

I want to draw gradient background of UICollectionView under Cells and fixed it when view scrolled. Let me know Please.

Answer 1

Try this... You have to assign a view to use background view.

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

In Swift 3.0

I like to start with a custom class for gradients

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()
    }
}

With the custom class somewhere in the project and added to the target you just need to do as mentioned earlier and add it as a background view rather than background color or separate normal view sent to the back

Implement like so:

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

Directions

1. Create a view
2. Assign that view to the backgroundView of you collectionView
3. Create a gradient
4. Add gradient layer to 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)
  }

If you want a top to bottom gradient all you have to do is remove endPoint and startPoint. You can read more about gradients here.

Note that startPoint and endPoint are defined in the coordinate plane from (0.0, 0.0) to (1.0, 1.0)