3.2 UIView のカスタマイズ

UIKit で提供されている view component を組み合わせてカスタムビューを作成すれば、あらゆる場面で再利用可能になり開発効率があがります。

ここではカスタムビューコンポーネントの作成方法として xib を使用した方法と使用しない方法の二つを紹介します。

xib を使用しないカスタムビューコンポーネントの作成方法

1. UIView のサブクラスファイル作成

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/3.2/createUIViewSubClass.png

2. UIView サブクラスの実装

#import <UIKit/UIKit.h>

@interface MixiCustomizedView : UIView

@end

#import "MixiCustomizedView.h"

@implementation MixiCustomizedView

static CGRect const kSubViewFrame = {{10, 10}, {300, 180}};
static CGRect const kButtonFrame = {{10, 10}, {220, 30}};

// コードで初期化する場合
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        [self initializeView];
    }
    return self;
}

// xib を使用する場合
-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if(self){
        [self initializeView];
    }
    return self;
}

-(void)initializeView
{
    UIView *subView = [[UIView alloc] initWithFrame:kSubViewFrame];
    [subView setBackgroundColor:[UIColor redColor]];
    [self addSubview:subView];

    UILabel *label = [[UILabel alloc] initWithFrame:kButtonFrame];
    label.text = @"hogehoge";
    label.backgroundColor = [UIColor clearColor];
    [subView addSubview:label];
}

@end

3. 使用するクラスの xib に設定

「イメージ」

xib を使用するカスタムビューコンポーネントの作成方法