在我剛初學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的關系一樣。只有融會貫通，我們才會隨心所欲實現自己想要的效果。讓我們一起學習，一起進步吧。