Fading out items in UICollectionView

Question

I have a UICollectionView and I'm implementing sticky headers as per this link: http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using#notes

It works fantastically however my window has a background image applied, and my header views have a transparent background. Consequentially, when my items scroll above the header view, you can still see them.

Ideally I would fade out the cells with a gradient, to the point it is invisible by the time it appears behind the header view.

Thanks.

Answer 1

I created a fade mask over a collectionview that has this kind of effect. Maybe you're looking for something similar.

// This is in the UICollectionView subclass
private func addGradientMask() {
         let coverView = GradientView(frame: self.bounds)
         let coverLayer = coverView.layer as! CAGradientLayer
         coverLayer.colors = [UIColor.whiteColor().colorWithAlphaComponent(0).CGColor, UIColor.whiteColor().CGColor, UIColor.whiteColor().colorWithAlphaComponent(0).CGColor]
         coverLayer.locations = [0.0, 0.5, 1.0]
         coverLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
         coverLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
         self.maskView = coverView
    }

// Declare this anywhere outside the sublcass
class GradientView: UIView {
    override class func layerClass() -> AnyClass {
        return CAGradientLayer.self
    }
}

Additionally, you can make it sticky (i.e. it will always fade out the cells on the edge, instead of scrolling with the collection) by adding this to the collectionview subclass.

func scrollViewDidScroll(scrollView: UIScrollView) {
    self.maskView?.frame = self.bounds
}