zoukankan      html  css  js  c++  java

  • Android-做个性化的进度条

     1.案例效果图

    progress[1]

    2.准备素材

       image

              progress1                               progress2

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

    3.原理

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

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

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

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    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" />

    image

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

    4.2 找到样式定义的位置

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

              image

         样式定义的内容如下         

    image

    重点研究：

    android:progressDrawable：进度条的样式

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

    在android-sdk-windowsplatformsandroid-14data es目下搜索progress_horizontal.xml文件，搜索结果如下：

        image

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

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    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

    image

    progress_vertical.xml文件代码如下

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    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.应用自定义的样式 

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    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.    
    8.     <ProgressBar  
    9.         android:id="@+id/pbPic"  
    10.         style="@android:style/Widget.ProgressBar.Horizontal"  
    11.         android:layout_width="50dp"  
    12.         android:layout_height="68dp"  
    13.         android:background="@drawable/progress2"  
    14.         android:max="100"  
    15.         android:progress="0"  
    16.         android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->  
    17.    
    18.     <TextView  
    19.         android:id="@+id/txtProgress"  
    20.         android:layout_width="wrap_content"  
    21.         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.点击按钮模拟进度滚动的效果

    [java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    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.                                        }  
    31.                                   }).start();  
    32.                  }  
    33.            });  
    34.       }</span>  
    35. }  
    <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>
}

     
  • 相关阅读:
    HTML 5 音频
    HTML 5 视频
    HTMl链接- target/ name
    HTML 链接
    OGNL_一点
    struts_表单得到数据
    MySql_十六进制值
    HTML 事件属性(下)
    作业3-2 输入一个正整数 n，再输入 n 个学生的成绩，计算平均成绩，并统计所有及格学生的人数
    作业3-1 .输入一个整数 x，计算并输出下列分段函数 sign(x) 的值
  • 原文地址：https://www.cnblogs.com/hudabing/p/4571113.html
Copyright © 2011-2022 走看看