【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

 

 

#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大小：

 

 

- (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的代理方法

 

 

#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的點擊事件，就可以了

 

 

#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是個神奇的東西，還有瀑布流，自定義標簽等等功能。