How do I change the gradient of a collectionviewcell or button on click?

Question

I'm using a gradient on my UIViews like this:

//the cells gradient colors
    cellgradient.frame = cell.imageView.bounds
    cellgradient.cornerRadius = cellgradient.frame.height / 2
    cellgradient.colors = [UIColor(hexString: "#ef473a")!, UIColor(hexString: "#cb2d3e")!].map { $0.cgColor }
    cellgradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    cellgradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    cellgradient.colors = [UIColor(hexString: "#ef473a")!, UIColor(hexString: "#cb2d3e")!]
    cell.imageView.layer.insertSublayer(cellgradient, at: 0)

Now when I select the cell or deselect the cell I want to change the current gradient. How do I do this?

EDIT

Based on the answer I did the following:

class CollectionViewCell : UICollectionViewCell
{

@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var imageView: UIImageView!
public var checked = false
public var animated = false
public var cellgradient: CAGradientLayer = CAGradientLayer()

override var bounds : CGRect {
    didSet {
        self.layoutIfNeeded()
    }
}

override var isSelected: Bool {
    didSet {
        if isSelected {
            cellgradient.colors = [UIColor(hexString: "#ef473a")!, UIColor(hexString: "#cb2d3e")!].map { $0.cgColor }
        } else {
            cellgradient.colors = [UIColor(hexString: "#29a1e2")! , UIColor(hexString: "#485ac8")!].map { $0.cgColor }
        }
    }
}
func addthegradientLayer() {

    //the cells gradient colors
    cellgradient.frame = imageView.bounds
    cellgradient.cornerRadius = cellgradient.frame.height / 2
    cellgradient.colors = cellgradient.colors = [UIColor(hexString: "#29a1e2")! , UIColor(hexString: "#485ac8")!].map { $0.cgColor }
    cellgradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    cellgradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    imageView.layer.insertSublayer(cellgradient, at: 0)
}

And it works. Now I only got one problem left: The imageview of the cell is hidden behind the gradient. How do I solve this?

Could you describe your view hierarchy a little more? It sounds like your collection view cell has a UIImageView in it, and you're adding a CAGradientLayer to the image view's layer. Is that right? — John Wickham, Oct 23 '17 at 19:51

score 0 · Accepted Answer · answered Oct 23 '17 at 20:03

0

I would do this by subclassing UICollectionViewCell. Your custom cell class can have a property to reference its gradient layer.

In the cell's initializer, add the gradient layer to the image view like you do now. Then, override the isSelected property's didSet and modify the gradient layer for the selected or normal state.

answered Oct 23 '17 at 20:03

John Wickham

653
5
16

As @yarn said, it appears you've used the same exact colors for both the selected and normal states. – John Wickham Oct 23 '17 at 21:54
Alright, that works now, my only problem now is that the image view is hidden. – Mike Oct 24 '17 at 14:36
@user8533118 Adding a sublayer to any UIView will cover other layers and subviews. Could you get around this by adding a UIView to the cell behind the image view and add the gradient layer to the sibling view? – John Wickham Oct 24 '17 at 19:21

Yarn · Answer 2 · 2017-10-24T18:24:08.073

0

The hex string for colors are identical for both isSelected and !isSelecet in didSet{}.

edited Oct 24 '17 at 18:24

answered Oct 23 '17 at 21:46

Yarn

238
1
12

@Moritz From user8533118's comment above, it sounds like I answered the original question of why there was no gradient change. – Yarn Oct 24 '17 at 18:18

score 0 · Answer 3 · answered Nov 29 '17 at 18:18

0

If can insert your layer below or after current outlets

imageView.layer.insertSublayer(cellgradient, below: nameLabel.layer)

answered Nov 29 '17 at 18:18

Slam

1

How do I change the gradient of a collectionviewcell or button on click?

3 Answers3