0

I have a CollectionView where I display my custom CollectionViewCell which consists of a UIImageView (called "thumbnailView").

enter image description here

What I want is that when the user presses one of the collection cell, then the image becomes darker (exactly the same behaviour in the iPhone home menu with all the apps).

enter image description here

I've tried with the Quartz Framework and did so in the MyCustomCollectionViewCell.m :

-(void) setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self setNeedsDisplay];
}
-(void) drawRect:(CGRect)rect {
    [super drawRect:rect];

    if (self.highlighted) {
        [self.thumbnailView.layer setBackgroundColor:[UIColor blackColor].CGColor];
        [self.thumbnailView.layer setOpacity:0.9];

    }
}

but it just adds black corners to my images in the collection cell but without darkening them like I want.

Reveclair
  • 2,399
  • 7
  • 37
  • 59
  • If you want to darken the image when tap on image view, then add tap gesture to the image view and apply alpha. Or set UIButton with image rather than UIImageView .. – jpulikkottil Jun 25 '15 at 11:12
  • Try answer from http://stackoverflow.com/questions/4006495/how-to-darken-a-uiimageview question – Kumar Jun 25 '15 at 11:12
  • Use the ```setAlpha``` method. –  Jun 25 '15 at 11:27

1 Answers1

3

You can add another view to do the highlighting.

In the custom cell add a property:

@property (nonatomic, strong) UIView *highlightView;

Initialize and add it to the cell's contentView. Notice that the alpha is initially set to zero:

self.highlightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
self.highlightView.backgroundColor = [UIColor blackColor];
self.highlightView.alpha = 0;
[self.contentView addSubview:self.highlightView];

In your custom UICollectionView override the highlight methods and change the alpha of the cell's highlight view:

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCustomCollectionViewCell* cell = (MyCustomCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
    [UIView animateWithDuration:0.3 animations:^()
    {
        cell.highlightView.alpha = 0.5;
    }];
}

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCustomCollectionViewCell* cell =  (MyCustomCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
    [UIView animateWithDuration:0.3 animations:^()
    {
        cell.highlightView.alpha = 0;
    }];
}
Artal
  • 8,933
  • 2
  • 27
  • 30
  • Thank you very much for your detailed answer. Should I place the initialization code (with self.highlightView = etc. ...) in awakeFromNib method of the MyCustomCollectionViewCell.m file ? – Reveclair Jun 25 '15 at 11:56
  • Ok that's perfectly working except that the corners of the highlightView are not rounded. – Reveclair Jun 25 '15 at 12:05
  • 1
    If you're creating MyCustomCollectionViewCell from a nib then yes. If not you can do it in initWithFrame. – Artal Jun 25 '15 at 12:10
  • 1
    @Reveclair set self.highlightView.layer.cornerRadius to give it the same round corners. You might also need to set self.highlightView.layer.masksToBounds to YES. – Artal Jun 25 '15 at 12:12
  • Thank you that's now really perfect ! It seems that the default corner radius of my cell is 5 (although I can't see how I can modify it) so I hardcoded the same cornerRadius value to highlightView but I guess it's not very clean ... – Reveclair Jun 25 '15 at 12:26
  • @Reveclair glad to hear it works... Regarding the cornerRadius: you can try to take it from the cell, something like this: self.highlightView.layer.cornerRadius = self.layer.cornerRadius – Artal Jun 25 '15 at 12:35