Just a Computer Graphics Studio & My Life

雖然可以客製化TableViewCell (Customize TableViewCell)來完成,但是客製化CollectionViewCell (Customize CollectionViewCell)能讓我們更簡單地實作,而且landscape和portrait這兩種界面的轉換它都幫我們處理好,接著只要撰寫幾行程式碼,就可以做出像內建相簿那樣的格子瀑布流喔!

collection view portrait

portrait的樣子。

一直看到其它教學都是使用storyboard來實作,但是我就是想用彈性高的xib來刻版,總算讓我找到方法,之前就是搞不懂而放棄使用><;原來只是改變所使用的API,而collection view cell和table view cell客製化有些為差異呢!

在專案中新增檔案,有兩個步驟:

  1. iOS中Cocoa Touch的Objective-C class
  2. iOS中User Interface的Empty

兩者命同樣的名稱,結束後產生.h、.m、.xib三個檔案。如HTCollectionCell。

collection view xcode

/**
 Theme: Customize CollectionViewCell
 IDE: Xcode 5
 Language: Objective C
 Date: 103/06/06
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */

//HTCollectionViewController.h
#import <UIKit/UIKit.h>

@interface HTCollectionViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
{
    IBOutlet UICollectionView *displayCollectionView;
    NSArray *itemArray;
}
@end

//HTCollectionViewController.m
#import "HTCollectionViewController.h"
#import "HTCollectionCell.h"

@interface HTCollectionViewController ()

@end

@implementation HTCollectionViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        itemArray = @[@"Happy1", @"Happy2", @"Happy3", @"Happy4", @"Happy5"];
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
//    [displayCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"DefaultCell"];
    [displayCollectionView registerNib:[UINib nibWithNibName:@"HTCollectionCell" bundle:nil] forCellWithReuseIdentifier:@"HappyCell"];
}

#pragma mark - UICollectionViewDataSource
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [itemArray count];
}

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"DefaultCell" forIndexPath:indexPath];
    HTCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"HappyCell" forIndexPath:indexPath];
    [cell.button setTitle:itemArray[indexPath.row] forState:UIControlStateNormal];
//    cell.backgroundColor = [UIColor whiteColor];
    return cell;
}

#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    // TODO: Select Item
    NSLog(@"Select indexPath.row: %i", indexPath.row);
}
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
    // TODO: Deselect item
    NSLog(@"Deselect indexPath.row: %i", indexPath.row);
}

#pragma mark – UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGSize size = CGSizeMake(110, 110);
    return size;
}

- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(20, 30, 20, 30);
}
@end

//HTCollectionCell.h
#import <UIKit/UIKit.h>

@interface HTCollectionCell : UICollectionViewCell
@property (nonatomic, retain) IBOutlet UIButton *button;

@end
//HTCollectionCell.m
//不用寫什麼~

註解的地方表示不用客製化collection view cell的做法,反註解可以測試看看。

HTCollectionViewController.xib:

必須拉UICollectionView的元件喔!並拉好Outlets的dataSourcedelegate

collection view xib

HTcollectionCell.xib:

我有拉個UIButton~並拉好Outlets。

collection view cell xib

cell記得要設定兩個地方:

collection view cell xib custom class

collection view cell xib outlets

編譯執行在實機上的結果:

collection view landscape

landscape的樣子,會自動排列呢!

從此以後,不需用table view cell寫許多處理的格子特性的程式碼!

參考:UICollectionVIew without using the storyboard?、GitHub –TestCollectionViewWithXIBBeginning UICollectionView In iOS 6: Part 1/2Creating Custom Collection View Cells in iOS7

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: