見出し画像

【Objective-C】UICollectionViewをUIViewControllerで実装する方法(xibあり)

こういう人に向けて発信しています。
・UIViewControllerクラスでDelegateを採用してコレクションビューを使いたい人
・UICollectionViewの余白なども意識して描画したい人
・Objective−c 初心者

おことわり

普段はxib/コーディング、どっちでも行ってますが、
今回はxibだけで紹介させて下さい。
xibでObjectを置けばレイアウトの設定などは不要ですが、
コードで書くと、Layoutなどきっちり書かないといけなくて
工数が増えそうなので。

実装イメージ

使用するクラスについて

・ViewController. h / .m /.xib
xibファイルはスクリーンショット撮ったので後ほど貼ります。

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>{
}

//XIBファイルのオブジェクトとアウトレット接続してます。
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    _collectionView.bounces =NO;
    _collectionView.backgroundColor = [UIColor grayColor];
    [self collectionBrank];
    
    // Do any additional setup after loading the view, typically from a nib.
     [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
}

- (void)collectionBrank{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

    //Storyboardで設定してても改めて設定しないとnilでデフォルトの垂直が反映されちゃうと思います。
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    _collectionView.collectionViewLayout = layout;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 30;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellName = NSStringFromClass([UICollectionViewCell class]);
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellName forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout*)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(100, 100);
}

@end

ViewController.xib

重要なのは、
(1)←・↓・→は隙間0で反映
(2)高さは120取っている(セルサイズ100,上下余白10ずつ)

余談:UIScrollViewとどっちの方が良いか。

個人的にはUICollectionViewは必要な横幅など自動で計算して
ContentSize生成してくれるの素晴らしいなぁとは思います。

セルなどもカスタムセル採用して、
仕様変更などに耐えられるのを考えたら、
コレクションビューに采配が上がるかな。



いいなと思ったら応援しよう!