Cocoaの日々

バッジ描画ライブラリを GitHub にて公開しました。

lakesoft/LKbadgeView - GitHub

バッジって何かというとメールの未読件数などで使われているアレ。

数字だけでなく文字列も表示できる。また背景色や文字色を変えたり、アウトライン（輪郭線）を付けられるようにした。

インストール

GitHubからプロジェクトをダウンロードし、その中から下記のファイルを自分のプロジェクトへコピーして追加する。

LKBadgeView.m
LKBadgeView.h

使い方

UIView のサブクラスなので生成してビューへ貼り付けるだけで使える。
（コード例）

LKBadgeView* badgeView =
    [[[LKBadgeView alloc] initWithFrame:CGRectMake(100, 200, 50, 20)] autorelease];
[self.view addSubview:badgeView];
badgeView.text = @"23";

XIB に配置してそれを使ってもいい。サンプルアプリではこの方法を使っている。

@property (nonatomic, retain) IBOutlet LKBadgeView* badgeView;
 :
self.badgeView.text = @"23";

この場合はインスペクタのクラス指定を LKBadgeView にすることを忘れずに。

カスタマイズ

色の変更の他、アウトラインの描画や水平位置の調整などが行える。

水平位置

LKBadgeView のビューとしての大きさとは別に角丸のバッジがその中に配置される。この時の水平位置を指定することができる。

@property (nonatomic, assign) LKBadgeViewHorizontalAlignment horizontalAlignment;

左寄せ、中央揃え、右寄せの３種類を指定することができる。デフォルトは中央揃え（LKBadgeViewHorizontalAlignmentCenter）。


 ※上の図の灰色の背景色は説明の都合上、意図的に付けてある。

最小サイズ

横幅の最小サイズは２種類設定することができる。

@property (nonatomic, assign) LKBadgeViewWidthMode widthMode;

・LKBadgeViewWidthModeSmall にした場合は１文字だと丸になる。
・LKBadgeViewWidthModeStandard の場合は２文字までは同じ横幅となる。３文字以上はそれより拡がる。

デフォルトは LKBadgeViewWidthModeStandard。

色

文字色とバッジの背景色を指定できる（デフォルトでは文字色＝白、背景色＝灰色）。

@property (nonatomic, retain) UIColor* textColor;
@property (nonatomic, retain) UIColor* badgeColor;

アウトライン

バッジの周りに輪郭線を描くことができる。こんな感じ。

アウトラインを描くには outline プロパティを YESにする。NOだと描画しない。色と線の太さを指定することができる（デフォルトは色＝灰色、太さ＝2.0）。

@property (nonatomic, retain) UIColor* outlineColor;
@property (nonatomic, assign) CGFloat outlineWidth;
@property (nonatomic, assign) BOOL outline;

もちろんバッジの背景色と組み合わせることもできる。

その他

切り捨て表示

ビューのサイズに対して文字数が多い場合は切り捨て表示（ ...表示）になる。

※上の図の灰色の背景色は説明の都合上、意図的に付けてある。

バッジの高さ

バッジの高さは 20ピクセル固定で変更はできない。この値は定数として参照出来る他、実行時に取得できるようクラスメソッドを用意してある。

#define LK_BADGE_VIEW_STANDARD_HEIGHT       20.0
 :
+ (CGFloat)badgeHeight;

LKBadgeView の高さはこの値と同じか大きくする必要がある。大きい場合の縦位置は縦中寄せとなる。通常ビュー自体の高さはこの値と同じにしておくと良い。

サンプル

付属のサンプルを実行するとカスタマイズされた表示をひと通り確認できる。

右上のスイッチをONにするとアウトライン描画に切り替わる。

ソース解説

バッジの表示は UIBezierPath を使って drawRect: で描画している。文字は UILabel を使わず直接描画した。詳細はソースコードを参照のこと。

ライセンス

MIT ライセンスです。商用・非商用を問わず自由にご利用下さい。連絡も不要です（でもくれるとうれしい）。