ホーム画面を初めとし、フォルダーや天気など複数のページを切り替える際に使われるUIが、ページインヂケーターと呼ばれるものです。

以前から愛用していたパックマンのページドットですが、スポットライト検索の虫眼鏡がなくなってからは、赤ベエの居場所がなくなってしまいました。
赤ベエがいなければ、私のイメージするパックマンのテーマは完成しません。

月日が経ち・・・
iOS9から虫眼鏡が復活しました！！

ここでは、Anemoneを利用して、ページドットをいじってみます。

構成内容

階層

画像は、以下の階層に配置します。
テーマ名/ANEMPageDots/
ページドット専用フォルダーを用意する必要があります。

ファイル

ページドットを構成する画像です。

必要に応じて、@2xや@3xを付加してください。
（例：Dot_PagesSB@3x.png）
iOS9で実際に必要なファイルは、２段あるうち上段のみのようです。

作ってみた

とうとうやって参りました！！
私の中では、「定番」を通り越して「鉄板」となったテーマです。
赤ベエに追いかけられているパックマンが逃げていく様を再現できます。（エサは消えませんが・・・）

こんな感じになります。

間隔を保ってくれているので、オリジナルより画像が大きくても、良い感じに仕上がっています。
ちなみに、ステータスバーと同じ高さ（60px or 40px）で作りました。

このまま、フォルダーを開いてみると・・・

フォルダーにも利用されていますが、フォルダーに対しては大きすぎましたね。


このサンプルテーマはこちら
　ー＞　boke_a_pagedots_pacman.zip

遊んでみた

パックマンのテーマを作りましたが、オーバースケールにも関わらず、きちんと表示されました。
ページが増えても、その数によってバランス良く均等に配置されるように計算されているからであろうと思われますので、さらなるオーバースケールで遊び、その挙動を見てみましょう。

テスト機がiPhone6Plusであり、@3xのため60×60で作りましたが、3倍の180×180で作ってみました。
結果は、こんな感じになります。

アイコンサイズとなったパックマンです。
ホーム画面のアプリアイコンよりも手前に表示され、さらに、ドックにあるアイコンが手前に表示されています。

では、480×480だとどうでしょうか？
結果は、こんな感じになります。

左右均等を保ちながら、縦方向の中心は本来の位置を保っています。
このままさらに大きくしていくと、バランスを保ちながらはみ出していくことになるのでしょうね。

では、この特性を利用してみましょう。
横方向はページ数による自動配置ですが、縦方向は画像の中心を保とうとしています。
大きくした分だけ上下に広がってくれるはずですので、相当大きくしないといけませんが、それこそステータスバーまで届くはずです。
という訳で、ページドットをステータスバーに表示してみましょう！！

しかし、ステータスバーに表示するにはあまりにも余白がなく、よほど小さくしないと表示できないので、ステータスバーの下で考えましょう。
アイコンとのスペースがちょうど良い感じに開いていますね。
本来の位置と目的の位置では1,800pxほどの距離があるので、画像としては3,600px程度の大きさになりますが、それは高さだけの話なので、横は60pxのまま進めます。

・・・と、作り始めてみたものの、面白い結果が得られました。

ものすごい縦長の画像の最上部にパックマンを配置しました。
細かい位置調整が必要なのですが、ステータスバー付近までパックマンが移動していることが分かります。
とりあえずパックマンの画像だけで試したのですが、他の画像がパックマンに負けじと背伸びしています。
これも、1つの特性として覚えておくことにしましょう。

細かい位置調整の結果、パックマンは40pxで仕上げた方が良いことが分かりました。
それに伴い、画像の幅も40pxにするところだったのですが、赤ベエの幅が少し広かったため、赤ベエ画像の幅だけ50pxにしました。
結果は、こんな感じになりました。

良い場所に配置できました。

・・・が、しかし、赤ベエがスリムになっています。
赤ベエだけ、幅を50pxにしたことが原因だと思いますので、他の画像も幅50pxにして試してみます。

こんな感じになりました。

良いバランスになりましたね。

今回のテストテーマをこちらで配布しています。
boke_a_pagedots_pacman_upper.zipのダウンロード