文档章节

通过UICollectionView创建网格布局

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

目录 项目下载地址: CollectionView-Note UICollectionView 01 - 基础布局篇 UICollectionView 02 - 布局和代理篇 UICollectionView 03 - 自定义布局原理篇 UICollectionView 04 - 卡片布局...

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

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

smalldu
2018/11/21
0
0
iOS-UICollectionView快速构造/拖拽重排/轮播实现介绍

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

Tr2e
2017/04/07
0
0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

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

珲少
2015/10/27
0
5
UICollectionView 05 - 可伸缩Header

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

smalldu
2018/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Map的遍历方式

import java.util.*; public class a_21 { public static void main(String[] args) { Map<Integer,Integer> map= new HashMap<Integer, Integer>(); for(int i=0;i<6;i++) ......

南桥北木
29分钟前
0
0
总结:线程间频繁切换为什么耗费资源?

因为线程切换的时候,CPU需要将此线程的所有执行状态保存起来,如线程编号,执行到的位置等,然后再去执行其它线程。

浮躁的码农
今天
3
0
PHP版本高于5.5时,curl文件上传必须使用CurlFile对象

坑了我一天,之前@的方法各种上传不成功文件。都怀疑服务端有bug了。

叫我哀木涕
今天
1
0
js算法总结

数列求和 等差数列求和 function sum(a0,d,n){//a0->首项,d->公差,n->项数//(首项+末项)*项数/2return (a0+(a0+(n-1)*d))*n/2;} 等比数列求和 function sum(a0,q,n){//a0->首项,q......

祖达
今天
4
0
小白?转型?毕业生?外行学习快速入行大数据开发指南

这篇文章中,本文将针对三种不同的、想要进入数据科学领域的人群,给出自己的经验,帮助他们迅速有效入行。 虽然没有适合每个人的万能解决方案,但这三类建议值得想转行的你一看。 第1类:新...

董黎明
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部