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

it2022-05-09  18

原文可访问: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 plain copy #import "ActivityCollectionViewCell.h"    @implementation ActivityCollectionViewCell    - (id)initWithFrame:(CGRect)frame  {      self = [super initWithFrame:frame];      if (self)      {          [self addImgView];      }      return self;  }    - (void)addImgView{            CGFloat width = 45;            _imgView = [[UIImageView alloc]initWithFrame:CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, 5, 45, 45)];            _titleLabel = [UILabel new];      _titleLabel.textColor = [UIColor colorWithRed:139/255.0 green:139/255.0 blue:139/255.0 alpha:1.0];      _titleLabel.textAlignment = NSTextAlignmentCenter;      _titleLabel.adjustsFontSizeToFitWidth = YES;      _titleLabel.font = [UIFont systemFontOfSize:13];      _titleLabel.frame = CGRectMake((SCREEN_WIDTH/4.0-width)/2.0, _imgView.frame.size.height+_imgView.frame.origin.y+5, width, 20.0);            [self addSubview:_imgView];            [self addSubview:_titleLabel];  }    @end  

 

 

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

 

 

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

 

 

然后实现collectionView的代理方法

 

 

[objc]  view plain copy #pragma mark -- UICollectionViewDataSource  //定义展示的UICollectionViewCell的个数  -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  {      return 8;  }  //定义展示的Section的个数  -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  {      return 1;  }  //每个UICollectionView展示的内容  -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  {      static NSString * CellIdentifier = @"depresscell";            //重用cell      ActivityCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];            cell.imgView.image = [UIImage imageNamed:[imageArray objectAtIndex:indexPath.row]];      cell.titleLabel.text = [titleArray objectAtIndex:indexPath.row];            return cell;  }    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{      CGSize size={0,0};      return size;  }    #pragma mark --UICollectionViewDelegateFlowLayout  //定义每个UICollectionView 的大小  - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  {      return CGSizeMake(SCREEN_WIDTH/4.0, 80);  }  //定义每个UICollectionView 的 margin  -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  {      return UIEdgeInsetsMake(2.5, 0, 0, 0);  }    // 定义上下cell的最小间距  - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {      return 0;  }    // 定义左右cell的最小间距  - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {      return 0;  }  

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

 

 

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

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

转载于:https://www.cnblogs.com/pjl0426/p/5015147.html


最新回复(0)