CollectionViewControllerではなくてCollectionViewを使ってみる。

意外と情報が少なかったんで自分なりに試行錯誤した記録。
自分用のメモなので間違ってたらスマン。

参考にしたサイト。
でんきゾウの備忘録 • UICollectionViewを使ってみる

Single View Applicationでプロジェクト作成。

スクリーンショット 2016-06-14 10.20.20

ボタンとCollection Viewを設置。

スクリーンショット 2016-06-14 10.24.20

セルの中にimage Viewを設置。

スクリーンショット 2016-06-14 10.27.33

参考サイトにならい、UICollectionViewCellを継承してCollectionCellというクラスを作る。
スクリーンショット 2015-11-22 17.56.34
スクリーンショット 2015-11-22 17.56.42
スクリーンショット 2015-11-22 17.57.30
スクリーンショット 2015-11-22 17.58.43

CollectionCell.h
ヘッダファイルは、

#import <UIKit/UIKit.h>

@interface CollectionCell : UICollectionViewCell
{
    IBOutlet UIImageView *imageView;
}
- (void)setImage:(UIImage *)image;
@end

メソッドファイルは、

#import "CollectionCell.h"

@implementation CollectionCell
-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

-(void)setImage:(UIImage *)image
{
    imageView.image = image;
}
@end

と記述。

ボタンとコレクションビューのプロパティを作成
写真を入れる配列も作成。

#import "ShotViewController.h"
#import "CollectionCell.h"

NSMutableArray *objects;

@interface ShotViewController ()
@property (weak, nonatomic) IBOutlet UIButton *selectButton;
@property (weak, nonatomic) IBOutlet UICollectionView *photoCollectionView;

@end

続いてコレクションビューの主要部分

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    //#warning Incomplete method implementation -- Return the number of sections
    //セクションの数。
    return 1;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    //#warning Incomplete method implementation -- Return the number of items in the section
    //セルの数
    return objects.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    // Configure the cell
    CollectionCell *cell = (CollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell"forIndexPath:indexPath];
    
    UIImageView *imageView = cell.contentView.subviews[0];
    [imageView setImage:[objects objectAtIndex:indexPath.item]];
    
    return cell;
}

この辺はテーブルビューと似てますね。

上記のメソッドを入力したらdetaSourceとdelegateを接続。

スクリーンショット 2016-06-14 11.37.24

スクリーンショット 2016-06-14 11.37.29

セルのidentifierも設定する。

スクリーンショット 2016-06-14 11.36.33

続いて写真を選ぶ行程。
ボタンをアクション接続してそこからカメラロールへ写真を取りに行く。
戻ったら配列に入れてコレクションビューをリロードする。
ピッカーのためのdelegateセット。

#import "ShotViewController.h"
#import "CollectionCell.h"

NSMutableArray *objects;

@interface ShotViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate>
@property (weak, nonatomic) IBOutlet UIButton *selectButton;
@property (weak, nonatomic) IBOutlet UICollectionView *photoCollectionView;

@end

メソッド

#pragma mark 写真を選ぶ
- (IBAction)selectShot:(UIButton *)sender {
    
    [self cameraRollImagePicker];
}

- (void)cameraRollImagePicker
{
    //UIImagePickerのソースの選択。今回はカメラロールから。
    UIImagePickerControllerSourceType sourseType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = sourseType;
    picker.delegate = self;
    [self presentViewController:picker animated:YES completion:NULL];
    
}

-(void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    //infoに選んだ写真が入っているので取得
    UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
    //配列の保存
    [objects addObject:image];
    //戻る処理。
    [self dismissViewControllerAnimated:YES completion:nil];
    //コレクションビューをリロード
    [_photoCollectionView reloadData];
}

これでボタンからカメラロールに行って写真を選んで戻ってコレクションビューに入れると言うのが出来た。

全体的なソースはこんな感じ。

#import "ShotViewController.h"
#import "CollectionCell.h"

NSMutableArray *objects;

@interface ShotViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate>
@property (weak, nonatomic) IBOutlet UIButton *selectButton;
@property (weak, nonatomic) IBOutlet UICollectionView *photoCollectionView;

@end

@implementation ShotViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    objects = [NSMutableArray array];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    //#warning Incomplete method implementation -- Return the number of sections
    //セクションの数。
    return 1;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    //#warning Incomplete method implementation -- Return the number of items in the section
    //セルの数
    return objects.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    
    // Configure the cell
    CollectionCell *cell = (CollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell"forIndexPath:indexPath];
    
    UIImageView *imageView = cell.contentView.subviews[0];
    [imageView setImage:[objects objectAtIndex:indexPath.item]];
    
    return cell;
}

#pragma mark 写真を選ぶ
- (IBAction)selectShot:(UIButton *)sender {
    
    [self cameraRollImagePicker];
}

- (void)cameraRollImagePicker
{
    //UIImagePickerのソースの選択。今回はカメラロールから。
    UIImagePickerControllerSourceType sourseType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = sourseType;
    picker.delegate = self;
    [self presentViewController:picker animated:YES completion:NULL];
    
}

-(void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    //infoに選んだ写真が入っているので取得
    UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
    //配列の保存
    [objects addObject:image];
    //戻る処理。
    [self dismissViewControllerAnimated:YES completion:nil];
    //コレクションビューをリロード
    [_photoCollectionView reloadData];
}


@end

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です