Selectively Add & Remove Gradient — UICollectionViewCell

The details are not the details. They make the design.

Playing with Collection Views is so much fun and challenging. One of the things I came across is using gradients with collection views.

Adding gradient to a [UICollectionView](https://developer.apple.com/documentation/uikit/uicollectionview) or [UICollectionViewCell](https://developer.apple.com/documentation/uikit/uicollectionviewcell) is as simple as adding it to any other view. We had a detailed discussion over it in the previous article.

Another challenge is, what if we need to add gradient to a UICollectionViewCell on selection and remove it when the UICollectionViewCell is de-selected.

So, do you find that challenging? Let’s see step-by-step how we can achieve that.

Pre-requisites

Before we start coding, let’s see what we already have 🧐 and how can we use that to solve our problem statement.

Adding gradient to a view — In the previous article we had a detailed discussion on how to get that working.
Changing the **UICollectionViewCell’s** properties based on its selection state —Here we have already discussed how isSelected handles that.

Combining the above 2, now we’re left with “adding the gradient to cell when it is selected and removing it when it is de-selected”. We’re already halfway there, just need to put our knowledge in the right place. 🎯

Now that we know what actually needs to be done, let’s begin with some coding.

Let’s code it..

Our custom UICollectionViewCell, should implement 2 things,

A gradient that we want to apply on each cell
Override isSelected to handle selection state changes, i.e.

That’s it. That’s the only code we require to get that working.

Sample Project

You can download the sample project from here.

Promotions

Don’t forget to read my other articles:

Feel free to leave comments in case you have any doubts.