UICollectionView学习

day14 UICollectionView


http://blog.youkuaiyun.com/eqera/article/details/8134986

1. 块状化布局tableView的实现（简易瀑布流）

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (tableView==_tableView1) {
        UITableViewCell*cell=[tableView dequeueReusableCellWithIdentifier:@"tableView1"];
        if (!cell) {
            cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"tableView1"];
        }
        cell.textLabel.text=self.dataArray1[indexPath.row];
        
        return cell;
    }else{
        UITableViewCell*cell1=[tableView dequeueReusableCellWithIdentifier:@"tableView2"];
        if (!cell1) {
            cell1=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"tableView2"];
        }
        cell1.textLabel.text=self.dataArray2[indexPath.row];
        return cell1;
    
    }
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView==_tableView1) {
        _tableView2.contentOffset=_tableView1.contentOffset;
    }else{
        _tableView1.contentOffset=_tableView2.contentOffset;
    }
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return arc4random()%40+40;
}


UITableView                UICollectionView
Section-header/footer           Supplementary View
BackgroundView            DecorationView    

2. UICollectionView 集合视图介绍



UICollectionView常用代理方法
// 有多少个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// 每个分区有多少个cell[item]
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section；

// 每个cell是什么
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

// section的头和尾视图 supplementaryView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath；

// 属于UICollectionViewFlowLayoutDelegate 每个cell的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

// 点选一个cell的时候触发的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

注：在UICollectionView中，不仅cell可以重用，Supplementary View和Decoration View也是可以并且应当被重用的。

Line spacing（每行的间距）
1、 可以进行全局配置,如下属性
@property(CGFloat) minimumLineSpacing

2、 也可以通过delegate对每一个section进行配置，如下代码
collectionView:layout:minimumLineSpacingForSectionAtIndex:


Inter cell spacing（每行内部cell item的间距）
1、  可以进行全局配置,如下属性
@property(CGFloat) minimumInteritemSpacing

2、  也可以通过delegate对每一个section进行配置，如下代码
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:




项目实例1：


Step 1> 新建布局对象
// UICollectionViewLayout 集合视图的布局类，是一个抽象基类,一般使用它的子类实现对cell的布局
// UICollectionViewFlowLayout : UICollectionViewLayout 系统提供的，能够实现cell的网格布局
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];

// 设置行间距
flowLayout.minimumLineSpacing = 10;

// 设置item之间间距，实际间隔需要根据item的size和edgesInsets的值来调节
flowLayout.minimumInteritemSpacing = 0;

Step 2> 新建collectionView，设置它的delegate和dataSource, 并把布局对象赋给它
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64) collectionViewLayout:flowLayout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
[flowLayout release];


Step 3> 注册cell, 注册section的头视图和尾视图
[_collectionView registerNib:[UINib nibWithNibName:@"MyCell" bundle:nil] forCellWithReuseIdentifier:@"MyCell"];
// [_collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"MyCell"];

// -- header view --
[_collectionView registerClass:[CustomView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];

// -- footer view --
[_collectionView registerClass:[CustomView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];

Step 4> 实现delegate方法，dataSource方法以及布局layout方法
// 指定每一个item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(170, 120);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    // 如果垂直滚动 view的width与集合视图一致,需要设置高度
    return CGSizeMake(30,30);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    return CGSizeMake(30,30);
}

// UIEdgeInsets 描述的是一个视图相对于另一个视图上、左、下、右的距离
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(10,8,10,8);
}


3. 从网络上加载数据，贴到collectionView上
用AFNetworking从网络上获取数据，并把数据贴到collectionView上
#define  kUrlString @"http://open.qyer.com/lastminute/get_lastminute_list?client_id=qyer_ios&client_secret=cd254439208ab658ddf9&v=1&track_user_id=&track_deviceid=E57D6014-1D9F-437C-B9E5-17CF697370FA&track_app_version=5.4.4&track_app_channel=App%20Store&track_device_info=iPhone7,1&track_os=ios%208.1&lat=40.033568&lon=116.358971&app_installtime=1421832230&page_size=20&is_show_pay=1&country_id=0&continent_id=0&max_id=0&times=&product_type=0"









#import "RootViewController.h"
#import "DiscountCell.h"
#import "AFNetworking.h"

#define  kUrlString @"http://open.qyer.com/lastminute/get_lastminute_list?client_id=qyer_ios&client_secret=cd254439208ab658ddf9&v=1&track_user_id=&track_deviceid=E57D6014-1D9F-437C-B9E5-17CF697370FA&track_app_version=5.4.4&track_app_channel=App%20Store&track_device_info=iPhone7,1&track_os=ios%208.1&lat=40.033568&lon=116.358971&app_installtime=1421832230&page_size=20&is_show_pay=1&country_id=0&continent_id=0&max_id=0&times=&product_type=0"

@interface RootViewController () <UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

@property (nonatomic, retain) NSMutableArray *dataArray;
@property (nonatomic, retain) UICollectionView *collectionView;
@end

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self addCollectionView];
    [self fetchWebData];
}

- (void)addCollectionView {
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    self.collectionView  = [[[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) collectionViewLayout:flowLayout] autorelease];
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    [self.view addSubview:_collectionView];
    
    [_collectionView registerNib:[UINib nibWithNibName:@"DiscountCell" bundle:nil] forCellWithReuseIdentifier:kDiscountCellID];
}

- (void)fetchWebData {
    AFHTTPRequestOperationManager *manager =[AFHTTPRequestOperationManager manager];
    // 服务端的content-Type 为application/json时，可以不写acceptContentTypes
    // manager.responseSerializer.acceptableContentTypes
    [manager GET:kUrlString parameters:nil success:^(AFHTTPRequestOperation *operation, id responseObject) {
        if (responseObject) {
            NSArray *dataArr = responseObject[@"data"];
            for (NSDictionary *subDict in dataArr) {
                Discount *model = [[Discount alloc]init];
                [model setValuesForKeysWithDictionary:subDict];
                for (NSString *key in subDict) {
                    id obj = [subDict objectForKey:key];
                    [model setValue:obj forKey:key];
                }
                
                [_dataArray addObject:model];
            }
            [_collectionView reloadData];
        }
    } failure:^(AFHTTPRequestOperation *operation, NSError *error) {
    }];
}

- (NSMutableArray *)dataArray {
    if (_dataArray == nil) {
        _dataArray = [[NSMutableArray alloc] init];
    }
    return _dataArray;
}

#pragma mark - <UICollectionViewDelegate, UICollectionViewDataSource>
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //自动反选
    [collectionView deselectItemAtIndexPath:indexPath animated:YES];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    DiscountCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kDiscountCellID forIndexPath:indexPath];
    cell.discount = self.dataArray[indexPath.row];
    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataArray.count;
}

#pragma mark - flow layout

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    return CGSizeMake(150, 180);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    // return UIEdgeInsetsMake(5, 5, 5, 5);
    return UIEdgeInsetsMake(5, 15, 5, 15);
}


#pragma mark - dealloc
- (void)dealloc {
    [_dataArray release];
    [_collectionView release];
    [super dealloc];
}

@end

————————————————————————————————————————————————————————————————————————————————————————————————
4. XIB 加载viewController

- (void)loadView
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
关联ViewController和xib