文档章节

通过UICollectionView创建网格布局

人生天地间
 人生天地间
发布于 2014/04/10 15:54
字数 1172
阅读 2878
收藏 4
点赞 0
评论 0

  在这个教程中,我们经构建一个件的程序,以网格布局的俄方式现实图片集,你将学到下面的信息:

  1.  UICollectionView简介

  2. 如何是使用UICollectionView构建一个简单的基于网格的布局

  3. 自定义Collection Cell背景

  

  UICollectionView 基础

     UICollectionView类似UITableView,尽管UITableView管理Collection数据,并以单栏布局的形式在屏幕上显示,UICollection类为开发人员提供了灵活的使用方法,可以自定义布局。在默认情况下,通过自带的SDK,并通过UICOllectionViewFlowLayout类来组织项目与可选部分的页眉,页脚试图。

      该UICollectionView类管理数据项的有序集合,并使用自定义的布局呈现它们。收集意见提供相同的一般功能表视图,除了集合视图能够支持更多的不仅仅是单一的列布局。集合视图实现多列网格,平铺布局,圆形布局,还有更多的可定制的布局。如果你想要,你甚至可以动态改变一个集合视图的布局。


    UICollectionView是由下面几个部分组成:

  •    Cell-UICollectionViewCell实例,就像UITableViewCell,一个单元格代表收集的单个项目,这些Cell将是组织布局的主要内容,如果UICollectionViewFlowLayout被使用时,Cell将被排列成格子状。

  • 补充一件-可选。通常用于实现section的header和footer视图

  • 装饰视图-decoration View是用于装饰的

创建一个网格布局简单APP

  为了更好的理解UICollectionView 工作。让我们开始创建一个简单的app,打开Xcode选择SingleView application, 把工程命名为" RecipePhoto"。

   设计Collection View

    把storyboard中的默认的视图控制器删除,作为替代,从object library添加一个CollectionView Controller

RecipePhoto Add Collection View Controller

在"Size Inspector",改编成下面的设置

RecipePhoto Change Cell Size

                        改变Collection View Cell的尺寸

下一步,选择Collection View Cell并设置identifier改为"cell"

RecipePhoto Cell Reuse Identifier

谈后添加一个Image View

RecipePhoto Add Image View to Cell

编辑Collection View

  创建新文件"New File",选择一个新类继承自UICollectionViewController命名为"RecipeCollectionViewController"。如下图所示:

RecipePhoto Create RecipeCollectionViewController

回到Storyboard,在Custom Class中的class栏选择CollectionViewController,如下图所示:

RecipePhoto Assign Custom Class

   就像我们所说的UICollectionView的使用和UITableView很相似。如果你使用过UITableViewDataSource协议,那么你会很快熟悉UICollectionViewDataSource协议,同样都是用来加载数据的,最后,我们必须实现这个collectionView:numberOfItemsInSection:和collectionView:CellForItemAtIndexPath:方法。

     下载让我们到RecipeCollectionViewController类中去写代码,首先下载这里download this image pack的图片,并且解压放到Xcode 工程中。

       再回到RecipeCollectionViewController.m文件中为图像文件声明一个数组:

@interface RecipeCollectionViewController () {

         NSArray *recipePhotos;

}

    初始化ViewDidLoad方法

   - (void)

{

     [super viewDidLoad];

  //初始化 recipe image 数组

     recipeImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg",@"creme_brelee.jpg"@"egg_benedict.jpg"@"full_breakfast.jpg"@"green_tea.jpg"@"ham_and_cheese_panini.jpg"@"ham_and_egg_sandwich.jpg"@"hamburger.jpg"@"instant_noodle_with_egg.jpg"@"japanese_noodle_with_pork.jpg"@"mushroom_risotto.jpg"@"noodle_with_bbq_pork.jpg"@"starbucks_coffee.jpg"@"thai_shrimp_cake.jpg"@"vegetable_curry.jpg"@"white_chocolate_donut.jpg",]

}

   接下来我们实现UICollectionViewDataSource协议强制实现的两个方法:

 - (NSInteger)CollectionView:(UICollectionView *)collectionVIew numberOfItemsInSection:(NSInteger)secion

{

     return recipeImages.count;

}

- (UICollectionViewCell *)CollectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

       static NSString *identifier = @"Cell";

       UICollectionViewCell *cell = [CollectionView dequeueResusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

       UIImageView *recipeImageView = (UIImageVIew *)[Cell ViewWithTag:100];

       recipeImageView.image = [UIImage imageNamed:[recipeImages ObjectAtIndex:indexPath.row]];

       return cell;

}

 collectionView:numberOfItemInSecion:方法是用来返回recipe image的图片的数量的。

 cellForItemAtIndexPah:方法是为collection View cells提供数据的。首先我们顶一个cell标识符,然后使用CollectionView复用cell。dequeueResuableCellWithRequesIdentifier:方法将自动创建一个单元格或复用单元格,最终,我们将通过标记值获得图像并分配图像。

   下图就是我们完成运行后的显示

RecipePhoto App First Version

  定制CollectionView cell的背景

     咋样,UICollectionView 是不是很赞?利用很少的代码我们就能做出一个件的相片app。但是如果你像为你的的图片添加frame?接下来你会发现,利用collection View cell定制背景是很简单的。事实上UICollectionViewCell提供了三种不同的视图,其中就包括背景这一项,还有selected background 和 content view,下面的图片将会最好的说明这一点:

UICollectionViewCell View Components

  

  • Background View -cell的背景

  • Selected Background view -当被选择的单元格的背景图。当用户选择该单元格,这个选择的背景视图将上述背景视图分层。

  • Content View - 很明显,这里显示的是cell的内容

 我们已经使用content View显示出了图片,我们将使用背景视图来显示相框,就在刚才你下载的文件中为:"pic_frame.png"。

  再回到Stroyboard中选择image view,选择 X为5和Y为8,就像下图显示的一样

RecipePhoto Resize Image View

   在RecipeCollectionVIewController.m文件中的CellForItemAtIndexPath:方法中添加下面的代码

  cell.backgroundVIew = [[UIImageView alloc] initWithImage [UIImage imageNamed:@"photo-frame.png"]];


 接下来运行的app你就会看到像下面的图片显示

RecipePhoto App with Photo Frame

完整代码在这里here


© 著作权归作者所有

共有 人打赏支持
人生天地间
粉丝 12
博文 46
码字总数 42083
作品 0
常州
程序员
iOS-UICollectionView快速构造/拖拽重排/轮播实现介绍

目录 的定义 快速构建GridView网格视图 拖拽重排处理(iOS8.x-/iOS9.x+) 实现简单轮播 UICollectionView的定义 同一样,是iOS中最常用到数据展示视图。 官方定义: An object that manages a...

Tr2e ⋅ 2017/04/07 ⋅ 0

UICollectionView

UICollectionView实现网格布局,但不知道怎么随意点击图片让图片全屏以及滑动

小刀杰 ⋅ 2014/10/14 ⋅ 0

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

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView 一、简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十...

珲少 ⋅ 2015/10/27 ⋅ 5

UICollectionView总结

好久没写博客了,最近闲,多写点! 1.基本介绍 先介绍一下UICollectionView,大家应该都用过UITableView,不熟悉的可以看这里《UITableView总结》,UITableView中的表格只支持单排列表,没办法...

余成海 ⋅ 2015/03/26 ⋅ 0

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

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

珲少 ⋅ 2015/10/27 ⋅ 2

UICollectionView简介

一、集合视图概述 UICollectionView也称集合视图,是一种新的数据展示方式,简单地可以理解为多列的UITableView。例如:iBooks的书架效果、购物网站的商品展示效果等等。 UICollectionView与...

黑伞将军 ⋅ 2015/09/14 ⋅ 0

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

iOS流布局UICollectionView系列五——圆环布局的实现 一、引言 前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的...

珲少 ⋅ 2015/10/28 ⋅ 5

IOS中UICollectionView的基本用法

本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView。 UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视...

Erichkko ⋅ 2015/08/28 ⋅ 0

iOS UICollectionView、UICollectionViewCell和Header、Footer

准备工作:创建UICollectionView ①UICollectionViewFlowLayout UICollectionViewFlowLayout是系统提供给我们一个封装好的布局设置类,其中有一些布局属性我们可以进行设置: ②UICollectio...

JoshSone ⋅ 2016/11/10 ⋅ 0

UICollectionView创建实例

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

SoulJa ⋅ 2015/10/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 5分钟前 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 12分钟前 ⋅ 0

Python 优化 回溯下降算法

使用sympy构造表达式,实现回溯下降算法 画出函数图像,先使用暴力搜索,找到最小值约为2.5左右 然后选定初始点,开始进行回溯搜索,下降方向为负梯度方向 下降的误差与步数大致呈现下面的状...

阿豪boy ⋅ 17分钟前 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 18分钟前 ⋅ 0

用接口模拟可伸缩枚举(34)

1、枚举的可伸缩性最后证明都不是什么好点子 扩展类型的元素是基本类型实例,基本类型的实例却不是扩展类型的元素,很混乱 目前还没有很好的方法来枚举基本类型的所有元素,及其扩展 可伸缩性...

职业搬砖20年 ⋅ 22分钟前 ⋅ 0

Ubuntu18.04 IDEA快捷键无法使用

IDEA默认的回退到上一视图的快捷键是Ctrl + Alt + Left,在ubuntu中这个快捷键被占用了,在16.04中可以在界面中取消这个快捷键,但是18.04就看不到了,可以使用以下命令解决 gsettings set ...

Iceberg_XTY ⋅ 26分钟前 ⋅ 0

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 38分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 58分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 今天 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部