UICollectionViewCell selection behavior

Question

I have a photo gallery in my app. where i can select multiple photos and can delete them. All is going on very well.

I just need to implement apple's default selection behavior as we can see in camera roll.

enter image description here

Right now my selection is like this

enter image description here

I have implemented didSelectItemAtIndexPath method as follows -

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"Delegate cell %@ : SELECTED", [self formatIndexPath:indexPath]);
    MyCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.label.backgroundColor=[UIColor greenColor];
}

 - (NSString *)formatIndexPath:(NSIndexPath *)indexPath 
{
    return [NSString stringWithFormat:@"%ld", (long)indexPath.row+1];
}

And In MyCustomCell.m, I set the frame of label as rectangle as shown in fig (green).

And method setSelected looks like following:

- (void)setSelected:(BOOL)selected
{
    UIView *blurView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 60, 70)];
    blurView.backgroundColor=[UIColor whiteColor];
    blurView.alpha=0.5;
    blurView.opaque=YES;
    if (selected) {
        self.label.backgroundColor = [UIColor greenColor];
        [self.imageThumb addSubview:blurView];
    }
}

So, Is it possible to have apple's default selection behavior ??

Any help will be appreciated. Thanks in advance.

@Jacky Boy I have edited my question. I can't get grayed out effect on selection. — Arun, Apr 25 '13 at 08:10

score 2 · Accepted Answer · answered May 08 '13 at 15:27

2

In setSelected: of your cell, if selected is YES then add a white UIView with an alpha of 0.5 (or tweak the value to an opacity that looks good to you); if NO, remove that overlay view. Then when you add your checkmark image, make sure to layer it on top of the overlay view with [self.contentView bringSubviewToFront:checkmarkImageView].

answered May 08 '13 at 15:27

jszumski

7,430
11
40
53

Thanks for your answer. It worked for me. I have a question- when i set opaque as true, it doesn't make any change to previous result when i didn't use opaque property. So can you please help me out how to set opacity ?? – Arun May 09 '13 at 13:47
Which view are you setting to opaque? Can you update the question with your newest code? – jszumski May 09 '13 at 13:57
This answer explains it pretty well: http://stackoverflow.com/questions/8520434/uiview-opaque-vs-alpha-vs-opacity – jszumski May 09 '13 at 14:09
Wow Perfect explanation. Appreciated. Thanks for your help. :) – Arun May 09 '13 at 14:17
One more question- i tried removing overlay view as u said earlier, when not selected. But it doesn't work for me. I tried adding code to remove blurView on my else part of setSelected method. – Arun May 09 '13 at 14:22
Are you keeping a reference to the `blurView` to call `removeFromSuperview` on? Another option is to create the view in `init` and simply toggle the `hidden` property in `setSelected`. – jszumski May 09 '13 at 15:22

Mirco Ellmann · Answer 2 · 2013-05-08T15:30:29.257

1

Just add an UIView with the desired gray color over the UIImageView. Set alpha to f.e. 0.5 and hidden = YES;

_blurView.hidden = YES;
_blurView.alpha = 0.5;

Then set hidden = NO if selected.

_blurView.hidden = NO;

You can add the UIView with InterfaceBuilder.

To make it look even better you might use an UIImageView with a nice texture image.

edited May 08 '13 at 15:30

answered May 08 '13 at 08:15

Mirco Ellmann

983
7
8

@Micro I tried it but it doesn't worked for me. Setting cell.alpha makes my cell look dull but not grayed out/blurry like in images provided. – Arun May 08 '13 at 11:58
I changed the answer, this might help you?! – Mirco Ellmann May 08 '13 at 15:30

UICollectionViewCell selection behavior

2 Answers2