3.2 UIView のカスタマイズ

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

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

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

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

2. UIView サブクラスの実装

MixiCustomizedView.h

#import <UIKit/UIKit.h>

@interface MixiCustomizedView : UIView

@end

MixiCustomizedView.m

#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 を使用するカスタムビューコンポーネントの作成方法

NSBundle UIKit Additions Reference

xib ファイル作成

xib から view 読み込みを実装

MixiCustomizedView2.m

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if(self){
        //xib ファイルのトップレベルオブジェクトを格納した array を返す
        NSArray *topLevelViews = [[NSBundle mainBundle] loadNibNamed:@"MixiCustomizedView2"
                                                                 owner:self
                                                               options:nil];
        UIView* customizedView2 = topLevelViews[0];
        [self addSubview:customizedView2];
    }
    return self;
}

file's owner の設定

xib の owner を設定することで、ボタンアクションなどのひも付けも可能になります。

MixiCustomizedView.xib