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》  。

      在本次的需求中，我们需要在一个cell中增加一个按钮，然后实现按钮的点击效果。同点击cell一样，在点击按钮的时候我们需要获得该按钮所在的section和cell值。也就是indexPath.section和indexPath.row.  我会在 https://github.com/chenyufeng1991/CollectionView/tree/master/%E5%8A%A8%E6%80%81%E5%A2%9E%E5%8A%A0cell%E5%92%8Csection%E5%AE%9E%E7%8E%B0  。基础上继续进行开发。

（1）自定义cell

我在cell中包含了一个按钮和一个文本。自定义代码如下：

CollectionViewCell.h:

#import <UIKit/UIKit.h>

@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的关系一样。只有融会贯通，我们才会随心所欲实现自己想要的效果。让我们一起学习，一起进步吧。

最近开源的iOS应用，高仿印象笔记  https://github.com/chenyufeng1991/iOS-Oncenote 。欢迎大家点赞并关注项目进度。也可以安装到手机上试玩哦。

github主页：https://github.com/chenyufeng1991  。欢迎大家访问！