UICollectionView官方使用示例代码研究

注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇

这个链接可以学习到UICollectionView的相关介绍:iOS6新特征:UICollectionView

由于UICollectionView功能比较强大,在此,我们深入学习一下UICollectionView的官方使用示例代码,顺与大家分享一下心得。

一、获取官方示例代码

官方使用示例代码下载地址:如下图所示

下载后,解压将CollectionView目录拖放进一个目录下(如你的文稿目录)

二、加载示例代码

启动Xcode 这里我用的是Xcode 4.5(4G182)版本。选择“Open Other…”打开CollectionView工程项目。

项目打开并加载后象是这样的,如图:

从工程项目属性中可看出,官方原代码设计已经同时支持Retina 3.5-inch(640*960)屏和Retina 4-inch(640*1136pixels)屏,如图:

官方原代码设计还支持Retina Display 2048*1096高清设计,只可惜本人电脑是黑苹果,电脑硬件不支持!所以显示“!”号,等发同发财了购买一台白苹果再试试。

三、运行效果

下面先看看官方原代码的实际运行的效果图,使用iPhone6.0模拟器测试运行程序,刚刚启动时,已经默认加载了6个cell。通过这样的一个Demo,我们可以看出,使用UICollectionView可以很方便的制作出照片浏览等应用。

点击其中任一张图片,导航进入下一祥细视图:

四、Collection View的整体构成元素

我们先来感性的认识一下CollectionView工程项目,下面这幅图就是用CollectionView实现的一个照片墙显示的工程项目文件结构。

我们知道:Collection View的整体构成元素,共有三个要素,分别如下

Cells(单元格)

Supplementary Views(补充的view,相当于TableView的页眉和页脚)

Decoration Views(装饰View,用于装饰整个Collection View的)

我们可以分解一下这个项目结构,来描述上面的三个元素都对应什么内容

1、缺省图片文件5个,分别以Default开头,用来支持各种设备屏幕,如下图:

2、资源图片共32张,其中大图片命名为0_full.jpg—31_full.jpg,小图片命名为0.jpg—31.jpg,用来供显示的数据图片。这里我们可以要注意一下它的命名,主要是为了方便下面的程序设计。如图:

五、关键文件代码

关键文件代码的目录如下图所示:

从上图,可以看到这个Demo有10个关键文件,下面分别对其进行介绍。

1、主函(main.m)代码

首先看一下主函数代码:没有什么特别的,与以前的完全一样一样的。

#import

#import "AppDelegate.h"

int main(int argc, char *argv[])

{

@autoreleasepool {

return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

}

}

2、故事板

如下图,由三个视图控制器组成,分别是导航控制器、主视图控制器和祥细页控制器,下面还要具体讲!

3、代理类AppDelegate.h/.m代码介绍

AppDelegate.h头文件更简单,只有三行代码,完全自动长成的。

#import

@interface AppDelegate : UIResponder <</SPAN>UIApplicationDelegate>

@end

这里要说明的是,它继承的是UIResponder类。

在AppDelegate.m实现文件也简单,6个函数也完全自动长成的,不需要用户输入代码。

这里要提一下:以前在方法didFinishLaunchingWithOptions中,通常要创建一个rootViewController控制器等,现在完全省略了,直接返回Yes。如图:

4、主控制器(ViewController.h/m)类介绍

ViewController.h

#import

@interface ViewController : UICollectionViewController

@end

ViewController是继承自UICollectionViewController,它负责显示Collection View的所有内容。

ViewController.m类

通常在这里实现Collection View的dataSource和delegate。下面的代码实现了如下两个方法:

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;

我们先看看它的设计视图,在主控制器中包括一个Cell,一个Libel,一个UIImage View。如下图,

这里我们要重点关注一下它的布局结构。

我们知道:UICollectionViewLayout类是一个抽象基类,通过继承它以生成collection view的layout信息。layout对象的职责就是决定collection view中cells,supplementary views和decoration views的位置,当collection view请求这些信息时,layout对象会提供给collection view。collection view就使用laout对象提供的信息把相关的view显示在屏幕上。

注意:要使用UICollectionViewLayout必须先子类化它。同时子类化时还需要注意的是:layout对象不负责创建views,它只提供layout(布局),view的创建是在collection view的data source中。layout对象定义了view的位置和size等布局属性。

看看上面一大堆知识,说不难都不相信,但苹果在推出Xcode 4.5时,在这方面做了大大的改进,使用自动布局中的Constraints!如下图:

下面是ViewController.m的原代码,由于有上面的介绍,不祥述了,重点地方看看注释,英文注释是官方解释的。

#import "ViewController.h"

#import "DetailViewController.h"

#import "Cell.h"

NSString *kDetailedViewControllerID = @"DetailView";    // view controller storyboard id

NSString *kCellID = @"cellID";        // UICollectionViewCell storyboard id

@implementation ViewController

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;

{

return 32; //返回32张图片

}

//这个函数很关键,不懂怎么用可查查资料!

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath;

{

// we‘re going to use a custom UICollectionViewCell, which will hold an image and its label

//

Cell *cell = [cv dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath];

// make the cell‘s title the actual NSIndexPath value

cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}", (long)indexPath.row, (long)indexPath.section];

// load the image for this cell

NSString *imageToLoad = [NSString stringWithFormat:@"%d.JPG", indexPath.row];

cell.image.image = [UIImage imageNamed:imageToLoad];

return cell;

}

// the user tapped a collection item, load and set the image on the detail view controller

//这个函数是向下一个视图控制器传送的数据!

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

{

if ([[segue identifier] isEqualToString:@"showDetail"])

{

NSIndexPath *selectedIndexPath = [[self.collectionView indexPathsForSelectedItems]objectAtIndex:0];

// load the image, to prevent it from being cached we use ‘initWithContentsOfFile‘

NSString *imageNameToLoad = [NSString stringWithFormat:@"%d_full", selectedIndexPath.row];

NSString *pathToImage = [[NSBundle mainBundle] pathForResource:imageNameToLoadofType:@"JPG"];

UIImage *image = [[UIImage alloc] initWithContentsOfFile:pathToImage];

DetailViewController *detailViewController = [segue destinationViewController];

detailViewController.image = image;

}

}

@end

5、Cell.h/m介绍

在此自定义了一个简单的cell:继承自UICollectionViewCell。

Cell : UICollectionViewCell : UICollectionReusableView : UIView

当item在collection view的可视范围内时,UICollectionViewCell负责显示单个item数据的内容,你可以通过as-is关系来使用它,当然,也可以继承(subclass)自它,以添加一些额外的属性和方法。cell的layout和显示是有collection view管理的,并且cell与layout对象相互对应。

正如前面介绍,这里由于使用了自动布局,cell与layout对象相互对应在故事板中实现,因此,在这里,使用继承(subclass)机制,来给cell添加了一个UIImageView,用来显示一副图片,一个UILabel,用来显示一个标签。代码很简单,看下面的具体实现即可。在.m文件里面使用了一个CustomCellBackground类,来实现对Cell进行了画背景类填充颜色处理。

Cell.h/m

#import

@interface Cell : UICollectionViewCell

@property (strong, nonatomic) IBOutlet UIImageView *image;

@property (strong, nonatomic) IBOutlet UILabel *label;

@end

#import "Cell.h"

#import "CustomCellBackground.h"

@implementation Cell

- (id)initWithCoder:(NSCoder *)aDecoder

{

self = [super initWithCoder:aDecoder];

if (self)

{

// change to our custom selected background view

CustomCellBackground *backgroundView = [[CustomCellBackground alloc]initWithFrame:CGRectZero];

self.selectedBackgroundView = backgroundView;

}

return self;

}

@end

画背景类填充颜色

CustomCellBackground.h

#import

@interface CustomCellBackground : UIView

@end

CustomCellBackground.m

#import "CustomCellBackground.h"

@implementation CustomCellBackground

- (void)drawRect:(CGRect)rect

{

// draw a rounded rect bezier path filled with blue

CGContextRef aRef = UIGraphicsGetCurrentContext();

CGContextSaveGState(aRef);

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:5.0f];

[bezierPath setLineWidth:5.0f];

[[UIColor blackColor] setStroke];

UIColor *fillColor = [UIColor colorWithRed:0.529 green:0.808 blue:0.922 alpha:1]; // color equivalent is #87ceeb

[fillColor setFill];

[bezierPath stroke];

[bezierPath fill];

CGContextRestoreGState(aRef);

}

@end

6、祥细视图控制器类DetailViewController.h/m

这个页面设计非常简单,只有一个UIViewController,上面加了一个UIImage控件,用来显示从前一页面传送过来的图片!

DetailViewController.h

#import

@interface DetailViewController : UIViewController

@property (nonatomic, strong) UIImage *image;

@end

DetailViewController.m

#import "DetailViewController.h"

@interface DetailViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *imageView;

@end

@implementation DetailViewController

- (void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

self.imageView.image = self.image;

}

@end

http://blog.sina.com.cn/s/blog_611acda201014tp8.html

时间: 2024-10-05 10:43:52

UICollectionView官方使用示例代码研究的相关文章

微信小程序「官方示例代码」剖析【下】:运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的--就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码--真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

微信Android SDK示例代码及运行方法

最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一个是微信的开发文档,一个是微信SDK的范例代码.无奈文档小白很难看懂,范例代码又没有详细的解释,导致我折腾了好多天,现在有点眉目了,先记下来. 1.申请应用AppKey 微信的SDK要求应用的包名.签名的MD5.AppID严格对应,所以没有申请的应用是肯定无法使用的.申请了的应用如果这三个对不上,是无法使用的. ·包名,是应用建立时候的名称,你可以在AndroidManifest.xml文件的package项中找到 ·签名

php读取文件内容的多种方法示例代码

分享下php中读取文件内容的几种方法,各有千秋,与大家共勉. 示例代码1: 用file_get_contents 以get方式获取内容<?php$url='http://www.jbxue.com/';$html=file_get_contents($url);//print_r($http_response_header);ec($html);printhr();printarr($http_response_header);printhr();?> 示例代码2: 用fopen打开url,

AppCan移动应用开发平台新增9个超实用插件(内含示例代码)

使用AppCan平台进行移动开发,你所需要具备的是Html5+CSS +JS前端语言基础,此外,Hybrid混合模式应用还需结合原生语言对功能模块进行封装,对于没有原生基础的开发者,如何实现App里包括支付.界面布局.地图导航.IM等功能呢? 这里列出9个AppCan新插件,在使用AppCan平台进行移动开发时非常实用. 1. uexInAppPurchase iOS内部支付IAP插件:封装内部支付IAP相关操作. 方法说明: getProductList 得到产品列表方法 purchase 购

pyspider示例代码二:解析JSON数据

本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下比较经典的示例进行简单讲解,希望对新手有一些帮助. 示例说明: pyspider爬取的内容通过回调的参数response返回,response有多种解析方式.1.response.json用于解析json数据2.response.doc返回的是PyQuery对象3.response.etree返回的

WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件.在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有国人开发的wp-codebox.codecolorer.wp-syntax等,但这些插件不是很久没有更新和最新的wordpress不兼容导致安装不上,就是功能无法满足我的要求.直到我在wordpress官方网站支持文档里看到了我要的效果,以及在文章最后找到了wordpress推荐的代码高亮插件.

pyspider示例代码三:用PyQuery解析页面数据

本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下比较经典的示例进行简单讲解,希望对新手有一些帮助. 示例说明: 本示例主要是PyQuery解析返回的response页面数据.response.doc解析页面数据是pyspider的主要用法,应该熟练掌握基本使用方法.其他返回类型示例见后续文章. pyspider爬取的内容通过回调的参数respon

搭建基于MinGW平台的《OpenGL蓝皮书(OpenGL SuperBibe 5th)》示例代码编译环境

副标题:搭建基于MinGW平台的<OpenGL超级宝典>(OpenGL蓝皮书第5版)GLTools 编译环境.示例代码:Triangle.cpp @ SB5.zip 以下内容以及方法均参考自老外在stackoverflow上的回答,强烈建议看看原文,因为他告诉你解决问题的思路而不只是给你结果opengl-superbible-5th-edition-set-up-problems 1. 还未安装MinGW的,去官网下一个,我这里用的是第三方的安装包 TDM-GCC  32位下载地址 2. 到

微信公众平台开发(二) 微信公众平台示例代码分析

原文地址:http://www.cnblogs.com/mchina/archive/2013/06/07/3120592.html 一.摘要 微信公众平台提供了一个简单的php示例代码,在做进一步开发之前,我们有必要将其详细了解一下. 二.获取代码 微信官网:http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.zip 三.分析代码 完整代码如下: <?php /** * wechat php test */ //define your