UICollectionView Cell with Image, change Backgroun

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?

Answer 1

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];
}

Answer 2

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:

1. The dimming is abrupt and not animated like a UIButton tap.
2. 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.

Answer 3

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

Answer 4

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];
}