IOS中CollectionViewController的使用

   IOS中CollectionViewController的使用

                                                                                                                                                     2013-11-26        10:46:25

   在公司实习，公司有一个iOS的项目，所以开始学习iOS，学了半个月了，对iOS有了一个基本的了解。对iOS的学习我还是准备从界面的学习入手，一是因为UI是软件比较直观的功能显示，二是因为公司的这个iOS项目中涉及到的界面处置会比较多。

  了解了一周的IOS界面设计，对与iOS的界面设计总体有了一个了解。相比较android中的界面设计，iOS更加规范，实现起来也是更加容易的。现在跟大家分享一下我在学习过程中遇到的关于CollectionViewController的使用。

  CollectionViewController的简介：IOS中一个存放图片的控件，通过将一组图片加载，可以形成图片墙。CollectionViewController中存放元素的单元称为Cell，在Cell中开发者可以任意的存放你想放的东西。

  在以下项目中，我准备通过用自定义的cell来加载图片，并且为cell设置背景色，当点击一个Cell后会跳转到相应的全屏图。

  首先我们实现在CollectionViewController加载自定义Cell功能并且为cell设置背景色：

     1、建立一个项目，用single view模版；

     2、找到storyboard（用来进行IB设置的），将原来的View Controllerview删除，拖入一个Navigation Controller（涉及集合控件的导航），此时Navigation Controller会自带一个Table View Controller，我门将这个Table View Controller删除，拖入一个Collection View Controller，并将Navigation Controller与Collection View Controller建立联系（右键点击Navigation Controller拖拽到Collection View Controller，选择root View Controller）；

     3、为CollectionViewController建立一个自定义的Cell，首先给cell设置identifier为“cellID”（在后面的身份认证中要用到的），然后调整cell的大小，并往其中拖入两个子控件，Label、Imageview，再创建一个Objective－C类（Cell）来与cell连接，连接方式是在storyboard选中cell然后在custom class中选中刚刚建立的Cell类，Cell类必须继承自UICollectionViewCell，最后还要将加入的cell的两个子控件与Cell类建立联系（在storyboard选中相应的控件，点击右键拖拽到Cell类中相应的地方，此时会自动生成代码并建立连接），在这里我们将两个控件设置为Cell类的两个属性，又由于在其他的类中要调用这两个属性，所以定义在Cell.h文件中，若是私有属性可定义到Cell.m中。Cell类代码如下：

Cell.h

#import <UIKit/UIKit.h>

@interface Cell : UICollectionViewCell

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

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

@end

Cell.m

#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

     4、在上面的Cell.m中我们涉及到了CustomCellBackground这个类，这个类是用来设置Cell的背景颜色的，其继承自UIView，当用户点击任意一个Cell来时，会出现相应的背景色。具体代码如下：

CustomCellBackground.h

#import <UIKit/UIKit.h>

@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

     5、最后就是配置Collection View Controller了，也就是说将以上的操作都要在Collection View Controller这个控件上去实现，首先将Collection View Controller与View Controller类（继承自UICollectionViewController）建立联系，然后通过代码从项目的文件中找到相应资源，并加载到cell中的相应位置，ViewController类中相应代码如下：

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UICollectionViewController

@end

ViewController.m

NSString *kCellID = @"cellID";

@implementation ViewController

//纪录加载图片的数量
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
{
    return 32;
}

//给collectionview中的每个cell添加元素
-(UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //通过身份（identifier）来重复构建特定cell
    Cell *cell = [cv dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath];
    //通过索引给label赋值
    cell.label.text = [NSString stringWithFormat:@"{%ld},%ld",(long)indexPath.row,(long)indexPath.section];
    //给cell的image赋图片
    NSString *imageToLoad = [NSString stringWithFormat:@"%d.JPG",indexPath.row];
    cell.image.image = [UIImage imageNamed:imageToLoad];//通过图片名称获得图片
    return  cell;
}

     5、此时运行项目就可以得到如下效果，当点击每个cell时会出现相应的背景色：

   

 

      然后我们设计点击一个Cell后会跳转到相应的全屏图功能：

     1、在storyboard中添加一个View Controller，命名为Detail View Controller在Detail View Controller上放置一个Imageview，并将Imageview的模式设置为Aspect Fit；

     2、将Collection View Controller与Detail View Controller进行联系，在Cell控件上点击右键拖拽到Detail View Controller，选择push；

     3、为Detail View Controller建立相应的Controller类——DetailViewController，该类继承自UIViewController，然后将DetailViewController类与Detail View Controller进行连接，连接方式是在storyboard选中Detail View Controller然后在custom class中选中DetailViewController类，再将加入的Detail View Controller的子控件ImageView与DetailViewController类建立联系（在storyboard选中相应的控件，点击右键拖拽到DetailViewController类中相应的地方，此时会自动生成代码并建立连接），在这里我们将ImageView控件设置为DetailViewController类的一个私有属性，定义在DetailViewController.m文件中，在DetailViewController.h中还要定义一个UIImage属性，用来与其他类进行交互。DetailViewController类的具体代码如下：

DetailViewController.h

#import <UIKit/UIKit.h>

@interface DetailViewController : UIViewController

//将image定义为公有成员，作为一个装载图片资源的容器，可以从其他地方获得图片资源
@property (nonatomic,strong) UIImage *image;

@end

DetailViewController.m

#import "DetailViewController.h"

@interface DetailViewController ()

//将imageview定义为私有成员
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation DetailViewController

//将相应图片加载
-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    self.imageView.image = self.image;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

@end

     4、在ViewController中设定相应的方法，使得当点击collectionview中的cell时进入全图界面，方法的代码如下：

//点击collectionview中的cell时进入全图界面
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if([[segue identifier] isEqualToString:@"showDetail"])//先进行身份的识别
    {
        NSIndexPath *selectedIndexPath = [[self.collectionView indexPathsForSelectedItems] objectAtIndex:0];//建立并初始化一个索引
        //获得图片资源的路径
        NSString *imageNameToLoad = [NSString stringWithFormat:@"%d_full",selectedIndexPath.row];
        NSString *pathToLoad = [[NSBundle mainBundle] pathForResource:imageNameToLoad ofType:@"JPG"];
        UIImage *image = [[UIImage alloc]initWithContentsOfFile:pathToLoad];//从特殊的地方返回图片信息
        
        //将图片信息传递给detailViewcontroller
        DetailViewController *detailviewcontroller = [segue destinationViewController];
        detailviewcontroller.image = image;
    }
}

     5、运行项目的效果如下图所示：

 

 

    以上就是我在学习iOS界面设计之CollectionViewController的总结。