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

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

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

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

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

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

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

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

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

	１．背景画像として［イメージ］レイヤーを使ってもイイんですが、［バーの色］［バーの背景色］を真っ白にした太い［残量バー］レイヤーを背景画像代わりに置きます。
	２．［状態表示文字列］レイヤーを２つ置き、残量％ と 給電種別 を表示させます。
	３．［残量サークル］レイヤーを置き、残量％に覆いかぶさるように、中心座標・［半径］［線の幅］を調整します。中心座標はウィジェットをはみ出しても構いません。
	４．［０％の絶対角度］［１００％の絶対角度］を調整します。 このサークルが以下の基準となりますので、パラメータをメモっておきます。
	５．サークルの［開始位置のタイプ］：「ある％に固定」、［開始位置］：「０％」、［終了位置のタイプ］：「ある％に固定」、［終了位置］：「２０％」、［線色］：赤、［背景色］：完全透過、に設定し、固定された赤いスケールにする。
	６．同じようなサークルを２つ作り、それぞれ２０～４０％で黄色、４０～１００％で緑色に設定する。 これで ゲージスケールが完成した。
	７．新規に［残量サークル］を追加し、［開始位置のタイプ］：「残量から％で相対指定」、［開始位置］：「ー１.５％」、［終了位置のタイプ］：「残量から％で相対指定」、［終了位置］：「１.５％」、［線色］：黒、［背景色］：完全透過、に設定して、指示針とする。
	８．［状態表示文字列］’E’と’F’を追加し、位置を調整して完成。

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

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