アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

iPhone のバッジを好きな場所に表示する

August 28, 2011開発Badge, iPhone, バッジ

iPhone にはバッジという通知用 UI がある。

しかし単体コントロールとしては提供されておらず今のところこれを利用できるのはホーム画面のアイコンとタブバーだけのようだ。もしそれ以外の場所に表示したい場合は似たようなコントロールを自作する必要がある。

バッジは標準提供されないのが不思議なぐらいよくできてるし用途も広そうなので、さすがに誰か自作しているだろうと探してみたところ MKNumberBadgeView というコントロールを見つけた。

ひと組みのヘッダとソースだけという実にシンプルな構成。ライセンス形態も Apache License 2.0 なのでアプリに組み込みやすい。UIView から派生しているためプロジェクトにヘッダとソースを組み込むだけで使用できる。Interface Builder を使って設置するなら以下のような手順になるだろう。

  1. あらかじめ MKNumberBadgeView.h、MKNumberBadgeView.m をプロジェクトに追加しておく
  2. Interface Builder で MKNumberBadgeView を使用する View を開く
  3. バッジを表示したい位置に View を追加
  4. Size inspector でバッジ用の View のサイズを適宜、調整
  5. Identity inspector の Custom Class 欄で、クラスに MKNumberBadgeView を指定
  6. バッジ用の 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 サイズを 11pad1 にするとよいだろう。影の位置が上なのと alignmentCenter 以外にした時、View のサイズを大きくしても左右が欠ける点が気になる。

また MKNumberBadgeView という名のとおり数値専用である。内部的には文字列化して描画しているので UITabBarItembadgeValue のように NSString をサポートしてほしいところ。

ということでこのクラスを参考に MKTextBadgeView という改造版のコントロールを作成。比較のためにサンプル プログラムを用意してみた。

サンプル プログラム

Text という列が MKTextBadgeView、Number は MKNumberBadgeView。行は Center、Left、Right のレイアウトで大別し、それぞれバッジに表示される数値の桁が 3 ~ 1 となるように並べている。MKNumberBadgeView については利用側で valuefillColor プロパティのみを変更。ソースには一切、手を加えていない。

前述のとおり fontpad をそれぞれ 111 にすれば標準のバッジや MKTextBadgeView と同じような見た目になるが素の MKNumberBadgeView がどのような感じになるかを確認できるように、あえてそのままとしている。

作成したサンプルのプロジェクトを公開しておく。

iPhone シミュレータ 4.3 で動作確認をおこなった。

ところで Xcode のプロジェクト一式を公開するのは初めてなのだが不要なファイルが分からないのでプロジェクトのルートをそのまま Mac 標準の圧縮機能で ZIP 化している。もし余計なファイルや個人情報的なものが混じっていたらその旨、ご指摘いただけるとありがたい。