devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android实用笔记——使用ProgressBar实现进度条

作者：不正经 | 2024-03-18 16:34:15

赞

踩

android progressbar 监听进度

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1、ProgressBar的分类

    可以精确显示进度（可以显示刻度或者精确百分比）

222858_jplA_2725918.png

    不可以精确显示精度（一直转，类似于一个过场动画）

222906_s357_2725918.png

 

2、关键属性和方法

    指定ProgressBar显示风格

        style="?android:attr/progressBarStyleLarge"    大环形进度条

        style="?android:attr/progressBarStyleSmall"    小环形进度条

        style="?android:attr/progressBarStyleHorizontal"    水平进度条

    ProgressBar的关键属性

        android:max="100"    最大显示进度

        android:progress="50"    第一显示进度

        android:secondaryProgress="80"    第二显示进度

        android:indenterminate="true"    设置是否精确显示（true表示不精确显示进度，false表示精确显示进度）

    ProgressBar的关键方法

        setProgress(int)    设置第一进度

        setSecondaryProgress(int)    设置第二进度

        setProgress()    获取第一进度

        getSecondaryProgress()    获取第二进度

        incrementProgressBy(int)    增加或减少第一进度

        incrementSecondaryProgressBy(int)    增加或减少第二进度

        getMax()    获取最大进度

 

3、标题栏中的ProgressBar

  1. package com.example.myandroidprogressbar;
  2.  
  3. import android.os.Bundle;
  4. import android.app.Activity;
  5. import android.view.Menu;
  6. import android.view.Window;
  7.  
  8. public class MainActivity extends Activity {
  9.  
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         
  14.         //1、启用窗口特征，启用带进度何不带进度的两种进度条
  15.         requestWindowFeature(Window.FEATURE_PROGRESS);
  16.         requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
  17.         
  18.         setContentView(R.layout.activity_main);
  19.         
  20.         //显示两种进度条
  21.         setProgressBarVisibility(true);
  22.         setProgressBarIndeterminateVisibility(true);
  23.         //Max=10000
  24.         setProgress(600);
  25.     }
  26. }

222958_SFgL_2725918.png

    

4、界面中四种不同形式的进度条

    修改activity_main.xml文件如下

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingBottom="@dimen/activity_vertical_margin"
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"
  7.     android:paddingRight="@dimen/activity_horizontal_margin"
  8.     android:paddingTop="@dimen/activity_vertical_margin"
  9.     tools:context=".MainActivity" >
  10.  
  11.     <ProgressBar
  12.         android:id="@+id/progressBar1"
  13.         style="?android:attr/progressBarStyleLarge"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:layout_alignParentLeft="true"
  17.         android:layout_alignParentTop="true" />
  18.  
  19.     <ProgressBar
  20.         android:id="@+id/progressBar2"
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content"
  23.         android:layout_alignBottom="@+id/progressBar1"
  24.         android:layout_toRightOf="@+id/progressBar1" />
  25.     
  26.     <ProgressBar
  27.         android:id="@+id/progressBar3"
  28.         style="?android:attr/progressBarStyleSmall"
  29.         android:layout_width="wrap_content"
  30.         android:layout_height="wrap_content"
  31.         android:layout_above="@+id/horiz"
  32.         android:layout_toRightOf="@+id/progressBar2" />
  33.  
  34.     <ProgressBar
  35.         android:id="@+id/horiz"
  36.         style="?android:attr/progressBarStyleHorizontal"
  37.         android:layout_width="match_parent"
  38.         android:layout_height="wrap_content"
  39.         android:layout_alignLeft="@+id/progressBar1"
  40.         android:layout_below="@+id/progressBar1"
  41.         android:max="100"
  42.         android:progress="50"
  43.         android:secondaryProgress="80" />
  44.       
  45. </RelativeLayout>

234312_dSrB_2725918.png

 

5、通过按钮改变进度条的数值并动态改变

    修改activity_main.xml文件

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingBottom="@dimen/activity_vertical_margin"
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"
  7.     android:paddingRight="@dimen/activity_horizontal_margin"
  8.     android:paddingTop="@dimen/activity_vertical_margin"
  9.     tools:context=".MainActivity" >
  10.  
  11.     <ProgressBar
  12.         android:id="@+id/horiz"
  13.         style="?android:attr/progressBarStyleHorizontal"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:max="100"
  17.         android:progress="50"
  18.         android:secondaryProgress="80" />
  19.     
  20.     <Button
  21.         android:id="@+id/add"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:layout_alignLeft="@+id/horiz"
  25.         android:layout_below="@+id/horiz"
  26.         android:text="@string/add" />
  27.  
  28.     <Button
  29.         android:id="@+id/reduce"
  30.         android:layout_width="wrap_content"
  31.         android:layout_height="wrap_content"
  32.         android:layout_alignRight="@+id/add"
  33.         android:layout_below="@+id/add"
  34.         android:text="@string/reduce" />
  35.  
  36.     <Button
  37.         android:id="@+id/reset"
  38.         android:layout_width="wrap_content"
  39.         android:layout_height="wrap_content"
  40.         android:layout_alignLeft="@+id/reduce"
  41.         android:layout_below="@+id/reduce"
  42.         android:text="@string/reset" />
  43.  
  44.     <TextView
  45.         android:id="@+id/text"
  46.         android:layout_width="wrap_content"
  47.         android:layout_height="wrap_content"
  48.         android:layout_alignLeft="@+id/reset"
  49.         android:layout_alignRight="@+id/horiz"
  50.         android:layout_below="@+id/reset"
  51.         android:layout_marginTop="16dp" />
  52.  
  53.  
  54. </RelativeLayout>

    修改MainActivity.java文件

  1. package com.example.myandroidprogressbar;
  2.  
  3. import android.os.Bundle;
  4. import android.R.integer;
  5. import android.app.Activity;
  6. import android.view.Menu;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.view.Window;
  10. import android.widget.Button;
  11. import android.widget.ProgressBar;
  12. import android.widget.TextView;
  13.  
  14. public class MainActivity extends Activity implements OnClickListener{
  15. 	//1、声明部分控件
  16. 	private ProgressBar progress;
  17. 	private Button add;
  18. 	private Button reduce;
  19. 	private Button reset;
  20. 	private TextView text;	
  21. 	
  22.     @Override
  23.     protected void onCreate(Bundle savedInstanceState) {
  24.         super.onCreate(savedInstanceState);        
  25.         
  26.         setContentView(R.layout.activity_main);
  27.  
  28.         //2、初始化控件
  29.         init();
  30.     }
  31.  
  32. 	private void init() {
  33. 		// TODO Auto-generated method stub
  34. 		//3、绑定
  35. 		progress=(ProgressBar) findViewById(R.id.horiz);
  36. 		add=(Button) findViewById(R.id.add);
  37. 		reduce=(Button) findViewById(R.id.reduce);
  38. 		reset=(Button) findViewById(R.id.reset);
  39. 		text=(TextView) findViewById(R.id.text);
  40. 		
  41. 		//4、获取各进度条进度
  42. 		//获取第一进度条的进度
  43. 		//int first=progress.getProgress();
  44. 		//湖区第二进度条的进度
  45. 		//int second=progress.getSecondaryProgress();
  46. 		//获取进度条的最大进度
  47. 		//int max=progress.getMax();
  48. 		//5、将数据显示到textView中
  49. 		//text.setText("第一进度的百分比："+(int)(first/(float)max*100)+
  50. 				//"% 第二进度的百分比："+(int)(second/(float)max*100)+"%");
  51. 		add.setOnClickListener(this);
  52. 		reduce.setOnClickListener(this);
  53. 		reset.setOnClickListener(this);
  54. 	}
  55.  
  56. 	//6、设置按钮点击响应事件，改变进度条数据
  57. 	@Override
  58. 	public void onClick(View v) {
  59. 		// TODO Auto-generated method stub
  60. 		switch(v.getId()){
  61. 		case R.id.add:
  62. 			//增加第一进度和第二进度10个刻度
  63. 			progress.incrementProgressBy(10);
  64. 			progress.incrementSecondaryProgressBy(10);
  65. 			break;
  66. 			
  67. 		case R.id.reduce:
  68. 			//减少第一进度和第二进度10个刻度
  69. 			progress.incrementProgressBy(-10);
  70. 			progress.incrementSecondaryProgressBy(-10);
  71. 			break;
  72. 			
  73. 		case R.id.reset:
  74. 			//重置
  75. 			progress.setProgress(50);
  76. 			progress.setSecondaryProgress(80);		
  77. 			break;
  78. 			
  79. 		}
  80. 		//7、因为每一次点击都会调用onClick这个函数，并且一定会执行switch这个判断。
  81. 		//所以没必要在每一个分支中刷新textView的内容，只需要在switch分支外面写就好了，
  82. 		//之前的向textView中写入数据的应该注释掉
  83. 		text.setText("第一进度的百分比："+(int)(progress.getProgress()/(float)progress.getMax()*100)+
  84. 				"% 第二进度的百分比："+(int)(progress.getSecondaryProgress()/(float)progress.getMax()*100)+"%");
  85. 	}
  86. }

004203_5c2u_2725918.png

004225_9oeE_2725918.png

004239_TT7J_2725918.png

 

6、对话框形式的进度条（ProgressDialog）

    修改activity_main.xml文件

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingBottom="@dimen/activity_vertical_margin"
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"
  7.     android:paddingRight="@dimen/activity_horizontal_margin"
  8.     android:paddingTop="@dimen/activity_vertical_margin"
  9.     tools:context=".MainActivity" >
  10.  
  11.     <Button
  12.         android:id="@+id/show"
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:layout_alignParentTop="true"
  16.         android:layout_centerHorizontal="true"
  17.         android:layout_marginTop="86dp"
  18.         android:text="显示进度条对话框" />
  19.  
  20. </RelativeLayout>

    修改MainActivity.java文件

  1. package com.example.myandroidprogressdialog;
  2.  
  3. import android.os.Bundle;
  4. import android.app.Activity;
  5. import android.app.Dialog;
  6. import android.app.ProgressDialog;
  7. import android.content.DialogInterface;
  8. import android.view.Menu;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.Button;
  12. import android.widget.Toast;
  13.  
  14. public class MainActivity extends Activity implements OnClickListener{
  15. 	//1、声明progressDialog的对象以及按钮
  16. 	private ProgressDialog prodialog;
  17. 	private Button show;
  18. 	
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_main);
  23.         
  24.         init();
  25.     }
  26.  
  27. 	private void init() {
  28. 		// TODO Auto-generated method stub
  29. 		//2、绑定
  30. 		show=(Button) findViewById(R.id.show);
  31. 		//3、设置监听器
  32. 		show.setOnClickListener(this);
  33. 	}
  34.  
  35. 	@Override
  36. 	public void onClick(View arg0) {
  37. 		// TODO Auto-generated method stub
  38. 		//4、设置页面显示风格
  39. 		//新建progressDialog对象
  40. 		prodialog=new ProgressDialog(MainActivity.this);
  41. 		//给对话框设置显示风格
  42. 		prodialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
  43. 		//设置标题
  44. 		prodialog.setTitle("哈哈哈");
  45. 		//设置对话框里的而文字信息
  46. 		prodialog.setMessage("我好聪明啊");
  47. 		//设置图标
  48. 		prodialog.setIcon(R.drawable.ic_launcher);
  49. 		
  50. 		//5、设定关于progressBar的一些属性
  51. 		//设定最大进度
  52. 		prodialog.setMax(100);
  53. 		//设定初始化进度
  54. 		prodialog.incrementProgressBy(50);
  55. 		//进度条是明确显示进度的
  56. 		prodialog.setIndeterminate(false);
  57. 		
  58. 		//6、设定一个确定按钮
  59. 		prodialog.setButton(DialogInterface.BUTTON_POSITIVE, "确定", new DialogInterface.OnClickListener() {
  60. 			
  61. 			@Override
  62. 			public void onClick(DialogInterface dialog, int which) {
  63. 				// TODO Auto-generated method stub
  64. 				Toast.makeText(MainActivity.this,"快点爱上我", Toast.LENGTH_SHORT);
  65. 			}
  66. 		});
  67. 		
  68. 		//7、是否可以通过返回按钮退出对话框
  69. 		prodialog.setCancelable(true);
  70. 		
  71. 		//8、显示progressDialog
  72. 		prodialog.show();
  73. 	}
  74.     
  75. }

011252_eNBC_2725918.png、

011300_wObr_2725918.png

 

7、自定义ProgressBar的样式

    首先我们需要知道系统预定义的水平进度条的样式是如何加载的。这样我们需要回到activity_main.xml文件中来。

    我们注意到下面一行代码：

        style="?android:attr/progressBarStyleHorizontal"

    事实上，他真正的加载文件位于

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

    我们通过ctrl+鼠标左键点击引号中的位置，就可以看到系统自带的横向进度条的样式

  1.     <style name="Widget.ProgressBar.Horizontal">
  2.         <item name="android:indeterminateOnly">false</item>
  3.         <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
  4.         <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  5.         <item name="android:minHeight">20dip</item>
  6.         <item name="android:maxHeight">20dip</item>
  7.         <item name="android:mirrorForRtl">true</item>
  8.     </style>

    其中的android:progressDrawable可以去加载一个自己自定义的布局样式的一个文件。我们同样用ctrl+鼠标左键打开这里的样式文件，看看系统是如何设定的

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!--背景  -->
  3.     <item android:id="@android:id/background">
  4.         <shape>
  5.             <!--圆角  -->
  6.             <corners android:radius="5dip" />
  7.             <!--渐变色  -->
  8.             <gradient
  9.                     <!--起始颜色  -->
  10.                     android:startColor="#ff9d9e9d"
  11.                     <!--中间颜色  -->
  12.                     android:centerColor="#ff5a5d5a"
  13.                     android:centerY="0.75"
  14.                     <!--终止颜色  -->
  15.                     android:endColor="#ff747674"
  16.                     android:angle="270"
  17.             />
  18.         </shape>
  19.     </item>
  20.     
  21.     <!--第二进度条  -->
  22.     <item android:id="@android:id/secondaryProgress">
  23.         <clip>
  24.             <shape>
  25.                 <corners android:radius="5dip" />
  26.                 <gradient
  27.                         android:startColor="#80ffd300"
  28.                         android:centerColor="#80ffb600"
  29.                         android:centerY="0.75"
  30.                         android:endColor="#a0ffcb00"
  31.                         android:angle="270"
  32.                 />
  33.             </shape>
  34.         </clip>
  35.     </item>
  36.     
  37.     <!--第一进度条  -->
  38.     <item android:id="@android:id/progress">
  39.         <clip>
  40.             <shape>
  41.                 <corners android:radius="5dip" />
  42.                 <gradient
  43.                         android:startColor="#ffffd300"
  44.                         android:centerColor="#ffffb600"
  45.                         android:centerY="0.75"
  46.                         android:endColor="#ffffcb00"
  47.                         android:angle="270"
  48.                 />
  49.             </shape>
  50.         </clip>
  51.     </item>
  52.     
  53. </layer-list>

    不难发现，我们可以自己对他的颜色进行修改，以达到自定义的目的。这里我简单把颜色修改了一下

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!--背景  -->
  3.     <item android:id="@android:id/background">
  4.         <shape>
  5.             <!--圆角  -->
  6.             <corners android:radius="5dip" />
  7.             <!--渐变色  -->
  8.             <gradient
  9.                     <!--起始颜色  -->
  10.                     android:startColor="#B9A4FF"
  11.                     <!--中间颜色  -->
  12.                     android:centerColor="#C6B7FF"
  13.                     android:centerY="0.75"
  14.                     <!--终止颜色  -->
  15.                     android:endColor="#C3B2FF"
  16.                     android:angle="270"
  17.             />
  18.         </shape>
  19.     </item>
  20.     
  21.     <!--第二进度条  -->
  22.     <item android:id="@android:id/secondaryProgress">
  23.         <clip>
  24.             <shape>
  25.                 <corners android:radius="5dip" />
  26.                 <gradient
  27.                         android:startColor="#57E8FF"
  28.                         android:centerColor="#74EBFF"
  29.                         android:centerY="0.75"
  30.                         android:endColor="#8EEFFF"
  31.                         android:angle="270"
  32.                 />
  33.             </shape>
  34.         </clip>
  35.     </item>
  36.     
  37.     <!--第一进度条  -->
  38.     <item android:id="@android:id/progress">
  39.         <clip>
  40.             <shape>
  41.                 <corners android:radius="5dip" />
  42.                 <gradient
  43.                         android:startColor="#ffffd300"
  44.                         android:centerColor="#ffffb600"
  45.                         android:centerY="0.75"
  46.                         android:endColor="#ffffcb00"
  47.                         android:angle="270"
  48.                 />
  49.             </shape>
  50.         </clip>
  51.     </item>
  52.     
  53. </layer-list>

    运行即可得到自定义进度条的结果，可自行与本文之前的截图对比，可以看到很明显的差别，尽管颜色丑了点。

013724_bKTV_2725918.png

    希望大家能以小见大，做一些更有意思的尝试。

转载于:https://my.oschina.net/CoderBleak/blog/718751

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/264354?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号