[轉載]iOS6新特徵：UICollectionView官方使用示例代碼研究

原文地址：iOS6新特徵：UICollectionView官方使用示例代碼研究 做者：浪友dans

注：這裏是iOS6新特徵彙總貼鏈接 iOS6新特徵：參考資料和示例匯總  

這個鏈接能夠學習到UICollectionView的相關介紹：iOS6新特徵：UICollectionView介紹 

因爲UICollectionView功能比較強大，在此，咱們深刻學習一下UICollectionView的官方使用示例代碼，順與你們分享一下心得。 

1、獲取官方示例代碼

官方使用示例代碼下載地址：以下圖所示

下載後，解壓將CollectionView目錄拖放進一個目錄下（如你的文稿目錄）

2、加載示例代碼

啓動Xcode 這裏我用的是Xcode 4.5(4G182)版本。選擇「Open Other…」打開CollectionView工程項目。

項目打開並加載後象是這樣的，如圖：

從工程項目屬性中可看出，官方原代碼設計已經同時支持Retina 3.5-inch(640*960)屏和Retina 4-inch(640*1136pixels)屏，如圖：

官方原代碼設計還支持Retina Display 2048＊1096高清設計，只惋惜本人電腦是黑蘋果，電腦硬件不支持！因此顯示「！」號，等發同發財了購買一臺白蘋果再試試。

3、運行效果

下面先看看官方原代碼的實際運行的效果圖，使用iPhone6.0模擬器測試運行程序，剛剛啓動時，已經默認加載了6個cell。經過這樣的一個Demo，咱們能夠看出，使用UICollectionView能夠很方便的製做出照片瀏覽等應用。

點擊其中任一張圖片，導航進入下一祥細視圖：

4、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，用來供顯示的數據圖片。這裏咱們能夠要注意一下它的命名，主要是爲了方便下面的程序設計。如圖：

5、關鍵文件代碼

關鍵文件代碼的目錄以下圖所示：

從上圖，能夠看到這個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、故事板

以下圖，由三個視圖控制器組成，分別是導航控制器、主視圖控制器和祥細頁控制器，下面還要具體講！

 

三、代理類AppDelegate.h/.m代碼介紹

AppDelegate.h頭文件更簡單，只有三行代碼，徹底自動長成的。

#import  

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

@end

這裏要說明的是，它繼承的是UIResponder類。

 

在AppDelegate.m實現文件也簡單，6個函數也徹底自動長成的，不須要用戶輸入代碼。

這裏要提一下：之前在方法didFinishLaunchingWithOptions中，一般要建立一個rootViewController控制器等，如今徹底省略了，直接返回Yes。如圖：

  

四、主控制器（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: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

 

五、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: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

六、祥細視圖控制器類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