UICollectionView详解一:基本介绍

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

我们来按顺序看下面四幅图。可以看出,UICollectionViewCell与UITableViewCell的结构很相似。

下图是UICollectionView相关的类图,从图中我们可以看到

1. UICollectionView继承自UIScrollView,

2. 尊循UICollectionViewDelegate和UICollectionViewDataSource两个协议

3. 管理UICollectionViewCell

图中貌似还缺点东西,什么呢?对了,就是缺少Layout。我们需要Layout对cell和其它的view进行布局。再看下图,图中多了UICollectionViewLayout和UICollectionViewFlowLayout (关于这两个layout,我会在下面两节中介绍到)。

如下面的两个图是collection view的layout。

CollectionView主要是以Item为基本单元,可以看出,每个Item不一定占满一行,而tableView的Cell必须占满一行。

典型的例子:九宫格。

UITableView的实现思路:

1. 自定义一个UITableViewCell。

2. 在自定义的Cell的contentView上面放置所需要的元素。

3. 为每一个放置的元素添加点击事件,而且还要计算好每个元素所在的位置。

UICollectionView的实现思路

每一个Item就是一个Cell,而点击事件直接交给UICollectionView的代理方法就可以了。

先看实现效果图:

代码大致实现步骤如下:

1. 自定义UICollectionViewCell,就是上图中对应的每一个Item。

LFCollectionViewCell.h

@interface LFCollectionViewCell : UICollectionViewCell

@property (weak, nonatomic) IBOutlet UIImageView *myImage;
@property (weak, nonatomic) IBOutlet UILabel *myLabel;

@end

LFCollectionViewCell.m

@implementation LFCollectionViewCell

- (void)awakeFromNib {
    // Initialization code
}

- (instancetype)initWithFrame:(CGRect)frame {
    if(self = [super initWithFrame:frame]){
        self = [[[NSBundle mainBundle] loadNibNamed:@"LFCollectionViewCell" owner:nil options:nil] lastObject];
    }
    return self;
}

@end

2. 主界面代码:

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 注册LFCollectionViewCell
    [self.collectionView registerClass:[LFCollectionViewCell class] forCellWithReuseIdentifier:@"LFCollection"];
}

#pragma mark - UICollectionView DataSource
// 每个section的item个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 8;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    // UICollectionViewCell内部已经实现了循环使用,所以不用判断为空,自己创建
    LFCollectionViewCell *cell = (LFCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"LFCollection" forIndexPath:indexPath];

    //图片名称
    NSString *image = [NSString stringWithFormat:@"%ld.jpg", (long)indexPath.row];

    //加载图片
    cell.myImage.image = [UIImage imageNamed:image];

    //设置label文字
    cell.myLabel.text = [NSString stringWithFormat:@"%ld",(long)indexPath.row];

    return cell;
}
@end

需要说明的两点:

1. 在viewDidload中完成LFCollectionViewCell的注册。

2. 在dequeueReusableCellWithReuseIdentifer方法从缓存池中获取的cell不需要判断取出来的cell是否为nil,如果为nil,系统会自动创建一个。

3. 如果改变图片的尺寸,只要当屏幕的一行不够显示图片的时候,图片会自动换行。

4. 想要实现每个Item的点击实现,只要在代理中实现就可以了。

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

}
时间: 2024-11-01 17:25:16

UICollectionView详解一:基本介绍的相关文章

iOS开发——UI篇OC篇&amp;UICollectionView详解+实例

UICollectionView详解+实例 实现步骤: 一.新建两个类 1.继承自UIScrollView的子类,比如HMWaterflowView * 瀑布流显示控件,用来显示所有的瀑布流数据 2.继承自UIView的子类,比如HMWaterflowViewCell * 代表着瀑布流数据中的一个单元(一个格子) 3.总结 HMWaterflowView和HMWaterflowViewCell的关系实际上类似于 UITableView和UITableViewCell的关系 二.设计HMWater

iOS开发- UICollectionView详解+实例

iOS开发- UICollectionView详解+实例 本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView. UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类. 使用UICollectionView 必须实现UICol

UICollectionView详解

今天,将和大家一起学习UICollectionView,UIcollectionView自出来后,一直受追捧,确实好用.今天有朋友问我如何添加heardView,我简单的回答:tableview如何添加,那么CollectionView就怎么添加,后来经过自己实验发现确实不是那回事,所以列出一些自己犯的错误,供大家参考. 1.首先实例化一个 UICollectionViewFlowLayout因为要设置item,itemSize,等一些属性. UICollectionViewFlowLayout

Spring4.X + spring MVC + Mybatis3 零配置应用开发框架搭建详解(1) - 基本介绍

Spring4.X + spring MVC + Mybatis3 零配置应用开发框架搭建详解(1) - 基本介绍 spring集成 mybatis Spring4.x零配置框架搭建 两年前一直在做后台的纯Java开发,很少涉及web开发这块,最近换了个纯的互联网公司,需要做Web后台管理系统,之前都是用xml配置的项目,接触了公司Spring4.x的零配置项目,觉得非常有感觉,不仅仅配置简单,而且条理清晰,所以,这里把学习的内容记录下来,一来加深对这块技术的印象,另外准备做个简单的教程,如果给

Python装饰器详解,详细介绍它的应用场景

装饰器的应用场景 附加功能 数据的清理或添加: 函数参数类型验证 @require_ints 类似请求前拦截 数据格式转换 将函数返回字典改为 JSON/YAML 类似响应后篡改 为函数提供额外的数据 mock.patch 函数注册 在任务中心注册一个任务 注册一个带信号处理器的函数 不同应用场景下装饰器实现 函数注册表 简单注册表 funcs = [] def register(func): funcs.append(func) return func @register def a(): r

iOS之UICollectionView详解

UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout,而且允许用户自定义layout来进行布局. 当UICollectionView显示内容时,先从Data source(数据源)获取cell,然后交给UICollectionView.再从UICollectionViewLayout获取对应的layout attribu

UICollectionView详解三:UICollectionViewLayout

上一节中,我介绍了UICollectionViewFlowLayout的使用,它主要是使用在流式布局中的,但对于某些复杂的布局,UICollectionViewFlowLayout就不起作用了.这个时候,我们可以考虑使用UICollectionViewLayout. UICollectionViewFlowLayout是继承自UICollectionViewLayout,并且拥有自己的流式特性.对于一些复杂的效果,我们完全可以自定义UICollectionViewLayout来实现. 这一节,我

UICollectionView详解四:焦点图

前三节中,我已经对UICollectionView的基本用法进行了详细的介绍.这一节就UICollectionView的实际使用 --- "焦点图" 进行剖析说明.废话不多说,先看最终实现效果图: 需求说明: 1.准备了五张图片 2.定时滚动显示 3.右下角的分页指示器也实时切换 4.可以手动拖拽图片滚动 为什么选择UICollectionView? 1.UICollectionView帮我们管理好了循环利用cell的问题,不管有多少图片需要滚动,内存中只需要两个cell管理就好了.

【转帖】C# DllImport 系统调用使用详解 托管代码的介绍 EntryPoint的使用

1      DLLImport的使用 using System; using System.Runtime.InteropServices; //命名空间 class Example { //用DllImport 导入Win32的MessageBox函数 [DllImport("user32.dll", CharSet = CharSet.Unicode)] public static extern int MessageBox(IntPtr hWnd, String text, S