android自定义进度条

最新推荐文章于 2016-10-31 22:39:23 发布
最新推荐文章于 2016-10-31 22:39:23 发布
阅读量699 收藏 1
点赞数
分类专栏： android开发 文章标签： android

今天看到一个自定义进度条的文章，觉得很有用，收藏下来.

本文出自 “Android那些事儿” 博客，请务必保留此出处http://winwyf.blog.51cto.com/4561999/857867

android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子

很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如

ok，我们开始吧：

 

一）变换前背景

先来看看progressbar的属性：

 
 
  1. <ProgressBar 
  2.             android:id="@+id/progressBar" 
  3.             style="?android:attr/progressBarStyleHorizontal" 
  4.             android:layout_width="match_parent" 
  5.             android:layout_height="wrap_content" 
  6.             android:layout_margin="5dip" 
  7.             android:layout_toRightOf="@+id/progressBarV" 
  8.             android:indeterminate="false" 
  9.             android:padding="2dip" 
  10.             android:progress="50" /> 

根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml

 
 
  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.     </style> 
看到

<item name="android:progressDrawable">@android:drawable/progress_horizontal</item> 

木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：

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

 看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有

把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等

那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
  3.      
  4.     <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" /> 
  5.      
  6. </layer-list> 

在android:drawable中指定你处理好的图片

然后回到布局中

 
 
  1. <ProgressBar 
  2.             android:id="@+id/progressBar1" 
  3.             android:layout_width="match_parent" 
  4.             android:layout_height="wrap_content" 
  5.             android:layout_below="@+id/progressBar" 
  6.             android:layout_margin="5dip" 
  7.             android:layout_toRightOf="@+id/progressBarV" 
  8.             android:background="@drawable/progress_bg" 
  9.             android:indeterminate="false" 
  10.             android:indeterminateOnly="false" 
  11.             android:maxHeight="20dip" 
  12.             android:minHeight="20dip" 
  13.             android:padding="2dip" 
  14.             android:progress="50" 
  15.             android:progressDrawable="@drawable/progress_horizontal1" /> 

android:background="@drawable/progress_bg"指定背景

android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1

ok，搞定

 注意看，四角还是有圆倒角的，貌似是系统自己加上去的，总之我的图片里面是没有做这个倒角处理的

 

二）纵向进度条

还是得从源码入手，看回progress_horizontal.xml

 
 
  1. <item android:id="@android:id/progress"> 
  2.         <clip> 
  3.             <shape> 
  4.                 <corners android:radius="5dip" /> 
  5.                 <gradient 
  6.                         android:startColor="#ffffd300" 
  7.                         android:centerColor="#ffffb600" 
  8.                         android:centerY="0.75" 
  9.                         android:endColor="#ffffcb00" 
  10.                         android:angle="270" 
  11.                 /> 
  12.             </shape> 
  13.         </clip> 
  14.     </item> 

为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <clip 
  3.     xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:drawable="@drawable/drawable_resource" 
  5.     android:clipOrientation=["horizontal" | "vertical"] 
  6.     android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | 
  7.                      "fill_vertical" | "center_horizontal" | "fill_horizontal" | 
  8.                      "center" | "fill" | "clip_vertical" | "clip_horizontal"] /> 

android:clipOrientation有两个属性，默认为horizontal

android:gravity有两个属性，默认为left

那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX

 
 
  1. <item android:id="@android:id/progress"> 
  2.         <clip 
  3.             android:clipOrientation="vertical" 
  4.             android:gravity = "bottom"> 
  5.             <shape> 
  6.                 <corners android:radius="5dip" /> 
  7.                 <gradient 
  8.                         android:startColor="#ffffd300" 
  9.                         android:centerColor="#ffffb600" 
  10.                         android:centerX="0.75" 
  11.                         android:endColor="#ffffcb00" 
  12.                         android:angle="90" 
  13.                 /> 
  14.             </shape> 
  15.         </clip> 
  16.     </item> 

布局中android:progressDrawable="@drawable/progress_vertical"

ok，搞定，就是这么简单：

 

 

三）弧形bar

这个也许算不上是进度条，用的也不多，最多也就仪表盘用用，不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的，看代码

 
 
  1. public class Arcs extends View {   
  2.     private Paint mArcPaint;   
  3.     private Paint mArcBGPaint;   
  4.    
  5.     private RectF mOval;   
  6.     private float mSweep = 0;   
  7.     private int mSpeedMax = 200; 
  8.     private int mThreshold = 100; 
  9.     private int mIncSpeedValue = 0; 
  10.     private int mCurrentSpeedValue = 0;  
  11.     private float mCenterX;   
  12.     private float mCenterY;   
  13.     private float mSpeedArcWidth;   
  14.   
  15.     private final float SPEED_VALUE_INC = 2;  
  16.   
  17.     ..........  
  18.   
  19. }  

首先是一堆成员变量，两个Paint用来画圆弧一个前景一个背景，一个RectF圆弧就画在上面，然后是一些控制参数比如sweep圆弧扫过的角度，xy坐标等等

 

 
 
  1. mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
  2.         mArcPaint.setStyle(Paint.Style.STROKE); 
  3.         mArcPaint.setStrokeWidth(mSpeedArcWidth); 
  4. //        mPaint.setStrokeCap(Paint.Cap.ROUND); 
  5.         mArcPaint.setColor(0xff81ccd6); 
  6.         BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER); 
  7.         mArcPaint.setMaskFilter(mBlur); 
  8.          
  9.         mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
  10.         mArcBGPaint.setStyle(Paint.Style.STROKE); 
  11.         mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8); 
  12.         mArcBGPaint.setColor(0xff171717); 
  13.          
  14.         BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER); 
  15.       mArcBGPaint.setMaskFilter(mBGBlur); 

设置两个画笔，颜色，宽度，样式等等，BlurMaskFilter笔是边缘模糊效果，有几种，可以自己尝试

 

 
 
  1. @Override 
  2. protected void onSizeChanged(int w, int h, int ow, int oh) { 
  3.         super.onSizeChanged(w, h, ow, oh); 
  4.         Log.i("onSizeChanged w", w+""); 
  5.         Log.i("onSizeChanged h", h+""); 
  6.         mCenterX = w * 0.5f;  // remember the center of the screen 
  7.         mCenterY = h - mSpeedArcWidth; 
  8.         mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2); 
  9.     } 

重写父类View的onSizeChanged，为的是自己根据布局中的大小做居中处理

 

 
 
  1. @Override   
  2.     protected void onDraw(Canvas canvas) {  
  3.         drawSpeed(canvas);  
  4.         calcSpeed();  
  5.     }  
  6.   
  7. private void drawSpeed(Canvas canvas) {  
  8.         canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);  
  9.   
  10.         mSweep = (float) mIncSpeedValue / mSpeedMax * 180;  
  11.         if (mIncSpeedValue > mThreshold) {  
  12.             mArcPaint.setColor(0xFFFF0000);  
  13.         }  
  14.         else {  
  15.             mArcPaint.setColor(0xFF00B0F0);  
  16.         }  
  17.           
  18.         canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);          
  19.     }  
  20.   
  21. private void calcSpeed() {  
  22.         if (mIncSpeedValue < mCurrentSpeedValue) {  
  23.             mIncSpeedValue += SPEED_VALUE_INC;  
  24.             if (mIncSpeedValue > mCurrentSpeedValue) {  
  25.                 mIncSpeedValue = mCurrentSpeedValue;  
  26.             }  
  27.             invalidate();  
  28.         }  
  29.         else if (mIncSpeedValue > mCurrentSpeedValue) {  
  30.             mIncSpeedValue -= SPEED_VALUE_INC;  
  31.             if (mIncSpeedValue < mCurrentSpeedValue) {  
  32.                 mIncSpeedValue = mCurrentSpeedValue;  
  33.             }  
  34.             invalidate();  
  35.         }  
  36.     }  

重写onDraw以便重绘canvas

drawSpeed里面

通过计算mSweep = (float) mIncSpeedValue / mSpeedMax * 180;

然后canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);

会根据mSweep的变化，画出相应长度的弧度来

根据与阈值的对比，还可以设定不同的 颜色：

 

if (mIncSpeedValue > mThreshold) {

mArcPaint.setColor(0xFFFF0000);

}

else {

mArcPaint.setColor(0xFF00B0F0);

}

 

 

calcSpeed通过一个步进来控制增量或减量，以使弧度自然过渡，减少跳跃

ok，大功告成

 


Android 自定义进度条：实现渐变色和圆角效果
zhangzhikang03的博客
01-15 1376
*** @Description: 自定义数据进度条*/= null,private var progress = 0f // 当前进度 (0~100)private var progressColorStart = Color.BLUE // 渐变开始色private var progressColorEnd = Color.CYAN // 渐变结束色private var backgroundColor = Color.LTGRAY // 背景色。
Android 自定义progressbar
行吟阁
07-01 749
android:width="0.75dp"                 android:color="#DDDDDD" >                                                  android:bottomLeftRadius="8dp"                 android:bottomRightRadius="8dp"
Android那些事儿之自定义进度条
weixin_33796205的博客
05-08 453
Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子 很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如 ok，我们开始吧： 一）变换前背景 先来看看progressbar的属性： <ProgressBarandroid:id="@+id/progressBar"...
Android自定义progressBar
weixin_30512089的博客
05-26 120
通过继承系统ProgressBar实现 效果图 实现 HorizontalProgressBarWithNumber 自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="HorizontalProgress...
自定义圆形ProgressBar
助你打造统一的店铺音乐形象
09-23 1020
android:id="@+id/more_vprogress_more"              android:layout_width="30dip"              android:layout_height="30dip"              android:layout_centerVertical="true"              android:in
android自定义ProgressBar
李棚的优快云专栏
07-03 677
<ProgressBar android:id="@+id/ProgressBar" style="@style/progressbar_horizontal" android:layout_width="300dp" android:layout_height="wra
Android自定义进度条效果
08-27
Android自定义进度条效果详解 Android自定义进度条效果是Android开发中一个常见的需求，主要用于展示进度条的变化过程。以下是Android自定义进度条效果的知识点总结： 1. 自定义进度条效果的思路 在实现Android...
Android自定义进度条的圆角横向进度条实例详解
09-01
首先，我们理解一下Android中的自定义进度条是如何工作的。 1. **自定义进度条的核心概念** - **invalidate()方法**：这个方法用于指示一个View需要重绘，它会将该View添加到UI线程的重绘队列中。当你修改了View的...
Android自定义进度条样式一
08-20
本主题将深入探讨如何创建一个自定义的进度条样式，即“Android自定义进度条样式一”。我们将讨论以下几个关键知识点： 1. **自定义View的原理** 自定义进度条本质上是自定义一个Android的View类。在Android中，你...
Android自定义进度条
05-19
今天我们将深入探讨如何自定义一个进度条，这个话题源于一个博客文章——"Android自定义进度条"，作者分享了他在实现这一功能时的经验和代码分析。在本文中，我们将详细解析自定义进度条的关键步骤和涉及的技术点。 ...
android 自定义ProgressBar
ANDROID 笔记栈
12-09 1899
点击打开链接：http://www.eoeandroid.com/thread-63835-1-1.html 目前项目中需要用到动态的progressbar，经过几番查找，动态效果是实现了，可作为progressbar最重要的特性-进度条却不起作用了，看起来进度条似乎变成了一个动态的图片...下面贴代码，请各位看官给在下解惑 定义progressbar
Android ProgressBar自定义图片进度，自定义渐变色进度条
strliu的专栏
05-30 2548
↳    android.view.View 3        ↳    android.widget.ProgressBar 4 直接子类 5 AbsSeekBar 6 间接子类
android圆形进度条ProgressBar颜色设置
大猴子的学习园地
08-10 3301
花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html  http://www.cnblogs.com/xirihanlin/archive/2010/06/14/1758145.html  xml布局文件需加入如下的进度条构件：  Java代码           andro
Android 自定义ProgressBar
WangShuo的专栏
10-31 875
效果如图调用代码如下package com.example.MyProgressbar;import com.ws.progressView.HorizontalProgress; import com.ws.progressView.RoundProgress;import android.app.Activity; import android.app.ActionBar; import and
Android自定义进度条实现与效果展示
在Android开发中，自定义控件是一个非常重要的技能，它可以帮助开发者创建出更具个性化的用户...通过本知识点的学习，开发者应该能够掌握Android自定义进度条的制作技巧，并且可以在实际项目中根据需要进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值