文档章节

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

琳小兮
 琳小兮
发布于 2015/02/27 17:38
字数 819
阅读 678
收藏 0
点赞 3
评论 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
博文 28
码字总数 17511
作品 0
襄阳
程序员
iOS高仿QQ侧滑控件、下载框架、动画效果、扫一扫、颜色变化、K线图等源码

iOS精选源码 仿京东"加入购物车"转场动画(http://www.code4app.com/thread-28162-1-1.html) ColorTool(颜色转换)(http://www.code4app.com/thread-29256-1-1.html) Swift 专业版K线(http://w......

sunnyaigd ⋅ 04/17 ⋅ 0

Diff应用:从LCS到UICollectionView

前文 什么是Diff? 日常编程中有时候会遇到对比字符串,对比数组的情况,找出前后新旧数据的不同,可以称之为Diff。 什么是LCS? Longest Common Subsequence的简称,最长公共子序列。 LCS有...

今日头条技术团队 ⋅ 05/09 ⋅ 0

阿里腾讯百度头条美团iOS面试总结

阿里腾讯百度头条美团iOS面试总结 2018-05-30 15:24编辑: garace分类:程序人生来源:代码湾 互联网面试iOS 招聘信息: C++工程师 Cocos2d-x游戏客户端开发 iOS开发工程师 京东招聘iOS开发工...

garace ⋅ 05/30 ⋅ 0

又拍云Prism CDN 超低价 低延时 超强兼容的P2P-CDN

又拍云Prism CDN 超低价 低延时 超强兼容的P2P-CDN 2018-05-15 10:26编辑: 枣泥布丁分类:业界动态来源:https://www.upyun.com/products CDN又拍云 招聘信息: C++工程师 Cocos2d-x游戏客户...

枣泥布丁 ⋅ 05/15 ⋅ 0

2018 一份"有点难"的iOS面试题(5年iOS开发)

序言: 之前一时兴致在本站上出过一份iOS的中级面试题,引起一些关注,不少同学表示对”隐藏关卡“感兴趣。升级版iOS面试题来了,目测难倒90%iOS程序员,目测一大波程序员撸着袖子在靠近。 ...

原来是泽镜啊 ⋅ 05/26 ⋅ 0

【AR】开始使用Vuforia开发iOS(2)

原 设置iOS开发环境 安装Vuforia iOS SDK 如何安装Vuforia iOS示例 编译并运行Vuforia iOS示例 支持iOS金属 iOS 64位迁移 设置iOS开发环境 适用于iOS的Vuforia引擎目前支持运行iOS 9及更高版...

lichong951 ⋅ 06/11 ⋅ 0

面试官自述:面向高级开发人员的iOS面试问题

当您准备进行技术性iOS面试时,了解您可能会询问哪些主题以及经验丰富的iOS开发人员期望什么是非常重要的。 这是许多硅谷公司用来衡量iOS候选人资历水平的一系列问题。 这些问题涉及iOS开发的...

菇哒微课 ⋅ 04/26 ⋅ 0

Proxy-Go 全平台 SDK 迎来 v4.8 更新!

Proxy-Go 全平台 SDK是proxy使用gombile实现了一份go代码编译为android和ios平台下面可以直接调用的sdk类库, 另外还为linux和windows提供sdk支持,基于这些类库,APP开发者可以轻松的开发出各...

狂奔的蜗牛. ⋅ 05/04 ⋅ 2

Proxy-Go 全平台 SDK v4.9 来啦!

Proxy-Go 全平台 SDK是proxy使用gombile实现了一份go代码编译为android和ios平台下面可以直接调用的sdk类库, 另外还为linux和windows提供sdk支持,基于这些类库,APP开发者可以轻松的开发出各...

狂奔的蜗牛. ⋅ 06/12 ⋅ 0

iOS天气动画、高仿QQ菜单、放京东APP、高仿微信、推送消息等源码

iOS精选源码 TYCyclePagerView iOS上的一个无限循环轮播图组件(http://www.code4app.com/thread-14507-1-1.html) iOS高仿微信完整项目源码(http://www.code4app.com/thread-14695-1-1.html)......

sunnyaigd ⋅ 06/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 22分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 28分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 30分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 39分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 42分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 今天 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 今天 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部