2011年6月4日土曜日

indeterminateなProgressBarのカスタマイズ

androidの画面はデフォルトだと真っ黒な背景だったりします。
で、だんだん戦闘力(主に女子力)があがってきたアプリは背景が真っ白になったりしていきますよね。
そうすると、デフォルトのindeterminateなProgressBarは真っ白な画像がぐるぐるしているので何やってるのかわからない状況になりますね。

かといって、本格的にカスタマイズしようとするとあれこれ考えて大変です。
俺は楽して女子力をあげたいです。
で、それを簡単に変更する方法が以下です。
大体3分でできます。


[手順1]
まずおもむろにandroidSDKのフォルダをあさります。
android-sdk-windows\platforms\android-7\data\res\drawable
とかをあさると
progress_large.xml
progress_large_white.xml
とかいますね。

中をみると
android:drawable="@drawable/spinner_white_76"
android:pivotX="50%"
android:pivotY="50%"
android:framesCount="12"
android:frameDuration="100" />
こんなんなってます。
android:drawable="@drawable/spinner_white_76"ってなに?
ということで
android-sdk-windows\platforms\android-7\data\res\drawable-hdpi
なんかをあさると
spinner_white_76.png
がいました。
なんとなく見覚えのある画像ですね。

[手順2]
必要な素材が見つかったので次はお料理です。
progress_large_white.xmlはprogress_large_pink.xmlとかにしておきましょうか。
pinkは女子力があがりそうですよ。

中のテキストも
android:drawable="@drawable/spinner_white_76"
android:drawable="@drawable/spinner_pink_76"
とかしちゃいましょう。
どうせ見えませんが、潜在的なパラメータが変わるはずです。
android:framesCount="12"
android:frameDuration="100"
はなんだかEclipseがビルドできないよって怒ってます。
どうやら新しいバージョンのOSで使えるみたいですが良くわからないので消しちゃいましょう。

次は画像です。
事前にこのあたりから採取しておいたGIMPを使います。
そっけない色のspinner_white_76.pngを読み込むと、なんだか白い画像だったはずなのに後ろに灰色のチェック柄が見えますね。
これは透明色を表すアルファ値みたいです。

まず描画色を変更しましょう。
ツールボックスの描画色をダブルクリックして「描画色を変更」ウィンドウを出したら
HTML表記のあたりに好きなRGB値を設定します。

次に「レイヤ、チャンネル、パス、アンドゥ」ウィンドウがどこかにいるはずなので、その中のチャンネルタブを選びましょう。
そうすると
 目 白黒画像 赤
 目 白黒画像 青
 目 白黒画像 緑
 目 白黒画像 アルファ値
とかなってますね。
その状態から、せっかくだから俺はこのアルファ値を選ぶぜなんていいながら「アルファ値」だけをクリックしてください。
 目 白黒画像 赤     :青背景
 目 白黒画像 青     :青背景
 目 白黒画像 緑     :青背景
 目 白黒画像 アルファ値 :白背景
になりましたか?

そこまでいけば準備完了です。


[手順3]
あとはさきほど選んでおいた描画色を塗りたくりましょう。
メニューから編集→描画色で塗りつぶすを選択すると・・・?
透明部分は残したまま色が塗れましたね。

こんなに女子力のあがった画像はspinner_pink_76.pngとかしておきます。

[手順4]
最後に、作成したファイルをプロジェクトにほおりこみます。

res\drawableにprogress_large_pink.xmlとspinner_pink_76.pngを格納して、
目的のProgressBarに
 android:indeterminateDrawable="@drawable/progress_large"
>
と設定しちゃいます。


[完成]
さぁ起動してみましょう!
思わず「あ、やべ、女子力あがりすぎちゃった。」とか言うはずです。
俺は無意識にツイートしてしまいました。

まだ2分くらいしかたってませんよね。やったーです。
ここまで読んだ人はありがとうって言ってくれたら良いと思います。

それではまた、いつかお会いしましょう。

0 件のコメント:

コメントを投稿