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
UICollectionView官方使用示例代码研究的更多相关文章
- [转载]iOS6新特征:UICollectionView官方使用示例代码研究
原文地址:iOS6新特征:UICollectionView官方使用示例代码研究作者:浪友dans 注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇总 这个链接可以学习到UIColl ...
- Xamarin官方示例代码无法部署,提示已跳过部署解决方法
最近利用Visual Studio 2017学习Android开发.主要是通过Xamarin官方的文档进行的.官方的入门指导提供了很多的示例代码.但是下载之后,调试运行的时候,总是无法部署到虚拟机上. ...
- redis 学习笔记(2)-client端示例代码
redis提供了几乎所有主流语言的client,java中主要使用二种:Jedis与Redisson 一.Jedis的使用 <dependency> <groupId>redi ...
- C/C++ 开源库及示例代码
C/C++ 开源库及示例代码 Table of Contents 说明 1 综合性的库 2 数据结构 & 算法 2.1 容器 2.1.1 标准容器 2.1.2 Lockfree 的容器 2.1 ...
- iOS App集成Apple Pay教程(附示例代码)
苹果在本周一发布了iOS 8.1版本,并正式开放了Apple Pay支付系统.Apple Pay是一个基于NFC的支付系统,不久将被数以万计的线下零售商店予以支持.即便这项科技并不是彻底的突破性进展, ...
- 【Android应用开发】 Universal Image Loader ( 使用简介 | 示例代码解析 )
作者 : 韩曙亮 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/50824912 相关地址介绍 : -- Universal I ...
- 简单的PHP上传图片和删除图片示例代码
分享一例简单的PHP上传图片和删除图片示例代码,很简单,适合初学的朋友参考,用来研究php上传图片还是不错的. 1.php上传图片: <?php if (!empty($_FILES[" ...
- IDEA插件(Android Studio插件)开发示例代码及bug解决
IDEA插件(Android Studio插件)开发示例代码及bug解决 代码在actionPerformed方法中,有个AnActionEvent e 插件开发就是要求我们复写上述的这个方法即可,在 ...
- pyspider示例代码:解析JSON数据
pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下比较经典的示例进行简单讲解,希望对新手有一些帮助. 示例说明: py ...
随机推荐
- Eclipse解决乱码问题
使用Eclipse的时候发现有些格式的文件会乱码单个文件设置了没问题,但是在项目上设置却不起作用. 解决方法如下: Windows -> Preferences -> General -& ...
- JS的scrollIntoView
scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶 ...
- springboot统一异常处理及返回数据的处理
一.返回code数据的处理 代码: Result.java /** * http请求返回的最外层对象 * Created by 廖师兄 * 2017-01-21 13:34 */ public cla ...
- python脚本7_打印九九乘法表
#打印九九乘法表 for i in range(1,10): s = "" for j in range(1,i+1): s += str(j) + '*' + str(i) + ...
- mui 禁止透明背景点击关闭弹窗遮罩
//禁止关闭遮罩 window.addEventListener('tap', function(e) { e.target.className == 'mui-backdrop mui-active ...
- torch Tensor学习:切片操作
torch Tensor学习:切片操作 torch Tensor Slice 一直使用的是matlab处理矩阵,想从matlab转到lua+torch上,然而在matrix处理上遇到了好多类型不匹配问 ...
- ML之多元线性回归
转自:http://www.cnblogs.com/zgw21cn/archive/2009/01/07/1361287.html 1.多元线性回归模型 假定被解释变量与多个解释变量之间具有线性关系, ...
- 已经安装了node和npm,输入node -v 未找到命令
昨天虚拟机上安装了nvm.node.npm,今天打开输入node -v,就显示未找到命令 输入nvm --version 发现还是有nvm版本的,不然都要以为刚配好的虚拟机又要重新安装... 再输入 ...
- 为Spring Cloud Config Server配置远程git仓库
简介 虽然在开发过程,在本地创建git仓库操作起来非常方便,但是在实际项目应用中,多个项目组需要通过一个中心服务器来共享配置,所以Spring Cloud配置中心支持远程git仓库,以使分散的项目组更 ...
- echarts 折线图配置
html内容: <div id="user_num_chart" style="width: 582px;height:250px;"></d ...