文档章节

通过UICollectionView创建网格布局

人生天地间
 人生天地间
发布于 2014/04/10 15:54
字数 1172
阅读 2915
收藏 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
常州
程序员
私信 提问
UICollectionView 01 - 基础布局篇

目录 UICollectionView 01 - 基础布局篇 UICollectionView 02 - 布局和代理篇 UICollectionView 03 - 自定义布局原理篇 UICollectionView 04 - 卡片布局 UICollectionView 05 - 可伸缩Heade......

smalldu
11/21
0
0
UICollectionView 02 - 布局和代理篇

文章按照顺序写的,之前文章写过的很多逻辑都会略过,建议顺序阅读,并下载源码结合阅读。 目录 UICollectionView 01 - 基础布局篇 UICollectionView 02 - 布局和代理篇 UICollectionView 0...

smalldu
11/21
0
0
UICollectionView 05 - 可伸缩Header

文章按照顺序写的,之前文章写过的很多逻辑都会略过,建议顺序阅读,并下载源码结合阅读。 目录 UICollectionView 01 - 基础布局篇 UICollectionView 02 - 布局和代理篇 UICollectionView 0...

smalldu
11/21
0
0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

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

珲少
2015/10/27
0
5
iOS-UICollectionView快速构造/拖拽重排/轮播实现介绍

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

Tr2e
2017/04/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day176-2018-12-13-英语流利阅读-待学习

人造的肉你敢吃吗? Lala 2018-12-13 1.今日导读 在过去的几十年里,肉类替代品已经从简单的大豆制品进化成了更像肉类的东西,比如以植物为原料的汉堡。然而,最近有公司已经生产出了完全用动...

飞鱼说编程
10分钟前
0
0
mysql 按小时统计

表里记录了有时间戳和对应的当年登录的玩家数量,现在希望看到一个月内每个小时,登录玩家的平均数量。 之前是写的一个脚本,写了一个循环,每次获取一个小时的平均数,放在数组里,再导出文...

bobway
15分钟前
1
0
TiQuery:All Diagnosis in SQL | TiDB Hackathon 优秀项目分享

本文作者是来自 TiNiuB 队的黄梦龙同学,他们的项目 TiQuery 在本届 TiDB Hackathon 2018 中获得了三等奖。 TiQuery 可以搜集诊断集群问题所需要的信息,包括集群拓扑,Region 分布,配置,各...

TiDB
27分钟前
2
0
git 分支创建合并流程图

gentlelions
35分钟前
3
0
Kali Linux常用服务配置教程DHCP服务原理

Kali Linux常用服务配置教程DHCP服务原理 动态主机配置协议(Dynamic Host Configuration Protocol,简称DHCP)是一个局域网的网络协议,基于UDP协议工作。它主要有两个用途:第一,给内部网...

大学霸
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部