忘了裝扮點選容顏的collection view cell

當我們點選表格(table view)的某一行或是格狀畫面(collection view)的某一格時，好的點選效果可以幫助使用者了解他所點選的是否是它真心所愛，還是只是一時錯愛。

接下來就讓我們以可愛的狗狗豆豆為例，看看當牠被關在table view和collection view時，牠是否能感應到我們觸碰時手指的溫度。

對table view來說，我們只要點選表格的某一行(cell)，cell即會因莫名的原因而臉藍，讓我們清楚地看到點選的效果，看清是哪一個豆豆被點選了。(彼得潘知道臉紅可能是因為偷偷喜歡對方，但是實在猜不透怎麼樣會造成臉藍）

身為比table view更強大的collection view，令人驚奇的，它竟然如此冷若冰霜! 當我們手指點選某個item時，它完全無動於衷，完全沒有任何點選的視覺效果。然而實際上collection view上的item是可點選的，因為它的collectionView:didSelectItemAtIndexPath:可是真真切切地被呼叫了呀!


替collection view cell裝扮點選容顏的方法很簡單，不需要是造型師也做得到。 只要在建立UICollectionViewCell物件時指定它的selectedBackgroundView即可。以剛剛的豆豆為例，我們利用繼承自UICollectionViewCell的MyCollectionViewCell來定義collection view呈現的cell。當MyCollectionViewCell物件被建立時，它的initWithFrame: method會被呼叫， 此method的定義如下:

MyCollectionViewCell.m

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, frame.size.width, frame.size.height-20)];
        self.imageView.contentMode = UIViewContentModeScaleAspectFill;
        [self.contentView addSubview:self.imageView];
        self.imageView.clipsToBounds = YES;
     
        UIView *selectedView = [[UIView alloc] initWithFrame:frame];
        selectedView.backgroundColor = [UIColor blueColor];
        self.selectedBackgroundView = selectedView;
     
    }
    return self;
}

說明:

(1) self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, frame.size.width, frame.size.height-20)];

利用imageView來呈現可愛的豆豆

(2) UIView *selectedView = [[UIView alloc] initWithFrame:frame];

        selectedView.backgroundColor = [UIColor blueColor];
        self.selectedBackgroundView = selectedView;

將cell的selectedBackgroundView設為藍色的selectedView，即可造成點選時的藍色點選效果。

執行App:

終於，collection view不再鐵石心腸了! 當我們找到最可愛的豆豆點選時，它也會情不自禁地臉藍心跳了!