xibファイルで作成したCustomViewを使用する

はじめに
---
複数の画面で同じパーツを使いたい時などに、Nibファイルでパーツを作っておくとレイアウトの使い回しが出来るので非常に便利。StoryBoardからしかレイアウトを作成した事が無い人でも、非常に簡単に実装出来て、かなり便利な機能なので覚えておいた方がいいと思う。（参考サイト抜粋）
ということなのでまさに**StoryBoardからしかレイアウトを作成した事が無い人**がxibファイルで作成したCustomViewを使用する。



<a href="http://synsize.tumblr.com/post/437678604/xib%E3%81%A8nib%E3%81%AE%E9%81%95%E3%81%84">xibとnibの違い<a>

手順１
---
まずはCustomViewのクラスを作成します。
プロジェクトを作成し<code>command</code>＋<code>N</code>
下記の画像の手順でCustomViewクラスを作成。
クラス名を「CustomView」にし、Subclassを「UIView」に変更後、任意のフォルダにクラスを作成。

![スクリーンショット 2016-10-20 10.59.48.png](https://qiita-image-store.s3.amazonaws.com/0/134872/fdc85c72-0888-03de-bd68-1c805bd3672a.png "スクリーンショット 2016-10-20 10.59.48.png")

![スクリーンショット 2016-10-20 11.00.14.png](https://qiita-image-store.s3.amazonaws.com/0/134872/17c6189d-b4a4-d3f8-9134-7a0b6b95ca30.png "スクリーンショット 2016-10-20 11.00.14.png")

手順2
---
xibファイルを作成します。
再び<code>command</code>＋<code>N</code>
下記の画像の手順でCustomView.xibファイルを作成。
ファイル名は「CustomView.xib」
![xib.png](https://qiita-image-store.s3.amazonaws.com/0/134872/944af7a7-be53-4c2c-452e-a575806bfb40.png "xib.png")

ここまでで下記の画像のように３つファイルができていると思います。
![スクリーンショット 2016-10-20 11.14.35.png](https://qiita-image-store.s3.amazonaws.com/0/134872/7fce16cc-1fbc-48d6-34da-70bce8040864.png "スクリーンショット 2016-10-20 11.14.35.png")

手順3
---

CustomView.xibファイルを選択後
Show the Attributes inspectorを選択
SizeをFreeformに変更
Status BarをNoneに変更
	
![スクリーンショット 2016-10-20 11.19.52（2）.png](https://qiita-image-store.s3.amazonaws.com/0/134872/f232e375-e37c-9e88-73ba-7edf7dd43e63.png "スクリーンショット 2016-10-20 11.19.52（2）.png")

手順4
---
Show the Size inspectorを選択
Width,Heightをそれぞれここでは200に設定
ViewにLabelとButtonのオブジェクトを設置

![スクリーンショット 2016-10-20 14.07.59（2）.png](https://qiita-image-store.s3.amazonaws.com/0/134872/ed851f9e-013e-6728-15fd-b619c7435031.png "スクリーンショット 2016-10-20 14.07.59（2）.png")

手順5
---
Show the identity inspectorを選択
Custom Classのclassを「CustomView」に変更し、CustomView.xibとCustomView.hクラスを関連付けさせる。

![スクリーンショット 2016-10-20 14.18.35（2）.png](https://qiita-image-store.s3.amazonaws.com/0/134872/57bb2f9c-1b07-0775-18df-33555545845c.png "スクリーンショット 2016-10-20 14.18.35（2）.png")

手順6
---
LabelとButtonのオブジェクトをCustomView.hに接続する。

![スクリーンショット 2016-10-20 14.29.08（2）.png](https://qiita-image-store.s3.amazonaws.com/0/134872/b13cab8e-af21-201d-fcb1-c257de0d7e77.png "スクリーンショット 2016-10-20 14.29.08（2）.png")

手順7
---

CustomView.mとViewController.mに下記のコードを記述する。

```CustomView.m
#import "CustomView.h"

@implementation CustomView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        UINib *nib = [UINib nibWithNibName:@"CustomView" bundle:[NSBundle mainBundle]];
        NSArray *array = [nib instantiateWithOwner:self options:nil];
        self = [array objectAtIndex:0];
    }
    return self;
}

- (IBAction)button:(id)sender {
    NSLog(@"ボタンがタップされました");
}
@end
```


```ViewController.m
#import "ViewController.h"
#import "CustomView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CustomView *customView = [CustomView new];
    customView.frame = CGRectMake(30,214,260,140);
    [self.view addSubview:customView];
}

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

@end


```

実行結果

![Simulator Screen Shot 2016.10.20 14.41.41.png](https://qiita-image-store.s3.amazonaws.com/0/134872/8c63107f-ca30-df82-482a-7bdf01138513.png "Simulator Screen Shot 2016.10.20 14.41.41.png")

さいごに
---
今までStoryboardのみでLayoutを作成していて、xibの存在は知ってはいたものの何となく敬遠してきましたが、使い方になれれば同じ部品を何度も設置する必要がなく本当に便利なものだと感じました。


参考
---
http://tryworks-design.com/?p=2415