2013年5月12日 星期日

忘了裝扮點選容顏的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不再鐵石心腸了! 當我們找到最可愛的豆豆點選時,它也會情不自禁地臉藍心跳了!






沒有留言:

張貼留言