码迷,mamicode.com
首页 > 其他好文 > 详细

UICollectionView简单介绍

时间:2015-12-06 17:30:11      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

 1. UICollectionView 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView类。

  2.自定义UICollectionViewCell,与自定义tableViewCell基本一致。

 

   
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式,系统默认线性布局
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];//创建collectionView,要指定layout
 
     [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collection"];//注册UICollectionViewCell,也就是下面我们要使用的cell
 
     [collectionView registerClass:[UICollectionReusableView class]
 forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head"];//注册头视图(每组)
 
     [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head"];//注册尾视图(每组)
       collectionView.backgroundColor =  [UIColor whiteColor];//背景色
      collectionView.delegate = self;//代理
      collectionView.dataSource = self;
      [self.view addSubview:collectionView];
  1. 几个代理方法
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView{  
      //设置组数
    return 2;
}
-(NSInteger)collectionView:(UICollectionView   *)collectionView numberOfItemsInSection:(NSInteger)section{
    //设置每组有多少单元
    return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    //设置cell,注意,此处使用的identifier必须与之前注册的保持一致
    static NSString *identifier = @"collection";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //某单元被点击
    NSLog(@"--%zi",indexPath.row);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    //设置item的尺寸
    return CGSizeMake(150, 200);
}
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //设置组的边距(上、左、下、右)
    return UIEdgeInsetsMake(5, 5, 5, 5);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    //设置最小行距(item之间)
    return 10;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    //设置组中,item的最小间距
    if (section == 0) {
        return 30;
    }
    return 10;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    //设置每组头视图的尺寸
    return CGSizeMake(200, 20);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    //设置每组尾视图的尺寸
    return CGSizeMake(200, 20);
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    //设置头/根视图,注意,此处的withReuseIdentifier要与之前注册时使用的完全一致
    UICollectionReusableView *view;
    if ([kind isEqual:UICollectionElementKindSectionHeader]) {
        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head" forIndexPath:indexPath];
        view.backgroundColor = [UIColor redColor];
    }else if([kind isEqual:UICollectionElementKindSectionFooter]){
        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head" forIndexPath:indexPath];
        view.backgroundColor = [UIColor brownColor];
    }
    return view;
}
如下一个小小的练习:
#import "ViewController.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式,系统默认线性布局

    UICollectionView *collection=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];//初始化,并设置布局且要指定layout
    collection.delegate=self;//代理
    collection.dataSource=self;
    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];//注册UICollectionView,这是固定格式,也是必须要实现的,同时也是下面的cell
    [collection registerClass:[UICollectionReusableView class]forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];//注册头/尾视图视图类型必须为UICollectionReusableView或者其子类,kind设置为UICollectionElementKindSectionHeader或者UICollectionElementKindSectionFooter,最后设置标识
    collection.backgroundColor=[UIColor redColor];
    [self.view addSubview:collection];

}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
//设置组数,不写该方法默认是一组
    return 2;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
//设置每组行数
    return 9;
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *indentifier=@"cell";
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
    cell.backgroundColor=[UIColor grayColor];
    cell.layer.borderWidth=1;//边框的宽度
    cell.layer.borderColor=[UIColor orangeColor].CGColor;//边框的颜色
    return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%zi组%zi行",indexPath.section,indexPath.item);
}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    //设置头视图的尺寸,如果想要头视图,则必须实现该方法
    return CGSizeMake(300, 30);
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    //根据类型及其标识获取注册过的头视图,注意重用机制导致的bug
    UICollectionReusableView *heardView=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
    heardView.backgroundColor=[UIColor blueColor];
    for (UIView *view in heardView.subviews ) {
        [view removeFromSuperview];
    }
    UILabel *lable=[[UILabel alloc]initWithFrame:heardView.bounds];
    lable.text=[NSString stringWithFormat:@"%zi组的头视图",indexPath.section];
    [heardView addSubview:lable];
    lable.textColor=[UIColor yellowColor];
    return heardView;

}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    //设置item的尺寸
    return CGSizeMake(self.view.frame.size.width/3.0, 100);//改变的是高
}
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //设置组距离上下左右的间距
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    //两个item的列间距
    return 0;
}

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    //如果一组中有多行item,设置行间距
    return 0;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    //设置底部视图的尺寸,一般不用
    return CGSizeMake(200, 10);
}
自定义UICollectionViewCell
 
#import "ViewController.h"
#import "MyCollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
{
    UICollectionView *collectview;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
    collectview=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectview.backgroundColor=[UIColor whiteColor];
    collectview.delegate=self;
    collectview.dataSource=self;
    [collectview registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [collectview registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
    [self.view addSubview:collectview];

}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 6;

}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *indentifier=@"cell";
    MyCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
cell.imageview.image=[UIImage imageNamed:@"200.jpg"];
//自定义选中背景
    UIView *view=[[UIView alloc]init];
    view.backgroundColor=[UIColor redColor];
    cell.selectedBackgroundView=view;
    return cell;
}
@end
自定义的.h.m文件中的属性与方法
#import <UIKit/UIKit.h>

@interface MyCollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)UIImageView *imageview;

@end
#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        _imageview=[[UIImageView alloc]initWithFrame:self.bounds ];
        [self addSubview:_imageview];
    }
    return self;
}
@end

 

 

 

 

 

 

 

UICollectionView简单介绍

标签:

原文地址:http://www.cnblogs.com/wyhwyh2114/p/5023780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!