iPhone のバッジを好きな場所に表示する
iPhone にはバッジという通知用 UI がある。
しかし単体コントロールとしては提供されておらず今のところこれを利用できるのはホーム画面のアイコンとタブバーだけのようだ。もしそれ以外の場所に表示したい場合は似たようなコントロールを自作する必要がある。
バッジは標準提供されないのが不思議なぐらいよくできてるし用途も広そうなので、さすがに誰か自作しているだろうと探してみたところ MKNumberBadgeView というコントロールを見つけた。
ひと組みのヘッダとソースだけという実にシンプルな構成。ライセンス形態も Apache License 2.0 なのでアプリに組み込みやすい。UIView から派生しているためプロジェクトにヘッダとソースを組み込むだけで使用できる。Interface Builder を使って設置するなら以下のような手順になるだろう。
- あらかじめ MKNumberBadgeView.h、MKNumberBadgeView.m をプロジェクトに追加しておく
- Interface Builder で MKNumberBadgeView を使用する View を開く
- バッジを表示したい位置に View を追加
- Size inspector でバッジ用の View のサイズを適宜、調整
- Identity inspector の Custom Class 欄で、クラスに MKNumberBadgeView を指定
- バッジ用の View を View Controller に関連づける
MKNumberBadgeView のプロパティは、以下のようになる。
| プロパティ | 型 | 規定値 | 説明 |
|---|---|---|---|
| value | NSUInteger | 0 | バッジのテキストとして表示する数値 |
| shadow | BOOL | YES | バッジに影を表示することを示す値 |
| shine | BOOL | YES | バッジに光沢をつけることを示す値 |
| font | UIFont* | boldSystemFontOfSize:16 | テキストの描画フォント |
| fillColor | UIColor* | redColor | バッジの塗りつぶし色 |
| strokeColor | UIColor* | whiteColor | バッジの枠線色 |
| textColor | UIColor* | whiteColor | テキストの色 |
| alignment | UITextAlignment | UITextAlignmentCenter | テキストの表示位置 |
| badgeSize | CGSize | - | バッジのサイズ |
| pad | NSUInteger | 4 | バッジ内の余白 |
実際に表示してみると分かりやすいのだが iPhone 標準のバッジに比べると若干、見た目に違和感あり。標準のものに近づけるなら font サイズを 11、pad を 1 にするとよいだろう。影の位置が上なのと alignment を Center 以外にした時、View のサイズを大きくしても左右が欠ける点が気になる。
また MKNumberBadgeView という名のとおり数値専用である。内部的には文字列化して描画しているので UITabBarItem の badgeValue のように NSString をサポートしてほしいところ。
ということでこのクラスを参考に MKTextBadgeView という改造版のコントロールを作成。比較のためにサンプル プログラムを用意してみた。
Text という列が MKTextBadgeView、Number は MKNumberBadgeView。行は Center、Left、Right のレイアウトで大別し、それぞれバッジに表示される数値の桁が 3 ～ 1 となるように並べている。MKNumberBadgeView については利用側で value と fillColor プロパティのみを変更。ソースには一切、手を加えていない。
前述のとおり font と pad をそれぞれ 11、1 にすれば標準のバッジや MKTextBadgeView と同じような見た目になるが素の MKNumberBadgeView がどのような感じになるかを確認できるように、あえてそのままとしている。
作成したサンプルのプロジェクトを公開しておく。
iPhone シミュレータ 4.3 で動作確認をおこなった。
ところで Xcode のプロジェクト一式を公開するのは初めてなのだが不要なファイルが分からないのでプロジェクトのルートをそのまま Mac 標準の圧縮機能で ZIP 化している。もし余計なファイルや個人情報的なものが混じっていたらその旨、ご指摘いただけるとありがたい。