バッヂは、アプリで保留になっている通知項目の個数を知らせてくれます。
その表示は、アプリアイコンの右上に赤い楕円で表示さ、邪魔にならない程度にその存在感をアピールしています。

そんなバッヂも、以前は画像が用意されていました。
その画像を入れ替えることで、個性を出していた方も少なくありません。

Anemoneでは、このバッヂをいろいろ弄ることができます。
バッジは、「バッジ背景」と「数字」の組み合わせで成り立ちます。
「バッジ背景」は、画像を用意すれば変更できますし、「数字」は、Info.plist で弄ることができます。

構成

バッヂ背景

バッジ背景は、オプション扱いです。
背景画像を用意すれば、その画像を使って表示してくれますし、用意しなければ、従来通りの赤い楕円で表示してくれます。

表示される数字

バッヂに表示される数字は Info.plist で弄るのですが、その基本は「ラベル設定あれこれ」の通りです。
BadgeSettingsをキーとし、<dict>によって各種キーを並べてください。

情報としてはこれで終わってしまうので、サンプルを紹介します。

やってみた

とりあえず、フォントを変更してみました。

本来なら、フォントを変更するだけのサンプルにするべきなのですが、やってみると、どうしてもズレが気になったので、ズレ修正のためのオフセットも入れました。
5.5インチで確認しながら修正しましたが、他のデバイスで確認しておりませんので、各自修正してください。

こんな感じで表示されます。



このサンプルはこちら
　ー＞　boke_a_badge_DB.zip

作ってみた

背景画像を利用できるなら・・・
そうなると、やはり以前の影付き画像ですよね。
そんな訳で引っぱり出してきたのですが、当たり前のように@3x画像ではないので、@3x画像を作ってみました。
しかし、それだけでは芸がないので、Info.plistも作りました。

サンプルは、フォントを「AmericanTypewriter」
に変更し、黄色で表示させるものです。
これもズレが気になるため、修正のためのオフセットも入れてあります。

こんな感じで表示されます。

桁が増えた時に、画像も合わせて幅が広がるのですが、数字がギリギリ収まる程度にしか広がっていませんね。
おそらく、「そんなに広げるほどの幅ぢゃないよね？」という判断されたのでしょう。

ここで、魔法の鍵（キー）を使いましょう。
魔法の鍵ですから、使ってもなくなりません。（分かる人だけ笑ってください）
その鍵（キー）とは、「WidthChange」であり、幅を追加してくれます。

「Change」とあるので、絶対的な「変更」かと思いがちですが、相対的な「追加」ですので、注意しましょう。

気づいた方もいらっしゃるかと思いますが、もちろん「HeightChange」もあります。
使い方や役割は同じなのですが、ここでは使っていないため、スルーします。
変更後のInfo.plistも紹介します。

変更部分や追加部分を赤くしています。

左右に10ピクセルくらい追加したらどうかと考えたのですが、5.5インチは@3xですので３倍されると想定しました。
そんな訳で、「3」を指定しようと思ったのですが、追加する幅は左右にあるので、「6」を追加幅として指定しました。
幅が増えただけではテキストが偏るだけなので、テキストの移動量は「3」追加しました。
もともと0.5の移動量がありますので、実際には、「3.5」で指定してあります。

こんな感じで表示されます。

ちょうどですね。
ピクセルを数えてみると、左右９ピクセルづつ追加されていました。
しかも、１桁数字の背景画像は、幅が広がっているように見えません。
これは、１桁では幅を広げるほどではないと判断されたためでしょう。

本来なら、どこから幅が広がり始めるのか確認するところですが、フォントによって変わるのでやめておきました。


このサンプルはこちら
　ー＞　boke_a_badge_AT.zip

遊んでみた

ここでは、バッヂ背景画像で遊んでみます。
背景画像と表示される数字との位置関係を調べるためのものですが、とりあえず大きな画像で遊んでみましょう。

アプリアイコンの右上にバッヂが表示されるので、遊ぶ画像はアイコンの大きさにしてみます。
わざわざ作るのも面倒なので、アイコンマスクで使われる画像を流用することにします。
今回は画像だけでの確認ですので、Info.plistはありません。

こんな感じで表示されます。

バッヂが表示される場所は、アイコン右上の特定場所に決まっているようですね。
しかも、数字は画像の中央に表示されるようです。

このサンプルはこちら
　ー＞　boke_a_badge_MASK.zip



次は、大きさのない画像で遊んでみます。
と言っても1×1にしておきました。
「内容が無いよう！」という古来からの諺にちなんで、透過画像としました。

こんな感じで表示されます。

思ったより上に表示されていますね。
少し考えて分かったのですが、縦位置に関しては、画像の中央と数字の中央が揃うようになっているようです。
横位置に関しては、中央とはなっていません。
数字の桁によって幅が変化するため、おそらく、あらかじめ左右の余白が設定されており、その中央が一致しているのではないでしょうか。


このサンプルはこちら
　ー＞　boke_a_badge_TRANSPARENT.zip



せっかく透過画像で遊んだので、Info.plistだけでどこまでの表現ができるか遊んでみます。
背景画像が無いので、代わりに影で表現してみます。

その文字だけでも目立つように、幅が一番広いと思われる AvenirNext-Heavy をフォント指定しました。
初めは文字色を白、影を黒にしていたのですが、影が背景画像の代わりになるほど意味を為さなかったので、文字色を赤にして影を黒にしました。
フォントも大きくし、ズレも修正しました。
影をボカすとほとんど見えなくなったので、ボカすのをやめました。
今回は、幅も高さも追加してあります。

そこまでして、できるだけ目立たせた結果がこれです。

やはり、背景画像か標準背景を使いましょう。

というオチでした・・・


このサンプルはこちら
　ー＞　boke_a_badge_SHADOW.zip