2011年7月12日火曜日

[Android] ぼくのかんがえたかっこいいばってりーでざいなーのすきん

…というわけで、先日ご紹介した『Battery Designer』のチュートリアルです。
とはいっても大したものは作りませんが…

・サー○ャウィジェット風のサークルを作ってみる
まずは、残量サークルの残量部分と消費部分の幅が異なるものを作ってみましょう。

1.新規ウィジェットを設置し、スキン編集画面から[残量サークル]を新規追加します。
2.レイヤー編集画面で、サークルがウィジェット中心にくるよう、中心座標と半径を設定します。
線の幅][サークルの背景色]は消費部分の幅・色に設定します。[サークルの色]は今は適当で構いません。
3.スキン編集画面に戻り、新たに[残量サークル]を新規追加し、先ほどのものと重なるよう、中心座標と半径を設定します。
そして、 [線の幅]を先ほどのより太くし、[サークルの色]は残量部分の色、[サークルの背景色]は完全透過にします。
4.2つの[残量サークル]の[0%の絶対角度][100%の絶対角度]を、目的のものに(ここでは、上から時計回り)なるよう調整します。
5.そうしたら、[状態表示文字列]をサークル中心にくるよう、[アンカーポイント]を調整して出来上がりです。
「100%」時に文字がサークルをはみ出ないよう、バッテリー情報偽装ダイアログで残量をイジりながら、[サイズ]を確認してください。

サークルではなく、バーでも同様のものが作れます。

・残量数値の色が変わるスケールを作ってみる

1.まず、[状態表示文字列]で ' 00 10 20 30 40 50 60 70 80 90 99 ' といったスケール文字を作ります。このとき、Monospace のような等幅フォントを使うとよいでしょう。
2.[残量バー]を新規追加し、それを[1つ上に移動]して、先ほどの[状態表示文字列]の下に重ねます。そうしたら、"00"と"99"のちょうど挟まれるように、[アンカーポイント]開始座標と[100%時のバーの長さ]を調整し、それらの値をメモっておきます。
3.つぎに、バッテリー情報偽装ダイアログで残量を55%にした上で、[レベル領域]の開始位置を[残量から%で相対指定][-5%]、終了位置を[残量から%で相対指定][5%]にし、"50"と"60"にキレイにまたがっていることを確認します。
4.バーの背景部分が"00"と"99"に中途半端にかぶっていて格好悪いので、新しく [残量バー]を追加して、一番下に重なるよう移動し、[アンカーポイント]開始座標と[100%時のバーの長さ]を調整します。また、[バーの色]を背景色と同じにして、ただの「真っ黒な棒」にしておきます。
5.さらに新しく[残量バー]を追加し、2.と同じ位置にした上で、[レベル領域]の開始位置を[残量から%で相対指定][-0.33%]、終了位置を[残量から%で相対指定][0.33%]、[バーの色]を赤、[バーの背景色]を完全透過にして、指示針っぽくしたら完成です。

さらに[残量バー]を重ねたり、色の透過を駆使したりすれば、もっと見栄えのよいものが作れると思います。

・テスター風ゲージを作ってみる

1.背景画像として[イメージ]レイヤーを使ってもイイんですが、[バーの色][バーの背景色]を真っ白にした太い[残量バー]レイヤーを背景画像代わりに置きます。
2.[状態表示文字列]レイヤーを2つ置き、残量% と 給電種別 を表示させます。
3.[残量サークル]レイヤーを置き、残量%に覆いかぶさるように、中心座標・[半径][線の幅]を調整します。中心座標はウィジェットをはみ出しても構いません。

4.[0%の絶対角度][100%の絶対角度]を調整します。
このサークルが以下の基準となりますので、パラメータをメモっておきます。

5.サークルの[開始位置のタイプ]:「ある%に固定」、[開始位置]:「0%」、[終了位置のタイプ]:「ある%に固定」、[終了位置]:「20%」、[線色]:赤、[背景色]:完全透過、に設定し、固定された赤いスケールにする。
6.同じようなサークルを2つ作り、それぞれ20~40%で黄色、40~100%で緑色に設定する。
これで ゲージスケールが完成した。
7.新規に[残量サークル]を追加し、[開始位置のタイプ]:「残量から%で相対指定」、[開始位置]:「ー1.5%」、[終了位置のタイプ]:「残量から%で相対指定」、[終了位置]:「1.5%」、[線色]:黒、[背景色]:完全透過、に設定して、指示針とする。
8.[状態表示文字列]’E’と’F’を追加し、位置を調整して完成。

下向きゲージや横向きゲージ、サークルではなくバーを用いて作ることもできます。

…とりあえず今はここまで

0 件のコメント:

コメントを投稿