UICollectionView Cell with Image, change Background with click

Question

I have a UICollectionView with Custom CollectionView Cells. On each Cell there is a Image on it, which is as big as the whole Cell. Now i want to highlight the Cell when the User touches the Cell. First i tried it with the following delegate Methods:

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell* cell = [self.collectionView cellForItemAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor redColor];

}

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor clearColor];
}

But nothing happend.After i deleted the Images from the Cells it worked perfectly. But with the Images nothing happens! What else can I do?

You say, _On each Cell there is a Image on it, which is as big as the whole Cell_ . Are your images transparent ? Else you will not be able to see the background. From what I see you could add some padding/border which could then change the color. — Learner, Nov 28 '14 at 10:58

score 5 · Accepted Answer · edited Oct 03 '15 at 13:15

5

If you have a CustomCell, you must have a CustomCell.m (implementation file). In this file add this, to me is the easy way:

-(void)setHighlighted:(BOOL)highlighted
{
    if (highlighted)
    {
        self.layer.opacity = 0.6;
        // Here what do you want.
    }
    else{
        self.layer.opacity = 1.0;
        // Here all change need go back
    }
}

edited Oct 03 '15 at 13:15

Suragch

484,302
314
1,365
1,393

answered Nov 28 '14 at 11:06

Onik IV

5,007
2
18
23

At the End, the only solution which worked, and also less Code! Thanks for that! – Davis Nov 28 '14 at 13:05

score 4 · Answer 2 · answered Nov 28 '14 at 11:45

Here you place image on whole over the cell, so the cell is behind the image, you can not see the cell background because of image. Its better to take two image one is for highlighted image and another for normal. remove this line

cell.contentView.backgroundColor = [UIColor redColor];

set the highlighted image as follows:

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell* cell = [self.collectionView cellForItemAtIndexPath:indexPath];
UIImage *image11 = [UIImage imageNamed:@"your_highlighted_image"];
    CGRect starFrame1 = CGRectMake(0, 0, 350, 50);  
    UIImageView *starImage2 = [[UIImageView alloc] initWithFrame:starFrame1];   
    starImage2.image= image11; 
//set this image as cell background 
    [cell setBackgroundView:starImage2];

}

set the normal image as follows:

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
UIImage *image11 = [UIImage imageNamed:@"your_normal_image"];
    CGRect starFrame1 = CGRectMake(0, 0, 350, 50);  
    UIImageView *starImage2 = [[UIImageView alloc] initWithFrame:starFrame1];   
    starImage2.image= image11; 
//set this image as cell background 
    [cell setBackgroundView:starImage2];
}

First i thought it worked, but after some testing the Image also appears only behind my own Images! So i don´t see any highlighting! — Davis, Nov 28 '14 at 13:07

score 2 · Answer 3 · answered Nov 28 '14 at 11:41

Try like this

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

UICollectionViewCell *selectedCell =
[collectionView cellForItemAtIndexPath:indexPath];
selectedCell.contentView.backgroundColor = nil;
[selectedCell.contentView.layer setBorderColor:[UIColor redColor].CGColor];
[selectedCell.contentView.layer setBorderWidth:3.0f];

}



- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *deselectedCell =
[collectionView cellForItemAtIndexPath:indexPath];
deselectedCell.contentView.backgroundColor = nil;
[deselectedCell.contentView.layer setBorderColor:[UIColor clearColor].CGColor];
[deselectedCell.contentView.layer setBorderWidth:3.0f];
}

score 0 · Answer 4 · edited May 23 '17 at 12:14

Swift version of the accepted answer

class MyCollectionViewCell: UICollectionViewCell {

    override var highlighted: Bool {
        didSet {
            if (highlighted) {
                self.layer.opacity = 0.6;
            } else {
                self.layer.opacity = 1.0;
            }
        }
    }
}

Source

I am posting this answer for the benefit of others, but I am not completely satisfied with it. Here are two problems I have come across in my initial observation:

The dimming is abrupt and not animated like a UIButton tap.
Buttons in the first column are not changing appearance at all. Perhaps this is some bug in my app and unrelated to this actual method. Please confirm or deny this in the comments.

UICollectionView Cell with Image, change Background with click

4 Answers4

Linked