[iOS] StoryboardとUICollectionViewを使う

2014/07/3

こんにちは。きんくまです。

iOSでUIを作るときに、いままでコードで全部書いてきて、いっさいInterfaceBuilderを使っていませんでした。
ただ、もうUIのコードを見るのが大変になってきてしまって、困ったなーという状態です。
なので、ここらでIBをやってみようと思いました。

ちょっと前にこの本を買いました。

中身はUIKitをどうやって扱うかというものです。細かいコンポーネント（UINavigationやUIButton, UISwitch）は特別ページを割いていなくて、StoryboardをInterfaceBuilder使ってやる方法とか、AutoLayout、UIAppearanceなどが載っていました。

あとは、最後の方にUITableViewや、UICollectionView、コンテナビュー関連があります。

で、Sotryboardを使った感想としては、「これは便利だ!」ということでした。（今更、、）

なんていうかコードで全部uI作っていると、常に頭が画面をイメージしながら作らないといけなくてしんどい。その点IBは全てを目で見ながらポチポチクリックしていけばできる。また、AutoLayoutも視覚的に設定できるし、それだと3.5インチ、4インチ対応も割と楽にできる。
あと、イベントも毎回addTargetしなくていいし、楽だなー。と思いました。

GUIはなるべくレイアウトツール使った方がいいですね。

あー、でもhtmlはどうなんだろ？あれは、レイアウト用の仕組みがhtml,cssときちんと分離できているから、いまさらGUIじゃなくてもいいのかな。
GUIで書いている人って、いまどのくらいいるんだろ？　自分の場合は、レイアウトの調整は、Chromeのインスペクタで値を調整して、いい感じの値になったら、コードにコピペっていうふうにしてるんだけど。

で、作ったものです。gifアニメのスクリーンキャプチャ初めて作った。

color_chart2

UICollectionViewにカラーチャートの色を入れて、セルをタップするとその色の情報ページに遷移するというものです。

Storyboradはこんな感じ

color_chart_ib

カラーチャートの画面
カラー216色+グレー16色のコードはこちらを参考にさせていただきました。
>> 256色カラーテーブルへの減色

#import "KKViewController.h"
#import "KKDetailColorViewController.h"

@interface KKViewController ()
@property (nonatomic, strong) NSMutableArray *colors;
@end

@implementation KKViewController

- (void)createColors
{
    self.colors = [[NSMutableArray alloc] init];
    UIColor *mycolor = nil;
    CGFloat dParam = 1.0 / 6.0;
    for(NSInteger i = 0, ilen = 6; i < ilen; i ++){
        for(NSInteger j = 0, jlen = 6; j < jlen; j++){
            for(NSInteger k = 0, klen = 6; k < klen; k++){
                mycolor = [UIColor colorWithRed:(i * dParam)
                                          green:(j * dParam)
                                           blue:(k * dParam)
                                          alpha:1];
                [self.colors addObject:mycolor];
            }
        }
    }
    dParam = 1.0 / 15.0;
    for(NSInteger i = 0, len = 15; i <= len; i++){
        mycolor = [UIColor colorWithRed:(i * dParam)
                                  green:(i * dParam)
                                   blue:(i * dParam)
                                  alpha:1.0];
        [self.colors addObject:mycolor];
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	
    [self createColors];
}

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

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.colors.count;
}

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollecitonCell" forIndexPath:indexPath];
    cell.backgroundColor = self.colors[indexPath.row];
    return cell;
}

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    KKDetailColorViewController *detailColorVC = segue.destinationViewController;
    UICollectionViewCell *cell = (UICollectionViewCell *)sender;
    NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];
    detailColorVC.detailColor = self.colors[indexPath.row];
}

@end

詳細画面

#import "KKDetailColorViewController.h"

@interface KKDetailColorViewController ()
@property (nonatomic, weak) UILabel IBOutlet *redLabel;
@property (nonatomic, weak) UILabel IBOutlet *greenLabel;
@property (nonatomic, weak) UILabel IBOutlet *blueLabel;
@property (nonatomic, weak) UIView IBOutlet *detailColorView;
@end

@implementation KKDetailColorViewController

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

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    const CGFloat* colors = CGColorGetComponents( self.detailColor.CGColor );
    self.redLabel.text   = [self colorLabelText:colors[0]];
    self.greenLabel.text = [self colorLabelText:colors[1]];
    self.blueLabel.text  = [self colorLabelText:colors[2]];
    self.detailColorView.backgroundColor = self.detailColor;
    // Do any additional setup after loading the view.
}

- (NSString *)colorLabelText:(CGFloat)componentValue
{
    NSInteger convertedValue = [self valueInRange256:componentValue];
    return [NSString stringWithFormat:@"%d", convertedValue];
}

- (NSInteger)valueInRange256:(CGFloat)value
{
    return floor(256 * value);
}

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

@end

コード量少ないすね。loadViewで大量のコード書かなくてもいいのですね。

>> プロジェクト一式です。（.zip）