【iOS学习笔记】用collectionView解决大量button的性能问题

原文可访问：http://blog.csdn.net/u013883974/article/details/50130259

在刚入门的阶段，我们的目标可能只是追求把界面码出来，数据请求过来，并展示在界面上。

所以也会忽视掉对效率的追求和优化，看完懒加载之后，发现自己的代码里面有很多地方都冗余了。

在写代码的同时，要反复问自己有没有更简单的，更高效的方法，抽空回顾自己已经写的代码，其实会发现，有很多地方需要更改，甚至整个框架都要修改。这就暴露了当初在设计的时候没有理清关系的问题。

今天要写的是collectionView，和tableView相比较，collectionView可能低调的不出名。但是collectionView可以用在很多地方，起到点睛的效果。

拿上面的界面来说，大的结构肯定是tableView没话说，但是第一部分的两行图标，这里怎么做是个问题。当初我直接不假思索，来了一个暴力for循环，然后循环8次，把这个section给做出来了。

OK，command+r跑一下，发现是那么回事，但是滑动的时候明显略微有点卡顿。

当时以为是tableView数据加载的时候造成的卡顿，想着后面优化一下就好。

今天想到了这个问题，然后想起之前在开发群里面问过别人类似的问题，也是多个button的问题，导致滑动非常卡顿。

于是用collectionView来替代暴力for循环创造button。

部分代码如下，首先自定义collectionViewCell

[objc] view plaincopy
  1. #import "ActivityCollectionViewCell.h"  
  2.   
  3. @implementation ActivityCollectionViewCell  
  4.   
  5. - (id)initWithFrame:(CGRect)frame  
  6. {  
  7.     self = [super initWithFrame:frame];  
  8.     if (self)  
  9.     {  
  10.         [self addImgView];  
  11.     }  
  12.     return self;  
  13. }  
  14.   
  15. - (void)addImgView{  
  16.       
  17.     CGFloat width = 45;  
  18.       
  19.     _imgView = [[UIImageView alloc]initWithFrame:CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, 5, 45, 45)];  
  20.       
  21.     _titleLabel = [UILabel new];  
  22.     _titleLabel.textColor = [UIColor colorWithRed:139/255.0 green:139/255.0 blue:139/255.0 alpha:1.0];  
  23.     _titleLabel.textAlignment = NSTextAlignmentCenter;  
  24.     _titleLabel.adjustsFontSizeToFitWidth = YES;  
  25.     _titleLabel.font = [UIFont systemFontOfSize:13];  
  26.     _titleLabel.frame = CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, _imgView.frame.size.height+_imgView.frame.origin.y+5, width, 20.0);  
  27.       
  28.     [self addSubview:_imgView];  
  29.       
  30.     [self addSubview:_titleLabel];  
  31. }  
  32.   
  33. @end  

然后在主界面添加一个collectionView的初始化函数，注册collectionViewCell，设置cell大小：

 

[objc] view plaincopy
  1. - (void)initCollectionView{  
  2.       
  3.     titleArray = [[NSArray alloc]initWithObjects:@"跑步", @"羽毛球",@"游泳",@"骑行",@"乒乓球",@"健身",@"舞蹈",@"更多",nil];  
  4.     imageArray = [[NSArray alloc]initWithObjects:@"01paobu",@"02yumaoqiu",@"03youyong",@"04qixing",@"05pingpang",@"06jianshen",@"07wudao",@"15more",nil];  
  5.       
  6.     UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];  
  7.     flowLayout.itemSize = CGSizeMake(40, 40);  
  8.     flowLayout.minimumLineSpacing = 0;  
  9.     flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;//滑动方向  
  10.       
  11.     btnCollectionView.alwaysBounceHorizontal = YES;//控制水平方向遇到边框是否反弹 BOOL   
  12.     btnCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 165) collectionViewLayout:flowLayout];  
  13.       
  14.     btnCollectionView.backgroundColor = [UIColor whiteColor];  
  15.     btnCollectionView.pagingEnabled = YES;  
  16.     btnCollectionView.showsHorizontalScrollIndicator = NO;  
  17.     btnCollectionView.showsVerticalScrollIndicator = NO;  
  18.     [btnCollectionView registerClass:[ActivityCollectionViewCell class] forCellWithReuseIdentifier:@"depresscell"];//注册cell  
  19.     btnCollectionView.delegate = self;  
  20.     btnCollectionView.dataSource = self;  
  21. }  

 

然后实现collectionView的代理方法

 

 

[objc] view plaincopy
  1. #pragma mark -- UICollectionViewDataSource  
  2. //定义展示的UICollectionViewCell的个数  
  3. -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  
  4. {  
  5.     return 8;  
  6. }  
  7. //定义展示的Section的个数  
  8. -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  
  9. {  
  10.     return 1;  
  11. }  
  12. //每个UICollectionView展示的内容  
  13. -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
  14. {  
  15.     static NSString * CellIdentifier = @"depresscell";  
  16.       
  17.     //重用cell  
  18.     ActivityCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];  
  19.       
  20.     cell.imgView.image = [UIImage imageNamed:[imageArray objectAtIndex:indexPath.row]];  
  21.     cell.titleLabel.text = [titleArray objectAtIndex:indexPath.row];  
  22.       
  23.     return cell;  
  24. }  
  25.   
  26. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{  
  27.     CGSize size={0,0};  
  28.     return size;  
  29. }  
  30.   
  31. #pragma mark --UICollectionViewDelegateFlowLayout  
  32. //定义每个UICollectionView 的大小  
  33. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
  34. {  
  35.     return CGSizeMake(SCREEN_WIDTH/4.0, 80);  
  36. }  
  37. //定义每个UICollectionView 的 margin  
  38. -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
  39. {  
  40.     return UIEdgeInsetsMake(2.5, 0, 0, 0);  
  41. }  
  42.   
  43. // 定义上下cell的最小间距  
  44. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {  
  45.     return 0;  
  46. }  
  47.   
  48. // 定义左右cell的最小间距  
  49. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {  
  50.     return 0;  
  51. }  


最后定义collectionViewCell的点击事件，来代理button的点击事件，就可以了

 

[objc] view plaincopy
  1. #pragma mark --UICollectionViewDelegate  
  2. //UICollectionView被选中时调用的方法  
  3. -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
  4. {  
  5.     [self btnclicked:indexPath.row];//代替button的点击事件  
  6. }  
  7. //返回这个UICollectionView是否可以被选择  
  8. -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath  
  9. {  
  10.     return YES;  
  11. }  


写完之后再run一下，发现卡顿问题解决了，collectionView是个神奇的东西，还有瀑布流，自定义标签等等功能。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pjl0426/p/5015147.html