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

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

接可以学UICollectionView的相关介iOS6新特征:UICollectionView 

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

一、获取官方示例代码

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

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

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

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

二、加载示例代码

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

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

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

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

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

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

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

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

三、运行效果

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

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

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

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

四、Collection View的整体构成元素

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

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

Cells(单元格)

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

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

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

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

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

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

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

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

五、关键文件代码

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

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

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

1、主函(main.m)代码

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

#import  

#import "AppDelegate.h"

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

{

    @autoreleasepool {

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

    }

}

2、故事板

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

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

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

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

#import  

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

@end

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

 

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

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

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

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

ViewController.h

#import  

@interface ViewController : UICollectionViewController

@end 

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

ViewController.m

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

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

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

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

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

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

知道:UICollectionViewLayout是一个抽象基,通过继承它以生成collection viewlayout信息。layout象的职责就是决定collection viewcellssupplementary viewsdecoration views的位置,当collection view些信息layout象会提供collection viewcollection view就使用laout象提供的信息把相关的view示在屏幕上。

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

看看上面一大堆知都不相信,但苹果在推出Xcode 4.5,在方面做了大大的改,使用自布局中的Constraints!如下

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

下面是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:kCellIDforIndexPath: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:imageNameToLoad ofType:@"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

itemcollection view的可UICollectionViewCell负责显item数据的内容,你可以通as-is关系来使用它,当然,也可以承(subclass)自它,以添加一些外的属性和方法。celllayout示是有collection view管理的,并且celllayout象相互对应

正如前面介里由于使用了自布局,celllayout象相互对应在故事板中实现,因此,里,使用承(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:rectcornerRadius: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控件,用来显示从前一页面传送过来的图片!

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

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

 

 

 

posted @ 2013-07-18 14:53  子福当自强  阅读(...)  评论(... 编辑 收藏
悟道2012