iOS進階開發——CollectionView的cell中按鈕的點擊實現

iOS進階開發——CollectionView的cell中按鈕的點擊實現

在我剛初學iOS的時候，我就問一些大神，iOS開發中最難的哪些部分。有些人就說是自訂控制項、UI和互動設計。那個時候我將信將疑，隨著自己開發的深入，自己的確是深有體會。開發一款App產品，很大一部分時間是在和UI打交道。因為開發中很多功能是直接封裝好的或者有現成模板可以用的，唯有UI是根據不同的App千變萬化的。所以今天我們繼續來研究iOS中比較進階的控制項——UICollectionView，來實現cell中按鈕的點擊操作。該demo我已經提交到： https://github.com/chenyufeng1991/CollectionView 。裡麵包含了不少CollectionView的功能實現，歡迎大家下載。對於動態增加section和cell部分，可以參考： 《iOS項目開發實戰——實現UICollectionView的動態增加Cell與Section》 。

 

（1）自訂cell

我在cell中包含了一個按鈕和一個文本。自訂代碼如下：

CollectionViewCell.h:

 

#import @interface CollectionViewCell : UICollectionViewCell//每一個cell就是一個UIView,一個cell裡麵包含了一個圖片和文本；//@property(nonatomic,strong)UIView *cellView;@property(strong,nonatomic) UIButton *imageButton;@property(strong,nonatomic) UILabel *descLabel;@end

 

 

CollectionViewCell.m：

 

#import CollectionViewCell.h#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)@implementation CollectionViewCell- (instancetype)initWithFrame:(CGRect)frame{  self = [super initWithFrame:frame];  if (self) {      //這裡需要初始化ImageView；    self.imageButton = [[UIButton alloc] initWithFrame:CGRectMake((self.bounds.size.width - 32) / 2, (self.bounds.size.width - 32) / 2, 32, 32)];    self.imageButton.tag = 100;            self.descLabel = [[UILabel alloc] initWithFrame:CGRectMake((self.bounds.size.width - 100) / 2, (self.bounds.size.width - 32) / 2 + 30, 100, 20)];    self.descLabel.textAlignment = NSTextAlignmentCenter;    self.descLabel.font=[UIFont systemFontOfSize:10];    self.descLabel.tag = 101;        [self.contentView addSubview:self.imageButton];    [self.contentView addSubview:self.descLabel];          }  return self;}@end

（2）為了點擊這個按鈕，我們要根據每一個cell來找到按鈕，所以需要在

 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{}方法中實現如下：

 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@CollectionCell forIndexPath:indexPath];  //  cell.imageView.image = [UIImage imageNamed:[[self.dataArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row]];      //設定裝置圖片按鈕的點擊事件；  //  UIButton *deviceImageButton = (UIButton*)[cell viewWithTag:100];  //  [deviceImageButton addTarget:self action:@selector(deviceButtonPressed:row:) forControlEvents:UIControlEventTouchUpInside];    //找到每一個按鈕；  UIButton *deviceImageButton = cell.imageButton;  [deviceImageButton addTarget:self action:@selector(deviceButtonPressed:) forControlEvents:UIControlEventTouchUpInside];    //給每一個cell加邊框；  cell.layer.borderColor = [UIColor grayColor].CGColor;  cell.layer.borderWidth = 0.3;        [cell.imageButton setBackgroundImage:[UIImage imageNamed:@0] forState:UIControlStateNormal];  cell.descLabel.text = @文本;    return cell;  }

（3）實現按鈕的點擊。這裡是重點，如果這裡我們想直接對按鈕進行操作，是無法完成的。必須要注意按鈕和cell之間的層級關係。如果大家使用了storyboard或者nib，可以開啟查看層級關係，由於我這裡的cell是代碼產生的，無法直觀的給大家看。但是它們的層級關係是：Cell-->ContentView-->button. 所以注意的是：我們必須找到該button對應的cell，才能完全確定該button的section和row。所以要注意代碼中的兩個:superview方法。該按鈕的實現代碼如下：

 

 

- (void)deviceButtonPressed:(id)sender{    UIView *v = [sender superview];//擷取父類view  CollectionViewCell *cell = (CollectionViewCell *)[v superview];//擷取cell    NSIndexPath *indexpath = [self.collectionView indexPathForCell:cell];//擷取cell對應的indexpath;    NSLog(@裝置圖片按鈕被點擊:%ld        %ld,(long)indexpath.section,(long)indexpath.row);  }

 

（4）運行程式，我們可以發現點擊按鈕可以獲得響應，並列印出該按鈕的indexPath.section和indexPath.row。點擊按鈕和點擊cell是彼此獨立，沒有任何影響的，可以分別進行響應事件的處理。

 

總結：通過實際開發我們可以發現，TableView和CollectionView實在是太像了，兩者畢竟都繼承自ScrollView，CollectionView其實就是TableView的擴充。現在往往就是看著TableView的某些效果或者代碼，然後試圖去CollectionView上實現，反之亦可。就像看著OC寫Swift或者看著Swift寫OC一樣。 如果有熟悉Android的同學也會發現，今天我們講到的TableView、CollectionView關係就像是Android中ListView和RecycleView的關係一樣。只有融會貫通，我們才會隨心所欲實現自己想要的效果。讓我們一起學習，一起進步吧。