CODEWITHSUNDEEP
iosobjective-ccocoa-touchuikituicollectionview
Sam
Sam

Reputation: 4339

Fading out items in UICollectionView

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.

Upvotes: 12

Views: 10439

Answers (6)

prolfe
prolfe

Reputation: 1354

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

enter image description here

// 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
}

Upvotes: 7

lennartk
lennartk

Reputation: 619

You should use a UIScrollViewDelegate for the CollectionView and use the scrollviewdidscroll method to create the fade, or subclass UICollectionViewFlowLayout.

Upvotes: 1

Eichhörnchen
Eichhörnchen

Reputation: 592

Here is how I achieved that effect. I created in photoshop a gradient image, fading to the color of the background, which is in my case black. Here's what it looks like: enter image description here

I placed the ImageView on my ViewController. I stretched it to the correct size and location of where I wanted and used AutoLayout constraints to lock it in place. (I had to use the arrow keys on my keyboard to move it around at times because clicking and dragging the location of the image tended to drop it inside of the CollectionView)

Click the ImageView, go to Editor -> Arrange -> Send to Front to make sure it sits on top of the CollectionView.

Image mode is Scale to Fill, and I have deselected User Interaction Enabled.

This will take some tweaking to get everything perfect but it works very well and looks nice.

I'm not entirely sure how you mean by with your background image and whatnot, but maybe make the gradient image part of the actual background image you have, so it blends in.

Upvotes: 0

Oren
Oren

Reputation: 5103

instead of having a transparent background on your header, I would create a gradient transparent png and use that instead. It'd be a lot more efficient and easier handling the gradient with an image than doing it with code.

Upvotes: 1

duci9y
duci9y

Reputation: 4168

You haven't posted any code, so here's a go at it without looking at code. Just setup a mask layer over your UICollectionView's superview and you're good to go:

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = self.collectionView.superview.bounds;
gradient.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];
// Here, percentage would be the percentage of the collection view
// you wish to blur from the top. This depends on the relative sizes
// of your collection view and the header.
gradient.locations = @[@0.0, @(percentage)];

self.collectionView.superview.layer.mask = gradient;

For this solution to work properly, you'd have to embed your collection view in a super view of its own.

For more information on layer masks, check out the documentation.

Upvotes: 16

Bastich
Bastich

Reputation: 21

would seem to me the code you are following/using has done heavy work for you. As far I can see (not in position to test right now) just pass the alpha attribute:

        layoutAttributes.zIndex = 1024;
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

like such

        layoutAttributes.zIndex = 1024;
        layoutAttributes.alpha = 0.1; //add this
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

Upvotes: 1

Related Questions