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
页眉图片:
最终效果:
---------------------------------------------
iOS中 UICollectionView UI_19的更多相关文章
- IOS中UICollectionView和UICollectionViewController的用法
1.新建一个xib描述UICollectionViewCell(比如DealCell.xib),设置好resuse identifier(比如deal) 2.控制器继承UICollectionView ...
- iOS中UICollectionView添加头视图
参考链接:https://www.jianshu.com/p/ef57199bf34a 找了一堆的博客,写的都少了很重要的一步. //引入头部视图 -(UICollectionReusableView ...
- iOS 中UICollectionView实现各种视觉效果
参考链接:https://www.jianshu.com/p/b3322f41e84c 基础:https://www.jianshu.com/p/d0b034f59020
- iOS流布局UICollectionView系列七——三维中的球型布局
摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...
- iOS开发——高级篇——iOS中常见的设计模式(MVC/单例/委托/观察者)
关于设计模式这个问题,在网上也找过一些资料,下面是我自己总结的,分享给大家 如果你刚接触设计模式,我们有好消息告诉你!首先,多亏了Cocoa的构建方式,你已经使用了许多的设计模式以及被鼓励的最佳实践. ...
- iOS 中有用的开源库
youtube下载神器:https://github.com/rg3/youtube-dl vim插件:https://github.com/Valloric/YouCompleteMe vim插件配 ...
- ios 中的小技巧 - 总有你想要的 一
UITableView的Group样式下顶部空白处理 在viewWillAppear里面添加如下代码: //分组列表头部空白处理 CGRect frame = myTableView.tableHea ...
- iOS:UICollectionView的扩展应用
一.介绍 CollectionView是iOS中一个非常重要的控件,它可以实现很多的炫酷的效果,例如轮播图.瀑布流.相册浏览等.其实它和TableView很相似,都是对cell进行复用,提高系统性能. ...
- iOS中常见的设计模式(MVC/单例/委托/观察者)
关于设计模式这个问题,在网上也找过一些资料,下面是我自己总结的,分享给大家 如果你刚接触设计模式,我们有好消息告诉你!首先,多亏了Cocoa的构建方式,你已经使用了许多的设计模式以及被鼓励的最佳实践. ...
随机推荐
- XML相关知识
XML的定义: XML即可扩展标记语言标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等.如何定义这些标记,既可以选择国际通用的标记语言,比如HTML,也可以使用 ...
- Node.js 字符串解码器
稳定性: 3 - 稳定 通过 require('string_decoder') ,可以使用这个模块.字符串解码器(StringDecoder)将缓存(buffer)解码为字符串.这是 buffer. ...
- React Native 4 for Android源码分析 一《JNI智能指针之介绍篇》
文/ Tamic: http://blog.csdn.net/sk719887916/article/details/53455441 原文:http://blog.csdn.net/eewolf/a ...
- Java中的Lock锁
Lock锁介绍: 在java中可以使用 synchronized 来实现多线程下对象的同步访问,为了获得更加灵活使用场景.高效的性能,java还提供了Lock接口及其实现类ReentrantLock和 ...
- 对 /dev/shm 认识
一./dev/shm理论 /dev/shm/是linux下一个非常有用的目录,因为这个目录不在硬盘上,而是在内存里.因此在linux下,就不需要大费周折去建 ramdisk,直接使用/dev/shm/ ...
- Dynamics CRM 构建IN查询
CRM中有3种查询数据的方式,分别是QueryExpression.fetchxml.linq,本篇讲述的条件IN的查询只支持前两种,linq并不支持. QueryExpression的写法如下,示例 ...
- Dynamics CRM2011 导入解决方案报根组件插入错误的解决方法
今天在还原一个老版本的解决方案,在导入时报根组件插入问题"Cannot add a Root Component 38974590-9322-e311-b365-00155d810a00 o ...
- 剑指Offer——网易笔试题+知识点总结
剑指Offer--网易笔试题+知识点总结 Fibonacci package cn.edu.ujn.nk; import java.util.ArrayList; import java.util.S ...
- App安全(一) Android防止升级过程被劫持和换包
文/ Tamic 地址/ http://blog.csdn.net/sk719887916/article/details/52233112 前言 APP 安全一直是开发者头痛的事情,越来越多的安全漏 ...
- Spring的DataSource配置、将Hibernate配置全部写到Spring配置
DataSource可以集中管理数据库连接,减少维护工作量,使部署更简单: Spring的DataSource配置:(Spring数据源配置)这里使用dbcp,还有很多其他的如c3p0,jdbc,jn ...