Clever Geek Handbook

AndroidのカスタマイズProgressBar

定期的に、標準の円形ProgressBarを独自のものに置き換える必要があります。



通常、人々の視覚はより鋭いため、ProgressBarのいくつかのオプションの例をすぐに紹介します







プリローダーを生成するための いくつかの リソースはHabrで議論されました。それらを使用して、後でProgressBarに移動するイメージを作成できます。



ProgressBarをカスタマイズするには、いくつかの非常に簡単な手順に従う必要があります。



1. Androidプロジェクトを作成する

2.ローダーを含むファイルをプロジェクトに追加します（res / drawable / loader1.pngなど）

3.アニメーションファイルを作成します（たとえば、res / drawable / loader1_progress.xml）



  1. <？ xml バージョン = "1.0" encoding = "utf-8" ？ >
  2. < animated-rotate xmlns：android = " schemas.android.com/apk/res/android "
  3. android： drawable = "@ drawable / loader1"
  4. android：pivotX = "50％"
  5. android：pivotY = "50％" />


4. ProgressBarをActivityに配置し、前の手順で作成したアニメーションリソース（res / layouts /など）を使用するよう指示します



  1. <？ xml バージョン = "1.0" encoding = "utf-8" ？ >
  2. < LinearLayout xmlns：android = " schemas.android.com/apk/res/android "
  3. android：layout_width = "fill_parent"
  4. android：layout_height = "fill_parent"
  5. android：orientation = "vertical" >
  6. < ProgressBar
  7. android：indeterminateDrawable = "@ drawable / loader1_progress"
  8. android：layout_height = "50dp"
  9. android：layout_width = "50dp" >
  10. </ ProgressBar >
  11. </ LinearLayout >


既製のローダーのイメージを使用することに加えて、Android機能を使用して手動でローダーを作成することもできます（たとえば、/ res / drawable / custom_progress.xml）

リングの形状の例を考えてみましょう。 色の形式は#aarrggbbです。aaはアルファ値（透明度）を示します。



  1. <？ xml バージョン = "1.0" encoding = "utf-8" ？ >
  2. < animated-rotate xmlns：android = " schemas.android.com/apk/res/android "
  3. android：pivotX = "50％"
  4. android：pivotY = "50％" >
  5. < 形状 アンドロイド：形状 =「リング」
  6. android：innerRadiusRatio = "5"
  7. android：thickRatio = "6"
  8. android：useLevel = "false" >
  9. < 勾配
  10. android：type = "sweep"
  11. android：useLevel = "false"
  12. android：centerY = "0.10"
  13. android：startColor = "＃0020ffcc"
  14. android：centerColor = "＃8820ffcc"
  15. android：endColor = "＃ff20ffcc" />
  17. < サイズ android：width = "18dip"
  18. android：height = "18dip" />
  19. </ 形状 >
  20. </ アニメーション回転 >




1つのProgressBarの複数の画像がある場合



その後、次のメソッドを使用できます（たとえば、/ res / drawable / custom_progress_blue.xml）：



  1. <？ xml バージョン = "1.0" encoding = "utf-8" ？ >
  2. < アニメーションリスト アンドロイド：oneshot = "false"
  3. xmlns：android = " schemas.android.com/apk/res/android " >
  4. < アイテム Android：期間 = "100" >
  5. < scale android： drawable = "@ drawable / blue_1" android：scaleGravity = "center" />
  6. </ アイテム >
  7. < アイテム Android：期間 = "100" >
  8. < scale android： drawable = "@ drawable / blue_2" android：scaleGravity = "center" />
  9. </ アイテム >
  10. < アイテム Android：期間 = "100" >
  11. < scale android： drawable = "@ drawable / blue_3" android：scaleGravity = "center" />
  12. </ アイテム >
  13. < アイテム Android：期間 = "100" >
  14. < scale android： drawable = "@ drawable / blue_4" android：scaleGravity = "center" />
  15. </ アイテム >
  16. < アイテム Android：期間 = "100" >
  17. < scale android： drawable = "@ drawable / blue_5" android：scaleGravity = "center" />
  18. </ アイテム >
  19. < アイテム Android：期間 = "100" >
  20. < scale android： drawable = "@ drawable / blue_6" android：scaleGravity = "center" />
  21. </ アイテム >
  22. < アイテム Android：期間 = "100" >
  23. < scale android： drawable = "@ drawable / blue_7" android：scaleGravity = "center" />
  24. </ アイテム >
  25. < アイテム Android：期間 = "100" >
  26. < scale android： drawable = "@ drawable / blue_8" android：scaleGravity = "center" />
  27. </ アイテム >
  28. < アイテム Android：期間 = "100" >
  29. < scale android： drawable = "@ drawable / blue_9" android：scaleGravity = "center" />
  30. </ アイテム >
  31. < アイテム Android：期間 = "100" >
  32. < scale android： drawable = "@ drawable / blue_10" android：scaleGravity = "center" />
  33. </ アイテム >
  34. < アイテム Android：期間 = "100" >
  35. < scale android： drawable = "@ drawable / blue_11" android：scaleGravity = "center" />
  36. </ アイテム >
  37. < アイテム Android：期間 = "100" >
  38. < scale android： drawable = "@ drawable / blue_12" android：scaleGravity = "center" />
  39. </ アイテム >
  40. </ アニメーションリスト >


サンプルコードはgithubで入手できます。

他にどのようにあなたの計画を実行することができるか提案があれば、書くことをheしないでください。


More articles:


All Articles