如何不使用Storyboard打造UICollectionView

網路、工具書大多使用Storyboard打造，這篇記錄一下使用獨立xib檔案作CollectionCell，且完全不用Storyboard的方法～就像是UITableView

1. 建立呈現CollectionView的檔案
File → New → File → Source → Cocoa Touch Class → 建立一個繼承UIViewController的Class
建立完成應該要有.h、.m、.xib三個檔案


2. h檔
修改h檔如下
@interface MyViewController : UIViewController<UICollectionViewDelegate, UICollectionViewDataSource>
@end

並新增一個property等下用來放資料
@property (nonatomic,strong) NSMutableArray *dataItems;


3. xib檔
拖曳一個Collection View至步驟1的xib檔案，並設定layout屬性，例如背景色、大小。
接著用工具拖曳的方式Insert Outlet至h檔，並替這個IBOutlet取名為collectionView
h檔會因此自動產生如下連結
@property (nonatomic, strong) IBOutlet UICollectionView *collectionView;

然後最重要的...設定dataSource和delegate！！
如果不透過畫面設定，那就記得在m檔寫好
[self.collectionView setDataSource:self];
[self.collectionView setDelegate:self];


4. m檔
開始撰寫implement UICollectionViewDelegate, UICollectionViewDataSource必須要實作的method

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
 
    // 取資料
    if(self.dataItems == nil) {    // 初始化data array
        self.dataItems = [[NSMutableArray alloc] init];
    }
    [self getMyData]; // 自訂method, 用來向API取資料
 
    // 註冊給CollectionCell用的xib檔
    UINib *cellNib = [UINib nibWithNibName:@"SaasCell" bundle:nil];
    [self.collectionView registerNib:cellNib forCellWithReuseIdentifier:@"saasCell"];
}

# pragma mark-UICollectionViewDataSource
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {  
    return [self.dataItems count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {  
    NSDictionary *saasDict = [self.dataItems  objectAtIndex:indexPath.row];
 
    static NSString *cellIdentifier = @"saasCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    
    NSURL *avatarURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@",[saasDict objectForKey:@"SaaSPhoto"]]];
    UIImageView *photoImage = (UIImageView*) [cell viewWithTag:101];
    [photoImage setImageWithURL:avatarURL placeholderImage:[UIImage imageNamed:@"img_user.png"]];    
    UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];
    [titleLabel setText:[saasDict objectForKey:@"SolutionName"]];
    return cell;
}


5. 新增xib檔，主要用來設計CollectionCell
File → New → File → User Interface → View，xib的樣貌如下
這張圖也說明了第4點的黃色highlight為何要如撰寫

參考資料 A Simple UICollectionView Tutorial