読者です 読者をやめる 読者になる 読者になる

ほげほげ

プログラミング、英会話、ヨガ、料理などの備忘録など。

UICollectionViewFlowLayout のサブクラス

UICollectionViewは便利なんですが、基本的にUICollectionViewFlowLayoutをそのまま使うと、
一行一行に分割されてレイアウトされていく。
左に大きい見出し画像、その右半分に4枚の小さめの画像を配置みたいなことがやりたかったのだが、
UICollectionViewFlowLayout をどう使えばいいのか、わからなかった。

結局サブクラスを作って対応出来そうだったけど、tableViewほど単純でなかったので、メモ。

// FlowLayoutSub.m
-(void)prepareLayout {
    NSLog(@"prepareLayout") ;
    // レイアウト調整に必要な準備はここで計算してキャッシュしておくのがよい
}

// この関数の実装で表示されるビューとその、frameが決まる
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSLog(@"layoutAttributesForElementsInRect") ;
    // 指定されたrect内に収まるビューのlayoutAttributesをNSArrayで返却する
    // 以下3つだけの例

    // 戻り値準備
    NSMutableArray * layoutAttributes = [[NSMutableArray alloc] init];

    // 1つ目
    UICollectionViewLayoutAttributes * itemAttributes =
            [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
    itemAttributes.frame = CGRectMake(0, 0, 100, 100) ;
    [layoutAttributes addObject:itemAttributes];

    // 2つ目
    itemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:1 inSection:0]];
    itemAttributes.frame = CGRectMake(200 , 50, 100, 100) ;
    [layoutAttributes addObject:itemAttributes];

    // 3つ目
    itemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:2 inSection:0]];
    itemAttributes.frame = CGRectMake(100 , 200, 100, 100) ;
    [layoutAttributes addObject:itemAttributes];

    return layoutAttributes;
}

-(CGSize)sizeForItemViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath*)indexPath; {
    // indexPathに応じたビューのサイズを返却する
    // 各indexPathごとに変更してレイアウトに変化をつけることができる
    if(indexPath.row == 0 ){
        return CGSizeMake(100, 100) ;
    } else if (indexPath.row == 1){
        return CGSizeMake(100, 100) ;
    } else if (indexPath.row == 2){
        return CGSizeMake(100, 100) ;
    }
    return CGSizeMake(100, 100) ;
}