文档章节

通过UICollectionView创建网格布局

人生天地间
 人生天地间
发布于 2014/04/10 15:54
字数 1172
阅读 2902
收藏 4

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

  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
0
UICollectionView

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

小刀杰
2014/10/14
101
0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

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

珲少
2015/10/27
0
5
UICollectionView简介

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

黑伞将军
2015/09/14
311
0
UICollectionView总结

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

余成海
2015/03/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

收邮件 下载附件

uses IdMessage, IdMessageParts, IdAttachment, IdGlobalProtocols, ...;procedure SaveAttachmentsFromFile(FileName: String)var IdMessage: TIdMessage; MsgPart: Ti......

vga
7分钟前
0
0
shiro 标签不能在html中应用的解决方案

shiro提供jsp标签,html属于静态页面,没办法引入。解决办法: 1.把html换成jsp。 2.用js判断: 原理参照:https://blog.csdn.net/fusugongzi/article/details/75221407 实现的方式大同小异,...

地瓜2013
8分钟前
0
0
(十八) 整合spring cloud云架构 -后台管理基础功能简介

1. 项目介绍 鸿鹄云开发平台是一个大型分布式、微服务、云架构、面向企业的 JavaEE体系快速研发平台,基于模块化、服务化、原子化、热插拔的设计思想,使用成熟领先的无商业限制的主流开源技...

SpringCloud关注者
17分钟前
4
2
Flask 开发填坑

插件的选择: flask-security 真的是个鸡肋啊。自带的页面,好丑。还不如用flask-login来做呢。

pearma
今天
4
0
讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部