使用Storyboard打造UICollectionView

1. 建立一個不含xib的h&m檔案
OfficeViewController.h、OfficeViewController.m


2. 建立一個storyboard
OfficeStoryboard.storyboard

3. 從object library拉View Controller進去StoryBoard


4. 承上選擇View，並從object library拉Collection View Controller進去，接著修改Collection View的Background為White Color

5. 選擇Collection View Cell，將Size由Default改為Custom並設定高度與寬度，接著設定Idenrifier為"officeCell"(名稱可自行決定)

6. 依據需求拉一些需要的控件至Cell裡面，本範例放了UIImageView和Label各一(且分別設定Attributes inspector的Tag為101與100)

7. 設定ViewController的CustomClass為第1步驟時新增的OfficeViewController

8. 選擇Collection View，設定outlets如下圖

9. 在h檔增加用來存放資料的NSMutableArray，並且宣告將實作的protocol
@interface OfficeViewController : UIViewController
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView; //這是第8步驟用IBOutlet設定connection所產生的
@property (nonatomic,strong) NSMutableArray *officeItems;
@end


10. 實作m檔
實作方法如同前篇文章如何不使用Storyboard打造UICollectionView


11. 設定StoryBoard的'Storyboard ID'(網路上很多人會說Tag...)
本設定是為了達到這個效果：從起始頁面MainViewController跳到OfficeViewController，且畫面要使用剛設計的OfficeStoryboard.storyboards

設定完之後，在MainViewController.m加入下列程式，即可前往透過Storyboard打造的OfficeViewController
UIStoryboard *sbOffice = [UIStoryboard storyboardWithName:@"OfficeStoryboard" bundle:nil];
OfficeViewController *viewController = [sbOffice instantiateViewControllerWithIdentifier:@"OfficeSBIdentifier"];
[self.navigationController pushViewController:viewController animated:YES];


參考資料
UICollectionView Tutorial Part 1: Getting Started
What's the difference between instantiateInitialViewController and instantiateViewControllerWithIdentifier:?