自定义实现圆形播放进度条



Android提供了很多基本的控件实现,但不是一个完整、强大的实现。

幸运的是,Android提供了自定义控件的实现,有了自定义控件,我们就可以再Android的基础控件上实现我们想要的功能或者自定义的外观。

以ProgressBar为例,对于可调节的进度条似乎只有长条形的ProgressBar(圆形的都是不停转动的那种)

假如我们想要一个可调节进度的圆形进度条呢。。。

Ok,下面我们直接切入主题(关于自定义控件的相关实现细节就不多说了,还不太清楚的童鞋先找相关资料补习一下)

该自定义控件的实现思路是继承自View,然后重写onDraw

先看看该类有哪些成员变量:

  1. public class CircleProgress extends View{  
  2.   
  3.       
  4.      private  static final int DEFAULT_MAX_VALUE = 100;         // 默认进度条最大值   
  5.      private  static final int DEFAULT_PAINT_WIDTH = 10;            // 默认画笔宽度   
  6.      private  static final int DEFAULT_PAINT_COLOR = 0xffffcc00;        // 默认画笔颜色   
  7.      private  static final boolean DEFAULT_FILL_MODE = true;        // 默认填充模式   
  8.      private  static final int DEFAULT_INSIDE_VALUE = 0;            // 默认缩进距离   
  9.       
  10.       
  11.      private CircleAttribute mCircleAttribute;              // 圆形进度条基本属性   
  12.   
  13.      private int mMaxProgress;                      // 进度条最大值                                                                                                                          
  14.      private int mMainCurProgress;                      // 主进度条当前值    
  15.      private int mSubCurProgress;                       // 子进度条当前值    
  16.       
  17.      private CartoomEngine mCartoomEngine;                  // 动画引擎   
  18.       
  19.      private Drawable mBackgroundPicture;                   // 背景图  

 

  1. class CircleAttribute  
  2.     {  
  3.          public RectF   mRoundOval;             // 圆形所在矩形区域   
  4.          public boolean mBRoundPaintsFill;          // 是否填充以填充模式绘制圆形   
  5.          public int     mSidePaintInterval;         // 圆形向里缩进的距离   
  6.          public int     mPaintWidth;                // 圆形画笔宽度(填充模式下无视)   
  7.          public int     mPaintColor;                // 画笔颜色  (即主进度条画笔颜色,子进度条画笔颜色为其半透明值)    
  8.          public int     mDrawPos;               // 绘制圆形的起点(默认为-90度即12点钟方向)   
  9.            
  10.          public Paint   mMainPaints;                // 主进度条画笔          
  11.          public Paint   mSubPaint;                  // 子进度条画笔    
  12.            
  13.          public Paint   mBottomPaint;               // 无背景图时绘制所用画笔  

 

  1. class CartoomEngine  
  2. {  
  3.     public Handler mHandler;   
  4.     public boolean mBCartoom;               // 是否正在作动画    
  5.     public Timer   mTimer;                  // 用于作动画的TIMER    
  6.     public       MyTimerTask    mTimerTask;     // 动画任务   
  7.     public int   mSaveMax;              // 在作动画时会临时改变MAX值,该变量用于保存值以便恢复      
  8.     public int     mTimerInterval;              // 定时器触发间隔时间(ms)        
  9.     public float   mCurFloatProcess;            // 作动画时当前进度值   

下面看看onDraw的代码片段:

  1. public void onDraw(Canvas canvas) {  
  2.         // TODO Auto-generated method stub   
  3.         super.onDraw(canvas);  
  4.                   
  5.         if (mBackgroundPicture == null)                                 // 没背景图的话就绘制底色   
  6.         {  
  7.             canvas.drawArc(mCircleAttribute.mRoundOval, 0360, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mBottomPaint);  
  8.         }  
  9.           
  10.           
  11.         float subRate = (float)mSubCurProgress / mMaxProgress;  
  12.         float subSweep = 360 * subRate;  
  13.         canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, subSweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mSubPaint);  
  14.           
  15.         float rate = (float)mMainCurProgress / mMaxProgress;  
  16.         float sweep = 360 * rate;  
  17.         canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, sweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mMainPaints);  
  18.       
  19.       
  20.     }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现倒计时圆形进度,你可以创建一个自定义的 View,使用 Canvas 和 Paint 来绘制圆形进度条。以下是一个示例代码: ```java public class CountdownCircleView extends View { private int maxProgress = 100; // 总进度 private int progress = 100; // 当前进度 private int circleColor = Color.GRAY; // 圆形颜色 private int progressColor = Color.BLUE; // 进度条颜色 private Paint circlePaint; private Paint progressPaint; public CountdownCircleView(Context context) { super(context); init(); } public CountdownCircleView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public CountdownCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { circlePaint = new Paint(); circlePaint.setAntiAlias(true); circlePaint.setColor(circleColor); progressPaint = new Paint(); progressPaint.setAntiAlias(true); progressPaint.setColor(progressColor); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int viewWidth = getWidth(); int viewHeight = getHeight(); // 绘制圆形 int diameter = Math.min(viewWidth, viewHeight); int radius = diameter / 2; int centerX = viewWidth / 2; int centerY = viewHeight / 2; canvas.drawCircle(centerX, centerY, radius, circlePaint); // 绘制进度条 RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius); float sweepAngle = 360f * progress / maxProgress; canvas.drawArc(rectF, -90, sweepAngle, true, progressPaint); } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public void setProgress(int progress) { this.progress = progress; invalidate(); // 重新绘制 } } ``` 你可以将上述代码放入你的 Android 项目中,并在布局文件中使用 `CountdownCircleView`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值