當我們點選表格(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不再鐵石心腸了! 當我們找到最可愛的豆豆點選時,它也會情不自禁地臉藍心跳了!
沒有留言:
張貼留言