[iOS] iOSでカルーセルを簡単に実装できるiCarousel

xtoneのVersion 1.0.2が公開されました。
このバージョンでアルバム選択部分につかっているiCarouselが超絶便利だったのでメモ。

xtoneのここの部分で使ってます
映像だとわかりにくいんですが、フリックジェスチャーでアルバムアートワークを切替・選択しています。UIScrollViewにdatasourceが実装されたようなイメージで、こういう動きを簡単に実装できる代物です。

iCarousel - https://github.com/nicklockwood/iCarousel

使い方は簡単で、iCarouselDataSourceとiCarouselDelegateのメソッドを実装するだけ。以下は導入方法とサンプルコード。

インストール

cocoapodsでインストール。
Podfile

Podfile

platform :ios, '6.1'
pod 'iCarousel'

podコマンドを実行

pod install
別途QuartzCoreが必要なのでプロジェクトに追加しておく。

ViewController.h

//
//  ViewController.h
//  iCarouselIsFine
//

#import <UIKit/UIKit.h>
#import "iCarousel.h"

@interface ViewController : UIViewController <iCarouselDataSource, iCarouselDelegate>

@property iCarousel *carousel_;
@property NSMutableArray *items_;

@end

ViewController.m

//
//  ViewController.m
//  iCarouselIsFine
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // set scrollable items
    _items_ = [@[] mutableCopy];
    NSDictionary *item;
    int cnt = 1;
    int i = 0;
    while (i < 3) {
        CGFloat j = 0.0f;
        while (j <= 1.0f) {
            UIColor *color;
            if (i == 0) color = [UIColor colorWithRed:j green:0 blue:0 alpha:1];
            if (i == 1) color = [UIColor colorWithRed:0 green:j blue:0 alpha:1];
            if (i == 2) color = [UIColor colorWithRed:0 green:0 blue:j alpha:1];
            item = @{
                     @"text": [NSString stringWithFormat:@"item-%d", cnt],
                     @"color": color
                     };
            [_items_ addObject:item];
            j += 0.05f;
            cnt++;
        }
        i++;
    }

    // set up iCarousel
    _carousel_ = [[iCarousel alloc] initWithFrame:CGRectMake(
                                                             0,
                                                             self.view.frame.size.height / 2 - 50,
                                                             self.view.frame.size.width,
                                                             100
                                                             )];
    [_carousel_ setBackgroundColor:[UIColor clearColor]];
    _carousel_.dataSource = self;
    _carousel_.delegate = self;
//    iCarouselTypeLinear
//    iCarouselTypeRotary
//    iCarouselTypeInvertedRotary
//    iCarouselTypeCylinder
//    iCarouselTypeInvertedCylinder
//    iCarouselTypeWheel
//    iCarouselTypeInvertedWheel
//    iCarouselTypeCoverFlow
//    iCarouselTypeCoverFlow2
//    iCarouselTypeTimeMachine
//    iCarouselTypeInvertedTimeMachine
    _carousel_.type = iCarouselTypeCylinder;
    [self.view addSubview:_carousel_];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark -
#pragma mark iCarousel methods

- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    return [_items_ count];
}

- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view
{
    UILabel *label = nil;

    //create new view if no view is available for recycling
    if (view == nil) {
        //don't do anything specific to the index within
        //this `if (view == nil) {...}` statement because the view will be
        //recycled and used with other index values later
        view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        [label setBackgroundColor:[UIColor clearColor]];
        [label setFont:[UIFont boldSystemFontOfSize:18]];
        [label setTextColor:[UIColor whiteColor]];
        [label setTextAlignment:NSTextAlignmentCenter];
        label.tag = 1;
        [view addSubview:label];
    } else {
        //get a reference to the label in the recycled view
        label = (UILabel *)[view viewWithTag:1];
    }
    [view setBackgroundColor:_items_[index][@"color"]];
    [label setText:_items_[index][@"text"]];
    return view;
}

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing) {
        return value * 1.25f;
    }
    return value;
}

@end

これでこうなる。エフェクトも豊富でいい感じです！