Help us understand the problem. What is going on with this article?

iOSで独自Viewを作る時の5つのTips

More than 5 years have passed since last update.

iOSでの独自View(iOSではカスタムビューと言うらしい?)を作る時に困ったことがあったのでまとめておくことにしました。

作りたいのは、 主にStoryBoardやxib上に配置して使う。たまにコードから生成する事もあるカスタムビュー です。

初期化に関わるメソッドの設計をしたい

カスタムビューはUIView、もしくはそのサブクラスを継承して作ります。
UIViewには初期化に関わるメソッドが複数あり、インスタンス生成の仕方によって呼ばれ方が異なります。

作りたいViewはxibからでもコードからでも生成されるので、なるべく指定イニシャライザを通して初期化するように仕向けていきます。
指定イニシャライザについてはこちらが詳しい

StoryBoardやxibファイルからインスタンス化される場合に呼ばれるメソッド

以下の順番でメソッドが呼ばれます。

  1. - (id)initWithCoder:
  2. - (void)awakeFromNib

- (id)initWithCoder:は、シリアライズされたインスタンスを復元するためのメソッドです。

後述する "User Defined Runtime Attributes" で指定したプロパティの設定は1. と 2. の間に行われるため、初期値の設定は- (id)initWithCoder:で行うのが良さそうです。

awakeFromNibはnibからの読み込みが完全に終わった時に呼び出されるので、値設定以外の初期化処理などはこの段階で行うのが良さそうです。

コードから初期化する場合に呼ばれるメソッド

  1. - (id)init or - (id)initWithFrame: or クラスの指定イニシャライザ

正直、どのイニシャライザを呼んでも自由だと思います。が、クラスが定める指定イニシャライザがあればそれを呼ぶべきでしょう。

例えばUITableViewCellなんかは-(id)initWithStyle:reuseIdentifier:が指定イニシャライザになっています。

UITableViewCell.h-(id)initWithStyle:reuseIdentifier:付近には以下のように書かれています。

// Designated initializer.  If the cell can be reused, you must pass in a reuse identifier.  You should use the same reuse identifier for all cells of the same form.  

リファレンスにもinitWithFrame:は書かれていません。
マニュアルやドキュメントコメントで、指定イニシャライザを使うように促すのが良さそうです。

StoryBoardやxibへの追加の仕方

基本的には、カスタムビューの直接の親クラスを画面に追加し、"Custom Class"の部分にカスタムビューのクラス名を記入します。
こうすることで、親クラスのプロパティ設定をInterface Builder上で行えて便利です。

カスタムビューに持たせた独自のプロパティもIB上から設定したい

Identity Inspectorにある "User Defined Runtime Attributes" に、プロパティのパスと型、値を指定することでIB上からでも指定ができます。

スクリーンショット 2014-09-13 13.40.19.png

キー値コーディングができるので、「プロパティに入っているインスタンス」のプロパティに対して設定を行うこともできます。

値は[NSObject(NSKeyValueCoding) setValue:forKey:]を使ってセットされているようです。
パスが見つからない場合などは例外が出ます。

"User Defined Runtime Attributes" に書いた値の設定は、initWithCoder:awakeFromNibの間に行われるようです。

設定できる型の種類は以下

IB上の表示 実際の型 備考
Boolean BOOL
Number NSNumber * CGFloat型の値が欲しいときは[NSNumber floatValue]とかを使う
String NSSting *
Localized String NSString * Mac OS Xのアプリでしか有効にならない模様
Point CGPoint
Size CGSize
Rect CGRect 記法は{{(Point)}, {(Size)}}
Range NSRange
Color UIColor *
Image UIImage *
Nil (nil) 多分NSNullが入る?

この機能を使う事を念頭に置いてAPI設計を行うと良さそうです。

画面描画したい

基本的に- (void)drawRect:メソッドをオーバーライドして、その中でCoreGraphics系の関数を駆使して画面を書いていきます。

描画にはグラフィクスコンテキストが必要です。

CGContextRef context = UIGraphicsGetCurrentContext();

もう定型句と化しているので、最初からコメントアウトして置いておいてくれれば良いのにと思います。

背景色を設定していないのに背景が黒くなる

指定範囲に描かれたものをなかったことにするCGContextClearRect()を使って、初めにまっさらにしておきます。

CGContextClearRect(context, rect);

UIImageViewを継承したらdrawRect:が呼び出されない

UIImageViewは例外的に、画面描画にdrawRect:メソッドが使われません。(参考: drawRect not being called in my subclass of UIImageView

そのため、UIImageViewを継承したクラスでカスタムビューを作るのは諦めた方が良いでしょう。

画面にUIImageを書き出したいのなら、カスタムビューのdrawRect:の中でUIImage#drawInRect:を呼び出す事で実現できます。
参考: UIImageを画面に直接描画する方法

影を描画したい

CGContextSetShadow()を使って影を設定すると、塗りつぶし等の描画を行ったときに自動的に影を付けてくれます。

ただ、塗りつぶしの度に影が描画されるため、単純な図形を組み合わせて多角形を作ろうとすると悲しいことになります。
描いた後のものに影を付けることはできないようなので、おとなしくパスを使って多角形を描画しましょう。

UILabelを継承してるクラスで文字描画をしたい

self.textに文字が入っているので[NSString drawInRect:withFont:lineBreakMode:alignment:]を使って描画する方法もありますが、

[super drawRect:rect];

で描いた方がはるかに楽です。

xibで作ったビューを、独自ビューの見た目にしたい

どうやら、あまりオススメされる方法ではないらしいです。が、一応。

UITableViewCellのカスタムビューをxibで作って使う方法はTableViewControllerが提供してくれていますが、それ以外の場合はそうもいきません。
それなりに面倒な手順が必要です。

流れは以下のような感じ。

  1. カスタムビューのクラスを作る
  2. xibで見た目を作り、File's Ownerにカスタムビューのクラスを設定
  3. カスタムビューの初期化時にxibを読み込み、子ビューに設定する

1. カスタムビューのクラスを作る

UIViewを継承したクラスを作ります。
例えば "SampleView" という名前にしておきます。

2. xibで見た目を作り、File's Ownerにカスタムビューのクラスを設定

カスタムビュークラスと同名のxibファイルを用意して適当に見た目を作ります。

このとき、xibのFile's Ownerに 1. で作ったカスタムビュークラスを設定します。

スクリーンショット 2014-09-13 14.50.08.png

ついでに、ルートビューへのアウトレットをFile's Ownerに張っておきます。

XVAAAView_xib_—_Edited.png

名前は適当で構いません。ルートビューを後で使うためにアウトレットを作っておいた方が便利なので作成します。
ここではcontentViewという名前にしました。

3. カスタムビューの初期化時にxibを読み込む

awakeFromNibのタイミングでxibを読み込みます。
ここでは直接awakeFromNibに書き込んでしまいましたが、コードからイニシャライズされた時にはawakeFromNibが呼び出されないので、別の関数に切り出して指定イニシャライザと共有するのが良さそうです。

- (void) awakeFromNib
{
    [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil];
    [self addSubview:self.contentView];
}

これで、カスタムビューを画面に配置するとxibで作ったビューが表示されます。

プロパティが変更された時にビューを再描画したい

Objective-Cで開発している場合は、ヘッダにプロパティを宣言すると自動的にセッタ・ゲッタのメソッドが作られます。
セッタとゲッタは(インスタンス).(プロパティ)の書式で呼び出された時に使われます。

// これはゲッタが使われる
NSString *str = self.hoge;

// 実はこう書くのと同じ
// NSString *str = [self hoge];


// これはゲッタが使われない(@synthesizeを使っていないとき)
// ただしアンダースコアを使った記法が使えるのは当該クラスの中のみ
str = _hoge;


// これはセッタが使われる
self.hoge = @"fuga";

// こう書いても同じことが起きる
// [self setHoge:@"fuga"];


// これはセッタが使われない(@synthesizeを使っていないとき)
_hoge = @"fuga";

ということで、セッタをオーバーライドしてビュー再描画の命令[UIView setNeedsDisplay]を挟めば、プロパティが変更されたときにビューを再描画できます。

- (void)setHoge:(NSString *)hoge
{
    _hoge = hoge;
    [self setNeedsDisplay];
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした