##Storyboard
1.ViewControllerを作成
1) Storyboardに'ViewController'をドラッグ、適宜Segueを設定。
2) ViewControllerクラスファイルを作成。
File->New->Fileを選択。Cocoa Touch Classを選択。Class名をセットし(例 fooVC)、Subclass of 'UIViewController'とする。
3) GUIをViewControllerクラスと紐付ける
Storyboardから1)で作成したViewControllerを選び、Identity Inspecterを選ぶ。Custom Classが現れるので、2)で作成したクラス(fooVC)を選ぶ。
2.CollectionViewをGUIに追加
1) `CollectionView`をViewControllerにドラッグ。
2) CollectionViewを参照するためにfooVCに紐付け
Assistant Editorを選びCollectionViewからOutletを登録
3.Cell にGUI部品を追加
(タグ値で部品を識別するのが簡単)セルにGUI部品(UILableなど)を追加して、attribute inspectorのViewセクションのtagにユニークなtag値をセットしておく。
4.適宜レイアウトを設定
##ViewController
- DataSourceとDelegateを設定する
@interface fooVC : UIViewController <UICollectionViewDataSource,UICollectionViewDelegate>
@end
2.UICollectionViewDataSource
static NSString * const reuseIdentifier = @"XXXCell";
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return xxx;//return the number of sections
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return yyy;//return the number of items
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
//3.でセットしたタグ値からUI部品のオブジェクトを取り出し、データをセットする
UILabel *label = (UILabel *)[cell viewWithTag:10];
label.text=[NSString stringWithFormat:@"%ld-%ld",indexPath.section,indexPath.row];
return cell;
}
3.UICollectionViewDelegate
表示するだけなら特に必要はない。
セル選択を有効にする場合など設定する。「セルを選択する」を参照
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
4.UICollectionViewDelegateFlowLayout
ダイナミックにセルのサイズなどを変えるにはfooVCのinterfaceに<UICollectionViewDelegateFlowLayout>
を追加してからメソッドを追加。
@interface fooVC : UIViewController <UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@end
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGSize sz;
if(indexPath.section==0){
sz=CGSizeMake(40, 35);
}else{
sz=CGSizeMake(40, 50);
}
return sz;
}
セルを選択する
(事前準備)
選択を有効にするため、shouldSelectItemAtIndexPathメソッドでYESをセットしておく。
選択状態のフィードバックは、セル作成時にselectedBGViewをセットすることで、選択セルの背景を変えることで行うのが簡単。
(選択結果取得)
選択セルはindexPathsForSelectedItemsによりNSIndexPathの配列が得られる。特に設定しなければ1つだけ。
//NSIndexPathの配列
NSArray *a=[collectionview indexPathsForSelectedItems];
//cellForItemAtIndexPath
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
//選択状態のフィードバックのため、選択状態の背景色を変える
UIView* backgroundView = [[UIView alloc] initWithFrame:cell.bounds];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;
UIView* selectedBGView = [[UIView alloc] initWithFrame:cell.bounds];
selectedBGView.backgroundColor = [UIColor redColor];
cell.selectedBackgroundView = selectedBGView;
//あとは、前の節を参照
...
}
#pragma mark <UICollectionViewDelegate>
// Uncomment this method to specify if the specified item should be selected
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
//選択時に呼ばれる
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
...
}
//選択セルを調べるには
// NSArray *asel=[_colvXXX indexPathsForSelectedItems];