iOS中 UICollectionView UI_19

 UICollectionView 是UITableView加强版

 UITableView 和UICollectionView的设计思想：

 1.布局：

 UITableView 的布局可以由UITableView本身和UITableViewDelegate完成

 UICollectionView的布局由UICollectionLayout的子类UICollectionFlowLayout和UICollectionLayoutDelegate完成

 

 2.布局样式

 UITableView单列多行

 UICollectionView支持多行多列

 

 3.数据源：

 UITableView的数据源是UITableViewDataSource

 UICollectionView的数据源是UICollectionViewDataSource

 

 4.cell的样式

 UITableViewCell 系统提供的有四种样式

 UICollectionViewCell 只自带contentView，但是contentView什么也没有，所有你要显示图片，文字必须要自定义cell

 

 5.cell的重用

 UITableViewCell 和 UICollectionCell 都可以重用；先注册后重用

 

 6.页眉页脚

 UITableView 的页眉页脚不可以重用，但是 UICollectionView的页眉页脚是可以重用的

 

 7.编辑

 UITableView 支持编辑，添加、删除和移动

 UICollectionView 不支持编辑

 

 8.父类

 UITableView 和 UICollectionView 的父类都是UIScrollView

 但是UITableView 只能竖直方向滚动，而UICollectionView支持竖直方向和水平方向滚动

 ——————————————————————————————————————————

AppDelegate.m

   self.window.rootViewController = [[[UINavigationController alloc]initWithRootViewController:[RootViewController new]]autorelease];

=======================UICollectionView系统自带的cell============================

RootViewController.m

#import "RootViewController.h"
#import "DetailViewController.h"
#define kItem  @"item"
#define kHead @"heaad"
#define kFooter @"footer"
@interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>//遵循协议
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"集合视图";
    self.view.backgroundColor = [UIColor whiteColor];
    //调用CollectionView的布局方法
     [self configureCollectionView];
}

CollectionView的布局方法：

- (void)configureCollectionView{
//    UICollectionViewLayout  是所有布局类的基类,是一个抽象的类，一般很少直接使用基类(不是视图),都是使用基类的子类,所有 UICollectionView 的布局我们要使用 UICollectionViewFlowLayout 完成
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    //1.设置Item的大小
    flowLayout.itemSize = CGSizeMake(130, 150);
    //2.设置Item的缩进量
    flowLayout.sectionInset = UIEdgeInsetsMake(5, 10, 5, 10);
    //3.设置最小行间距
    flowLayout.minimumLineSpacing = 20.0;
    //4.设置Item列间距
    flowLayout.minimumInteritemSpacing = 20.0;
    //5.设置CollectionView滚动方向
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;  //水平滚动
//    flowLayout.scrollDirection =  UICollectionViewScrollDirectionVertical;   //默认竖直方向滚动
    //6.设置页眉的大小
    flowLayout.headerReferenceSize = CGSizeMake(320, 40);
    //7.设置页脚的大小
    flowLayout.footerReferenceSize = CGSizeMake(320, 40);

    //创建一个UICollectionView对象
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
    //配置collectionView的背景颜色
    collectionView.backgroundColor = [UIColor greenColor];
    //指定数据源代理
    collectionView.dataSource = self;
    //注册Cell
    [collectionView registerClass:[UICollectionViewCell  class] forCellWithReuseIdentifier:kItem];
    //注册页眉和页脚
    //第一个参数：重用视图的类
    //第二个参数：重用是页眉和页脚的种类
    //第三个参数：重用的标识
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead];
    //注册页脚
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter];
    //设置业务代理
    collectionView.delegate = self;

    //将collectionView添加到视图控制器上
    [self.view addSubview:collectionView];
    [flowLayout release];
    [collectionView release];

}

#pragma mark CollectionView 的数据源代理方法

//返回每个分区Item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}
//根据indexPath 返回cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kItem forIndexPath:indexPath];
    //设置cell的颜色
    cell.backgroundColor = [UIColor redColor];
    NSLog(@"%@",NSStringFromCGRect(cell.frame));

    return cell;

}
//返回collectionView分区的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    return 2;
}

//返回重用的页眉页脚的方法
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    UICollectionReusableView *view = nil;

    //根据种类判断要使用页眉还是页脚
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        //重用页眉
         view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead forIndexPath:indexPath];
        //设置页眉的颜色
        view.backgroundColor = [UIColor orangeColor];

    }else{
        //重用页脚
        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter forIndexPath:indexPath];
        //设置页脚颜色
        view.backgroundColor = [UIColor blackColor];

    }
    return view;
}

#pragma mark CollectionView 的业务代理方法：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //打印item的分区下标和item下标
    NSLog( @"%ld--%ld",indexPath.section,indexPath.item);

    [self.navigationController pushViewController:[DetailViewController new] animated:YES];
}

#pragma mark UICollectionViewFlowLayoutDelegate 的方法

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (0 == indexPath.section % 2) {
        return CGSizeMake(50, 50);
    }else{
        return CGSizeMake(130,130);
    }

}
//返回分区缩进量
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    if (0 == section % 2) {
        return UIEdgeInsetsMake(10, 10, 10, 10);
    }else{
        return UIEdgeInsetsMake(20, 20, 20, 20);
    }
}

//返回每一行item之间的最小间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    return 30;

}
//返回item之间的最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}

//返回页眉的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(320,100);
}

//返回页脚的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{

    return CGSizeMake(320, 100);

}

===========================学习自定义的cell==================================

新建一个页面在这里学习自定义cell、自定义页眉和页脚：

DetailViewController.m

#import "NBViewCell.h"
#import "HeaderView.h"
#import "FooterView.h"
#define kNBcell @"nb-cell"
#define kHeadView @"head"
#define kFootView @"foot"
@interface DetailViewController ()<UICollectionViewDataSource>//遵循协议
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor orangeColor];

    //调用配置CollectionView
    [self configureCollectionView];

}

配置CollectionView：

//配置CollectionView
- (void)configureCollectionView{
    //创建布局类
    UICollectionViewFlowLayout *flowout = [[UICollectionViewFlowLayout alloc]init];
    //设置item的大小
    flowout.itemSize = CGSizeMake(90, 90);
    //设置页眉的大小
    flowout.headerReferenceSize =CGSizeMake(320, 100);
    //设置页脚的大小
    flowout.footerReferenceSize = CGSizeMake(320, 80);
    //设置分区缩进量
    flowout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);

    //创建CollectionView对象
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowout];
    //配置数据源代理
    collectionView.dataSource = self;
    //注册cell
    [collectionView registerClass:[NBViewCell class] forCellWithReuseIdentifier:kNBcell];
    //注册页眉
    [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView];
    //注册页脚
    [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView];
    //配置背景颜色
    collectionView.backgroundColor = [UIColor whiteColor];

    //添加到父视图
    [self.view addSubview:collectionView];
    [collectionView release];
    [flowout release];

}

#pragma mark 数据源代理方法：

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 100;
}
//
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    NBViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kNBcell forIndexPath:indexPath];

    cell.label.text = [NSString stringWithFormat:@"%ld--%ld",indexPath.section,indexPath.item];
    return cell;

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

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
  //重用页眉
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        HeaderView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView forIndexPath:indexPath];
        view.photoView.image = [UIImage imageNamed:@"2"];
        return view;
    }else{
        //重用页脚
        FooterView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView forIndexPath:indexPath];
        view.footerLabel.text = [NSString stringWithFormat:@"第%ld个分区",indexPath.section];
        return view;
    }

}

准备一个自定义cell：

NBViewCell.h

@interface NBViewCell : UICollectionViewCell
@property(nonatomic,retain)UILabel *label;
@end

NBViewCell.m 

@implementation NBViewCell
- (void)dealloc
{
    self.label = nil;
    [super dealloc ];
}
//重写初始化方法
- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {

        [self.contentView addSubview:self.label];

    }
    return self;
}

- (UILabel *)label{

    if (_label == nil) {
        self.label = [[UILabel alloc]initWithFrame:self.bounds];
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.backgroundColor = [UIColor cyanColor];

    }
    return [[_label retain]autorelease];
}
@end

准备一个自定义页眉：

实现页眉显示图片

HeaderView.h

@interface HeaderView : UICollectionReusableView
@property(nonatomic,retain)UIImageView *photoView;
@end

HeaderView.m 

@implementation HeaderView
- (void)dealloc
{
    self.photoView = nil;
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {

        [self addSubview:self.photoView];
    }
    return self;
}

- (UIImageView *)photoView{
    if (_photoView == nil) {
        self.photoView = [[UIImageView alloc]initWithFrame:self.bounds];
//        self.photoView.image = [UIImage imageNamed:@"a.jpg"];
        self.photoView.backgroundColor = [UIColor yellowColor];
    }

    return [[_photoView retain]autorelease];
}
@end

准备一个自定义页脚：

实现页脚显示分区

FooterView.h

@interface FooterView : UICollectionReusableView
@property(nonatomic,retain)UILabel *footerLabel;
@end

FooterView.m 

@implementation FooterView
- (void)dealloc
{
    self.footerLabel = nil;
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {

        [self addSubview:self.footerLabel];

    }

    return self;
}

- (UILabel *)footerLabel{

    if (_footerLabel == nil) {
        self.footerLabel = [[UILabel alloc]initWithFrame:self.bounds];
        self.footerLabel.backgroundColor = [UIColor redColor];

    }
    return [[_footerLabel retain]autorelease];
}

@end

页眉图片：

最终效果：

---------------------------------------------

时间： 2024-10-06 23:03:18

iOS中 UICollectionView UI_19的相关文章

ios-IOS中uicollectionview有没有headerview

问题描述 IOS中uicollectionview有没有headerview tableview有tableheaderview,uicollectionview有没有与之相似的"cllection headerview"?我知道uicollectionview可以设置每个分组的页眉页脚,但没找到整个uicollectionview上面的headerView,上面要加个轮播图. 解决方案 UICollectionView作为比UITableView更强大的封装,自然是有header和f

iOS流布局UICollectionView系列五——圆环布局的实现

iOS流布局UICollectionView系列五--圆环布局的实现 一.引言         前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的布局属性类UICollectionViewLayoutAttributes来设置设置每个item的具体位置,我们可以再扩展一下,如果位置我们可以自由控制,那个布局我们也可以更加灵活,就比如创建一个如下的circleLayout: 这种布局方式在apple的官方文档中也有

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

iOS流布局UICollectionView系列一--初识与简单使用UICollectionView 一.简介         UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似.简单来说,UICollectionView是比UITbleView更加强大的一个UI控件,有如下几个方面: 1.支持水平和垂直两种方向的布局 2.通过layout配置方式进行布局 3.类似于TableView中的cell特性外,

iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

iOS流布局UICollectionView系列三--使用FlowLayout进行更灵活布局 一.引言         前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和属性方法. UICollectionView的简单使用:http://my.oschina.net/u/2340880/blog/522613    UICollectionView相关协议

iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局

iOS流布局UICollectionView系列四--自定义FlowLayout进行瀑布流布局 一.引言         前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局,但都限制在系统为我们准备好的布局框架中,还是有一些局限性,例如,如果我要进行瀑布流似的不定高布局,前面的方法就很难满足我们的需求了,如下: 这种布局无疑在app的应用中更加广泛,商品的展示,书架书目的展示,都会倾向于采用这样的布局方式,当然,通过

iOS流布局UICollectionView系列六——将布局从平面应用到空间

iOS流布局UICollectionView系列六--将布局从平面应用到空间 一.引言         前面,我们将布局由线性的瀑布流布局扩展到了圆环布局,这使我们使用UICollectionView的布局思路大大迈进了一步,这次,我们玩的更加炫一些,想办法将布局应用的空间,你是否还记得,在管理布局的item的具体属性的类UICollectionViewLayoutAttributrs类中,有transform3D这个属性,通过这个属性的设置,我们真的可以在空间的坐标系中进行布局设计.iOS系统

iOS流布局UICollectionView系列二——UICollectionView的代理方法

iOS流布局UICollectionView系列二--UICollectionView的代理方法 一.引言         在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与思路,这篇博客是上一篇的补充,来讨论关于UICollectionView的代理方法的使用.博客地址: UICollectionView的简介和简单使用:http://my.oschina.net/u/2340880/blog/522613 二.UICol

ios-需要在IOS中设置延迟功能

问题描述 需要在IOS中设置延迟功能 需要一个延时器,进行23秒的延迟然后执行函数.应该怎么实现?用不用NSTimer? 解决方案 performSelector: withObject: afterDelay: 解决方案二: 简单点的话,使用performSelector: withObject: afterDelay: 方法 [self performSelector:@selector(delayMethod:) withObject:nil afterDelay:23];

error-请教iOS中CMPedometer的用法

问题描述 请教iOS中CMPedometer的用法 10C #import @implementation FirstViewController (void)viewDidLoad { [super viewDidLoad]; [CMPedometer isStepCountingAvailable]; CMPedometer *pedonmeter = [[CMPedometer alloc] init]; [pedonmeter startPedometerUpdatesFromDate: