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