IOS UICollectionView基礎+UICollectionViewFlowLayout基礎


https://www.cnblogs.com/xubaoaichiyu/p/5294382.html

UICollectionView在眾多控件中也算是比較常用的了,像淘寶在瀏覽寶貝時采用的就是UICollectionView,對於UICollectionView->UICollectionViewFlowLayout當然也是必不可少的了,還是老樣子結合代碼進行簡單介紹,首先看一下UICollectionView實現結果:

實現這些功能很簡單,代碼量極少,線看一下代碼,然后進行深入了解:

復制代碼

//

//  ViewController.m

//  CX-UICollentionVIew基礎

//

//  Created by ma c on 16/3/19.

//  Copyright © 2016年 xubaoaichiyu. All rights reserved.

//

 

#import "ViewController.h"

 

static NSString * identifier = @"cxCellID";

@interface ViewController ()<UICollectionViewDataSource>

 

@property (nonatomic, strong) UICollectionView * collectionView;

 

@end

 

@implementation ViewController

#pragma mark - set_and_get

-(UICollectionView *)collectionView{

    if (!_collectionView) {

        //自動網格布局

        UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc]init];

        //網格布局

        _collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];

        //注冊cell

        [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];

        //設置數據源代理

        _collectionView.dataSource = self;

    }

    return _collectionView;

    

}

#pragma mark - life

- (void)viewDidLoad {

    [super viewDidLoad];

    

    [self.view addSubview:self.collectionView];

    

}

#pragma mark - deleDate

//有多少的分組

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    

    return 2;

    

}

//每個分組里有多少個item

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 100;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    

    //根據identifier從緩沖池里去出cell

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

    

    cell.backgroundColor = [UIColor orangeColor];

    

    return cell;

    

}

 

@end

復制代碼

 

介紹過最最基本的知識點之后,按着步驟來,進行進一步介紹。

UICollectionViewFlowLayout的使用讓UICollectionView更加豐富多彩,下面看一下使用UICollectionViewFlowLayout之后的效果吧->

代碼->

復制代碼

//

//  ViewController.m

//  CX-UICollentionVIew基礎

//

//  Created by ma c on 16/3/19.

//  Copyright © 2016年 xubaoaichiyu. All rights reserved.

//

 

#import "ViewController.h"

 

static NSString * identifier = @"cxCellID";

static CGFloat kMagin = 10.f;

static NSString * headIdentifier = @"cxHeadID";

@interface ViewController ()<UICollectionViewDataSource>

 

@property (nonatomic, strong) UICollectionView * collectionView;

 

@end

 

@implementation ViewController

#pragma mark - set_and_get

-(UICollectionView *)collectionView{

    if (!_collectionView) {

        //自動網格布局

        UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc]init];

        

        CGFloat itemWidth = (self.view.frame.size.width - 4 * kMagin) / 3;

        

        //設置單元格大小

        flowLayout.itemSize = CGSizeMake(itemWidth, itemWidth / 0.618);

        //最小行間距(默認為10)

        flowLayout.minimumLineSpacing = 10;

        //最小item間距(默認為10)

        flowLayout.minimumInteritemSpacing = 10;

        //設置senction的內邊距

        flowLayout.sectionInset = UIEdgeInsetsMake(kMagin, kMagin, kMagin, kMagin);

        //設置UICollectionView的滑動方向

        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

        //sectionHeader的大小,如果是豎向滾動,只需設置Y值。如果是橫向,只需設置X值。

        flowLayout.headerReferenceSize = CGSizeMake(100,0);

        //網格布局

        _collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];

        //注冊cell

        [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];

        //注冊header

        [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headIdentifier];

        //設置數據源代理

        _collectionView.dataSource = self;

    }

    return _collectionView;

    

}

#pragma mark - life

- (void)viewDidLoad {

    [super viewDidLoad];

    

    [self.view addSubview:self.collectionView];

    

}

#pragma mark - deleDate

//有多少的分組

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    

    return 2;

    

}

//每個分組里有多少個item

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 100;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    

    //根據identifier從緩沖池里去出cell

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

    

    cell.backgroundColor = [UIColor orangeColor];

    

    return cell;

}

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    

    //kind有兩種 一種時header 一種事footer

    if (kind == UICollectionElementKindSectionHeader) {

        

        UICollectionReusableView * header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headIdentifier forIndexPath:indexPath];

        

        header.backgroundColor = [UIColor yellowColor];

        

        return header;

        

    }

    return nil;

    

}

 

@end

復制代碼

靈活的是使用 UICollectionView+UICollectionViewFlowLayout 會帶來更多的有趣的體驗,隨后我會介紹一些比較實用的實現。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM