プログラミングと音楽とアニメとiPhoneとiPadとMacとAndroidとLogicとギターとテニスと車

アプリ開発系の勉強メモやTipsなどを中心に他いろいろと書いていきます。

xib(Nibファイル)からUIViewを生成するカテゴリのライブラリを公開しました

UIView-LoadNib

https://github.com/travitu/UIView-LoadNib

現在制作中のアプリでレイアウトやデザインが少し異なる複数のUIViewを用意して、
ViewController上でそれらのUIViewを切り替えて表示したい所があったので、
コードで同じようなUIViewを書くより、xibで作った方がすぐ見分けがつけやすいと思い、簡易的ですが、カテゴリのライブラリを作りました。

【使い方】

ライブラリをダウンロードして、以下の2つのファイルを含んだ UIView+LoadNibフォルダごとプロジェクトに追加します。

  • UIView+LoadNib.h
  • UIView+LoadNib.m

そしてUIViewを作ります。この時xibも追加します。
デモでは、以下のファイル名にしています。

  • MyCustomView.h
  • MyCustomView.m
  • MyCustomView.xib

MyCustomViewクラスに必要な実装を行います。
実装内容については後で説明します。
f:id:travitu:20140618003152p:plain

MyCustomView.xibを表示して、File's Ownerを選択し、
Custom Classに先ほど作成したMyCustomViewを指定します。
デモでは分かり易いようにUIView上にラベルを追加しています。
f:id:travitu:20140618003231p:plain

Main.storyboardでUIViewを新しく追加し、位置やサイズなどを適宜合わせます。
f:id:travitu:20140618003334p:plain

追加したUIViewのCustom ClassにMyCustomViewを指定します。
f:id:travitu:20140618003343p:plain

以下、ライブラリのコードと実装するコードの解説です。

UIView+LoadNib.h

#import <UIKit/UIKit.h>

@interface UIView (LoadNib)
// xibからUIViewを生成するメソッド(引数有りと無しの2種類)
- (UIView *)tra_loadViewFromNibNamed:(NSString *)nibName;
- (UIView *)tra_loadViewFromNib;
@end

UIView+LoadNib.m

#import "UIView+LoadNib.h"

@implementation UIView (LoadNib)
- (UIView *)tra_loadViewFromNibNamed:(NSString *)nibName
{
    UIView *view = [[[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil] objectAtIndex:0];
    view.frame = self.bounds;
    // translatesAutoresizingMaskIntoConstraintsはデフォルトではYESになっています。
    // もしAutoLayoutの制約をコードで書く場合はNOにします。
    view.translatesAutoresizingMaskIntoConstraints = YES;
    return view;
}

- (UIView *)tra_loadViewFromNib
{
    NSString *nibName = NSStringFromClass([self class]);
    UIView *view = [self tra_loadViewFromNibNamed:nibName];
    return view;
}
@end

MyCustomView.h

#import <UIKit/UIKit.h>

@interface MyCustomView : UIView

@end

MyCustomView.m

#import "MyCustomView.h"
#import "UIView+LoadNib.h"

@implementation MyCustomView

// Interface BuilderからこのViewを生成するためのメソッドです。
- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self customViewInit];
    }
    return self;
}

// コードからこのViewを生成するためのメソッドです。
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self customViewInit];
    }
    return self;
}

- (void)customViewInit
{
    // UIView+LoadNibのメソッドを使用してxibからUIViewを生成します。    
    UIView *view = [self tra_loadViewFromNibNamed:@"MyCustomView"];
    [self addSubview:view];
}

@end

あとはビルドすれば下記のようにMyCustomViewが表示できます。
f:id:travitu:20140618003354p:plain

【補足】

今回はxibでUIViewを生成する目的だったので、デモではinitWithCoder:を使いましたが、
コードでUIViewを生成する場合はinitWithFrame:を使います。

UIView+LoadNib.mにtranslatesAutoresizingMaskIntoConstraintsを書きましたが、
このプロパティはデフォルトではYESとなっています。もしAutoLayoutの制約をコードで書く場合などは
NOにする必要があり、詳しくは以下のドキュメントに載っています。
https://developer.apple.com/jp/devcenter/ios/library/documentation/AutolayoutPG.pdf


以上、ひとまず作りましたが、このカテゴリのメソッドを使うUIView側の実装の仕方や、
カテゴリ側でインスタンス変数が持てるようにしたり、エラー処理など配慮が足りない部分を改良していく予定です。