IOS advanced development-click the button in cell of CollectionView

IOS advanced development-click the button in cell of CollectionView

When I was just a beginner in iOS, I asked some experts about the most difficult parts of iOS development. Some people refer to custom controls, UIS, and interactive designs. At that time, I was confident that, with the development of myself, I did have a deep understanding. Developing an App is mostly dealing with the UI. In development, many functions are directly encapsulated or ready-to-use templates. Only the UI varies with different apps. So today we will continue to study the UICollectionView, a relatively advanced control in iOS, to implement the button clicking operation in cell. The demo I have submitted to: https://github.com/chenyufeng1991/CollectionView. It contains many CollectionView functions. You are welcome to download them. For details about how to dynamically add sections and cells, refer to iOS project development practices-how to dynamically add cells and sections in UICollectionView.

 

(1) custom cell

The cell contains a button and a text. The custom code is as follows:

CollectionViewCell. h:

 

# Import
 
  
@ Interface CollectionViewCell: UICollectionViewCell // each cell is a UIView, which contains an image and text; // @ 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 needs to be initialized here; 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) To click this button, we need to find the button Based on each cell.

 

-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath {} is implemented as follows:

 

-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath {CollectionViewCell * cell = [collectionView detail: @ CollectionCell forIndexPath: indexPath]; // cell. imageView. image = [UIImage imageNamed: [[self. dataArray objectAtIndex: indexPath. section] objectAtIndex: indexPath. row]; // click the device image button; // UIButton * deviceImageButton = (UIButton *) [cell viewWithTag: 100]; // [deviceImageButton addTarget: self action: @ selector (deviceButtonPressed: row :) forControlEvents: UIControlEventTouchUpInside]; // find each button; UIButton * deviceImageButton = cell. imageButton; [deviceImageButton addTarget: self action: @ selector (deviceButtonPressed :) forControlEvents: UIControlEventTouchUpInside]; // Add a border to each cell; cell. layer. borderColor = [UIColor grayColor]. CGColor; cell. layer. borderWidth = 0.3; [cell. imageButton setBackgroundImage: [UIImage imageNamed: @ 0] forState: UIControlStateNormal]; cell. descLabel. text = @ text; return cell ;}

(3) Click the implementation button. Here is the focus. If we want to operate the button directly, it cannot be completed. Pay attention to the hierarchical relationship between buttons and cells. If you use storyboard or nib, you can view the hierarchical relationship. Because the cell here is generated by code, it cannot be intuitively displayed. However, their hierarchical relationships are Cell --> ContentView --> button. Therefore, we must find the cell corresponding to the button to fully determine the section and row of the button. Therefore, pay attention to the two superview methods in the code. The implementation code of this button is as follows:

 

 

-(Void) deviceButtonPressed :( id) sender {UIView * v = [sender superview]; // obtain the parent Class view CollectionViewCell * cell = (CollectionViewCell *) [v superview]; // obtain the cell NSIndexPath * indexpath = [self. collectionView indexPathForCell: cell]; // obtain the corresponding indexpath of the cell. NSLog (@ device image button is clicked: % ld, (long) indexpath. section, (long) indexpath. row );}

 

(4) when running the program, we can find that you can click the button to get the response and print the indexPath. section and indexPath. row of the button. Clicking the button and clicking the cell are independent of each other. If there is no impact on each other, you can handle the event separately.

 

Conclusion: through actual development, we can find that TableView and CollectionView are too similar. After all, both of them are inherited from ScrollView, and CollectionView is actually an extension of TableView. Now it is often to look at some effects or code of TableView, and then try to implement it on CollectionView, and vice versa. Just like reading OC to write Swift or Swift to write OC. If you are familiar with Android, you will also find that the TableView and CollectionView relationships we talked about today are like the relationship between ListView and RecycleView in Android. Only by integration can we achieve what we want. Let's learn and make progress together.