Android-做个性化的进度条

2022-03-27 21:49:33

1.案例效果图

Android-做个性化的进度条

2.准备素材

Android-做个性化的进度条

Android-做个性化的进度条                               Android-做个性化的进度条

progress1.png(78*78)              progress2.png(78*78)

3.原理

采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的)。另一张是进度条的图片(一般采用颜色比较深的图片)。进度在滚动时：进度图片逐步显示，背景图片逐步隐藏，达到上面的效果。

4.灵感来自Android控件提供的源码

4.1 默认带进度的进度条，如下图

  1. <ProgressBar
  2. android:id="@+id/progressBar2"
  3. style="@android:style/Widget.ProgressBar.Horizontal"
  4. android:layout_width="268dp"
  5. android:layout_height="wrap_content"
  6. android:progress="45" />
 <ProgressBar

    android:id="@+id/progressBar2"

    style="@android:style/Widget.ProgressBar.Horizontal"

    android:layout_width="268dp"

     android:layout_height="wrap_content"

    android:progress="45" />

Android-做个性化的进度条

注意：关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上，按下Ctrl键，出现超链接，点击超链接跳转到样式的定义位置

Android-做个性化的进度条

样式定义的内容如下

Android-做个性化的进度条

重点研究：

android:progressDrawable：进度条的样式

@android:drawable/progress_horizontal：样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件，搜索结果如下：

Android-做个性化的进度条

打开progress_horizontal.xml文件，内容如下

  1. <layer-listxmlns:androidlayer-listxmlns:android="http://schemas.android.com/apk/res/android">
  2. <itemandroid:iditemandroid:id="@android:id/background">
  3. <shape>
  4. <cornersandroid:radiuscornersandroid:radius="5dip"/>
  5. <gradient
  6. android:startColor="#ff9d9e9d"
  7. android:centerColor="#ff5a5d5a"
  8. android:centerY="0.75"
  9. android:endColor="#ff747674"
  10. android:angle="270"
  11. />
  12. </shape>
  13. </item>
  14. <itemandroid:iditemandroid:id="@android:id/secondaryProgress">
  15. <clip>
  16. <shape>
  17. <cornersandroid:radiuscornersandroid:radius="5dip"/>
  18. <gradient
  19. android:startColor="#80ffd300"
  20. android:centerColor="#80ffb600"
  21. android:centerY="0.75"
  22. android:endColor="#a0ffcb00"
  23. android:angle="270"
  24. />
  25. </shape>
  26. </clip>
  27. </item>
  28. <itemandroid:iditemandroid:id="@android:id/progress">
  29. <clip>
  30. <shape>
  31. <cornersandroid:radiuscornersandroid:radius="5dip"/>
  32. <gradient
  33. android:startColor="#ffffd300"
  34. android:centerColor="#ffffb600"
  35. android:centerY="0.75"
  36. android:endColor="#ffffcb00"
  37. android:angle="270"
  38. />
  39. </shape>
  40. </clip>
  41. </item>
  42. </layer-list>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">

     <itemandroid:id="@android:id/background">

        <shape>

             <cornersandroid:radius="5dip"/>

             <gradient

                     android:startColor="#ff9d9e9d"

                     android:centerColor="#ff5a5d5a"

                     android:centerY="0.75"

                    android:endColor="#ff747674"

                     android:angle="270"

            />

         </shape>

    </item>

     <itemandroid:id="@android:id/secondaryProgress">

         <clip>

             <shape>

                 <cornersandroid:radius="5dip"/>

                 <gradient

                         android:startColor="#80ffd300"

                        android:centerColor="#80ffb600"

                         android:centerY="0.75"

                        android:endColor="#a0ffcb00"

                         android:angle="270"

                 />

            </shape>

        </clip>

    </item>

    <itemandroid:id="@android:id/progress">

         <clip>

             <shape>

                 <cornersandroid:radius="5dip"/>

                 <gradient

                         android:startColor="#ffffd300"

                         android:centerColor="#ffffb600"

                         android:centerY="0.75"

                        android:endColor="#ffffcb00"

                         android:angle="270"

                 />

             </shape>

         </clip>

     </item>

 </layer-list>

释义：

<item android:id="@android:id/background">：定义进度条的背景样式

<item android:id="@android:id/secondaryProgress">：辅助进度条的样式

<item android:id="@android:id/progress">：进度条的样式

思考：如果我想做垂直进度条，怎么办了？

关键在clip元素的属性上做修改

<clip

    android:clipOrientation="vertical"    定义滚动的方向 vertical为垂直方向

    android:drawable="@drawable/progress1"  定义进度的图片

    android:gravity="bottom" >  定义进度的开始位置

</clip>

5.定义样式文件progress_vertical.xml

Android-做个性化的进度条

progress_vertical.xml文件代码如下

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?>
  2. <layer-listxmlns:androidlayer-listxmlns:android="http://schemas.android.com/apk/res/android">
  3. <itemandroid:iditemandroid:id="@android:id/progress">
  4. <clip
  5. android:clipOrientation="vertical"
  6. android:drawable="@drawable/progress1"
  7. android:gravity="bottom">
  8. </clip>
  9. </item>
  10. </layer-list>
<?xmlversion="1.0"encoding="utf-8"?>

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">

     <itemandroid:id="@android:id/progress">

        <clip

            android:clipOrientation="vertical"

        android:drawable="@drawable/progress1"

         android:gravity="bottom">

      </clip>

 </item>

</layer-list>

6.应用自定义的样式

  1. <Button
  2. android:id="@+id/btStart"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_marginTop="150dp"
  6. android:text="开始"/>
  7. <ProgressBar
  8. android:id="@+id/pbPic"
  9. style="@android:style/Widget.ProgressBar.Horizontal"
  10. android:layout_width="50dp"
  11. android:layout_height="68dp"
  12. android:background="@drawable/progress2"
  13. android:max="100"
  14. android:progress="0"
  15. android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->
  16. <TextView
  17. android:id="@+id/txtProgress"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"/>
<Button

        android:id="@+id/btStart"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="150dp"

        android:text="开始"/>

    <ProgressBar

        android:id="@+id/pbPic"

        style="@android:style/Widget.ProgressBar.Horizontal"

        android:layout_width="50dp"

        android:layout_height="68dp"

        android:background="@drawable/progress2"

        android:max="100"

        android:progress="0"

        android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->

    <TextView

        android:id="@+id/txtProgress"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"/>

7.点击按钮模拟进度滚动的效果

  1. <span style="color:#333333;">public class  ProgressActivity extends Activity {
  2. ProgressBar pb = null;
  3. TextView txtProgress;
  4. Handler handler = new Handler();
  5. @Override
  6. publicvoid onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.main);
  9. System.out.println("主题=" + getTheme() + "");
  10. pb = (ProgressBar) findViewById(R.id.pbPic);
  11. Button btnStart = (Button) findViewById(R.id.btStart);//按钮
  12. txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度
  13. btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件
  14. publicvoid onClick(View v) {
  15. new Thread(new Runnable() {//创建并启动线程，使用线程执行模拟的任务
  16. publicvoid run() {
  17. for (inti = 0; i < 100; i++) { //循环100遍
  18. try {
  19. handler.post(new Runnable() { //更新界面的数据
  20. publicvoid run() {
  21. pb.incrementProgressBy(1);//增加进度
  22. txtProgress.setText(pb.getProgress() + "%");//显示完成的进度
  23. }
  24. });
  25. Thread.sleep(100);
  26. } catch (InterruptedException e) {
  27. }
  28. }
  29. }
  30. }).start();
  31. }
  32. });
  33. }</span>
  34. }
<span style="color:#333333;">public class  ProgressActivity extends Activity {

      ProgressBar pb = null;

      TextView txtProgress;

      Handler handler = new Handler();

      @Override

      publicvoid onCreate(Bundle savedInstanceState) {

           super.onCreate(savedInstanceState);

           setContentView(R.layout.main);

           System.out.println("主题=" + getTheme() + "");

           pb = (ProgressBar) findViewById(R.id.pbPic);

           Button btnStart = (Button) findViewById(R.id.btStart);//按钮

           txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度

           btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件

                 publicvoid onClick(View v) {

                      new Thread(new Runnable() {//创建并启动线程，使用线程执行模拟的任务

                                       publicvoid run() {

                                             for (inti = 0; i < 100; i++) { //循环100遍

                                                  try {

                                                        handler.post(new Runnable() { //更新界面的数据

                                                              publicvoid run() {

                                                                   pb.incrementProgressBy(1);//增加进度

                                                                   txtProgress.setText(pb.getProgress() + "%");//显示完成的进度

                                                              }

                                                        });

                                                        Thread.sleep(100);

                                                  } catch (InterruptedException e) {

                                                  }

                                             }

                                       }

                                  }).start();

                 }

           });

      }</span>

}

 

上一篇：MapReduce架构设计


下一篇：JavaScript的那些事儿