文档章节

iOS开发UICollectionView篇---UICollectionView小结+实例

琳小兮
 琳小兮
发布于 2015/02/27 17:38
字数 819
阅读 681
收藏 0

    UICollectionView 主要用于展示网格布局,可以实现多列布局,使用方法和UITableView十分相象。说到不同点,collectionView与tableView最 大的不同点就是:collectionView必须要使用自己的layout(UICollectionViewFlowLayout)(如下),并且在 创建collectionView的时候需要带layout的初始化方法(如下),因此UICollectionView也比UITableView多了一个UICollectionViewDelegateFlowLayout协议,我们在使用UICollectionView的时候就需要实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。

     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        //设置对齐方式
        [layout setScrollDirection:UICollectionViewScrollDirectionVertical];
        //cell间距
        layout.minimumInteritemSpacing = 1.0f;
        //cell行距
        layout.minimumLineSpacing = 1.0f;
     _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, is_IOS_7?64:44, SCREEN_WIDTH, SCREEN_HEIGHT-64) collectionViewLayout:layout];

    我们在使用UICollectionView的时候一些常用方法如下:

    #pragma mark -- UICollectionViewDataSource
    
    //展示的UICollectionViewCell的个数
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
        return 10;
    }
    
    //定义展示的Section的个数
    -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
    {
        return 2;
    }
    
    //每个UICollectionView展示的内容
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        BTCollectionCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
        
        cell.imageView.image = [UIImage imageNamed:@"tupian"];
        cell.titleLabel.text = [NSString stringWithFormat:@"第%d组,第%d个",indexPath.section,indexPath.row];
        cell.titleLabel.tag = 100+indexPath.row;
        
        return cell;
    }
    #pragma mark --UICollectionViewDelegateFlowLayout
    
    //定义每个UICollectionView 的 margin
    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
    {
        //整个视图的顶端左端底端右端
        UIEdgeInsets top = {5,5,5,5};
        return top;
    }
    
    //定义每个UICollectionView的大小,注意:这里需要和BTCollectionCell的大小设置一致
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        return CGSizeMake(140, 80);
    }
    #pragma mark --UICollectionViewDelegate
    
    //UICollectionView被选中时调用的方法
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
    {
        BTCollectionCell *cell = (BTCollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
        
        UILabel *label = (UILabel *)[cell viewWithTag:100+indexPath.row];
        label.backgroundColor = RGBACOLOR(42, 183, 251, 1);
        label.textColor = [UIColor whiteColor];
    }

    知道了这些方法以后,下面就来实际操作下,小试牛刀。因为collectionCell必须要我们自己添加,没有设置默认的cell布局,这里我选择用xib来自定义

    新建类BTCollectionCell继承自UICollectionViewCell

    新建Xib,命名为BTCollectionCell.xib

    选中BTCollectionCell.xib删掉默认的View,从控件中拖一个Collection View Cell到画布中,然后设置Collection View Cell得大小

    选中刚刚添加的Cell,选择class为BTCollectionCell

    选中BTCollectionCell.xib 修改其identifier为BTCollectionCell


    在BTCollectionCell中添加一个ImageView和一个Label,并且设置他们得坐标,并添加映射

    选中BTCollectionCell.m , 重写init方法

    - (id)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
    
            // 初始化时加载BTCollectionCell.xib文件,注意名字不要写错
            NSArray *collectionArrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"BTCollectionCell" owner:self options:nil];
            
            // 如果路径不存在,返回nil
            if (collectionArrayOfViews.count < 1)
            {
                return nil;
            }
            
            // 如果xib中view不属于UICollectionViewCell类,return nil
            if (![[collectionArrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]])
            {
                return nil;
            }
            
            // 加载nib
            self = [collectionArrayOfViews objectAtIndex:0];
        }
        return self;
    }
    //创建UICollectionView,在viewDidLoad里面调用initCollectionView方法
    -(void)initCollectionView
    {
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        //设置对齐方式
        [layout setScrollDirection:UICollectionViewScrollDirectionVertical];
        //cell间距
        layout.minimumInteritemSpacing = 1.0f;
        //cell行距
        layout.minimumLineSpacing = 1.0f;
        
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, is_IOS_7?64:44, SCREEN_WIDTH, SCREEN_HEIGHT-64) collectionViewLayout:layout];
        
        //声明cell得类为BTCollectionCell,这句一定要写,不然程序会崩溃
        [_collectionView registerClass:[BTCollectionCell class] forCellWithReuseIdentifier:@"cell"];
        
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.backgroundColor = RGBACOLOR(234, 234, 234, 1);
        [self.view addSubview:_collectionView];
    }
    //不要忘记导入BTCollectionCell头文件
    #import "BTCollectionCell.h"
    //声明他们的代理(实现代理方法前面已经说过了,这里就不再细说)
    @interface BTCollectionViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
    {
        UICollectionView *_collectionView;
    }
    @end

    最后来看看效果图咯


© 著作权归作者所有

共有 人打赏支持
琳小兮
粉丝 30
博文 37
码字总数 20169
作品 0
襄阳
程序员
iOS流布局UICollectionView系列二——UICollectionView的代理方法

iOS流布局UICollectionView系列二——UICollectionView的代理方法 一、引言 在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与...

珲少
2015/10/27
0
3
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局 一、引言 前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没...

珲少
2015/10/27
0
2
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
0
1
iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码

iOS精选源码 MXScroll 介绍 混合使用UIScrollView(http://www.code4app.com/thread-30678-1-1.html) ios 电商demo(实现各种常见动画效果和页面布局)(http://www.code4app.com/thread-30689......

sunnyaigd
08/07
0
0
一步一步学习 iOS 6 编程(第四版)正式发布

所有范例程序及其截图都采用Xcode 4.4 和Xcode 4.5 最新版开发工具,本书包含了最新的iOS 6 开发技术,如自动布局(Auto Layout)、集合视图(Collection View)等等。 新增内容包括:分割视...

entlib
2012/10/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
23分钟前
0
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
25分钟前
1
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
38分钟前
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部