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

Javaな日々

NO JAVA, NO LIFE.

UICollectionViewを実装する

iOS

f:id:yksris:20121108205621p:image:h320

iOS 6から追加されたUICollectionViewという,グリッド表示の実装を容易にしたものを使ってみようと思います.iOS 6から追加されたものなので,一般向けのアプリの中で使えるようになるのはもう少し先のことでしょうかね.

今回はアプリを開いて最初に出てくるViewControllerをUICollectionViewControllerとするアプリを例として作ってみます.

環境

実装

AppDelegate.h

実装側でUICollectionViewControllerを初期画面としてセットするために,プロパティの“viewController”のクラスを“ViewController”からより汎用性の高い“UIViewController”に変更しておきます.

#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) UIViewController *viewController;

@end
AppDelegate.m

UICollectionViewControllerのレイアウトを作って初期化時に渡してあげます.
(今回は“UICollectionViewFlowLayout”を利用しました)

#import "AppDelegate.h"

#import "CollectionViewController.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    // Override point for customization after application launch.
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    // セルのサイズ
    layout.itemSize = CGSizeMake(96, 72);
    // セクションごとのヘッダーのサイズ
    layout.headerReferenceSize = CGSizeMake(0, 0);
    // セクションごとのフッターのサイズ
    layout.footerReferenceSize = CGSizeMake(0, 0);
    // 行ごとのスペースの最小値
    layout.minimumLineSpacing = 8.0;
    // アイテムごとのスペースの最小値
    layout.minimumInteritemSpacing = 8.0;
    // セクションの外枠のスペース
    layout.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8);
    
    UIViewController *collectionViewController = [[CollectionViewController alloc] initWithCollectionViewLayout:layout];
    
    // 初期画面としてcollectionViewControllerをセット
    self.viewController = collectionViewController;
    
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}

- (void)applicationWillResignActive:(UIApplication *)application {}
- (void)applicationDidEnterBackground:(UIApplication *)application {}
- (void)applicationWillEnterForeground:(UIApplication *)application {}
- (void)applicationDidBecomeActive:(UIApplication *)application {}
- (void)applicationWillTerminate:(UIApplication *)application {}

@end
CollectionViewController.h

表示するセルのアイテムを配列として宣言しておきます.
多次元配列として利用し,行をセクション数,列をアイテム数として後ほどカウントします.

#import <UIKit/UIKit.h>

@interface CollectionViewController : UICollectionViewController

@property (strong, nonatomic) NSArray *array;

@end
CollectionViewController.m
#import "CollectionViewController.h"

@interface CollectionViewController ()

@end

@implementation CollectionViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 画像を読み込んで配列に格納
    NSMutableArray *photo1 = [NSMutableArray array];
    
    for (int i = 1; i <= 5; i++) {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"img0%d.jpg", i]];
        [photo1 addObject:img];
    }
    
    NSMutableArray *photo2 = [NSMutableArray array];
    
    for (int i = 1; i <= 3; i++) {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"img1%d.jpg", i]];
        [photo2 addObject:img];
    }
    
    self.array = @[photo1, photo2];
    
    // collectionViewにcellのクラスを登録
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CollectionViewCell"];
}

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

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    // セクション数をカウント
    return [self.array count];
}

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
    // セクション内のアイテム数をカウント
    return [[self.array objectAtIndex:section] count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionViewCell" forIndexPath:indexPath];
    
    UIImageView *imgView = [[UIImageView alloc] initWithImage:[[self.array objectAtIndex:indexPath.section] objectAtIndex:indexPath.item]];
    imgView.frame = CGRectMake(0.0, 0.0, 96.0, 72.0);
    
    // cellにimgViewをセット
    [cell addSubview:imgView];
    
    return cell;
}


@end