CollectionView

[转载]iOS6新特征：UICollectionView官方使用示例代码研究

(2012-10-30 14:45:47)

转载▼

标签：

转载

分类： IOS开发小计

原文地址：iOS6新特征：UICollectionView官方使用示例代码研究作者：浪友dans

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

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

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

一、获取官方示例代码

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

下载后，解压将CollectionView目录拖放进一个目录下（如你的文稿目录）

二、加载示例代码

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

项目打开并加载后象是这样的，如图：

从工程项目属性中可看出，官方原代码设计已经同时支持Retina3.5-inch(640*960)屏和Retina4-inch(640*1136pixels)屏，如图：

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

三、运行效果

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

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

四、CollectionView的整体构成元素

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

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

Cells(单元格)

Supplementary Views（补充的view，相当于TableView的页眉和页脚）

DecorationViews（装饰View，用于装饰整个CollectionView的）

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

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(intargc, char *argv[])

{

   @autoreleasepool{

       returnUIApplicationMain(argc, argv,nil, NSStringFromClass([AppDelegateclass]));

   }

}

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 *)viewnumberOfItemsInSection:(NSInteger)section;

-(UICollectionViewCell *)collectionView:(UICollectionView *)cvcellForItemAtIndexPath:(NSIndexPath *)indexPath;

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

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

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

注意：要使用UICollectionViewLayout必须先子类化它。同时子类化时还需要注意的是：layout对象不负责创建views，它只提供layout（布局），view的创建是在collection view的datasource中。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 storyboardid 

@implementation ViewController 

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

{

   return32; //返回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:kCellIDforIndexPath:indexPath];

   

   // make the cell's title the actual NSIndexPathvalue

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

   

   // load the image for this cell

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

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

   

   returncell;

}

 

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

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

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

{

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

   {

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

       

       // load the image, to prevent it from being cached weuse 'initWithContentsOfFile'

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

       NSString*pathToImage = [[NSBundlemainBundle] pathForResource:imageNameToLoad ofType:@"JPG"];

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

       

       DetailViewController*detailViewController = [segue destinationViewController];

       detailViewController.image= image;

   }

}

 

@end

 

5、Cell.h/m介绍

 

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

Cell :UICollectionViewCell : UICollectionReusableView : UIView

当item在collectionview的可视范围内时，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 backgroundview

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

       self.selectedBackgroundView= backgroundView;

   }

   returnself;

}

 

@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 withblue

   CGContextRefaRef = UIGraphicsGetCurrentContext();

   CGContextSaveGState(aRef);

   UIBezierPath*bezierPath = [UIBezierPathbezierPathWithRoundedRect:rectcornerRadius:5.0f];

   [bezierPath setLineWidth:5.0f];

   [[UIColorblackColor] setStroke];

   

   UIColor*fillColor = [UIColorcolorWithRed:0.529green:0.808blue:0.922alpha: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

{

   [superviewWillAppear:animated];

   self.imageView.image= self.image;

}

 

@end