4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UICollectionView作成メモ

Last updated at Posted at 2016-05-04

##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

  1. DataSourceとDelegateを設定する
fooVC.h
@interface fooVC : UIViewController <UICollectionViewDataSource,UICollectionViewDelegate>
@end

2.UICollectionViewDataSource

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>を追加してからメソッドを追加。

fooVC.h
@interface fooVC : UIViewController <UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@end
UICollectionViewDelegateFlowLayout
-(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];
fooVC.m
//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];
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?