`
isiqi
  • 浏览: 16876281 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

自定义实现圆形播放进度条(android,飞一般的感觉)

 
阅读更多

废话不多说,先上效果图:

Android提供了很多基本的控件实现,但不是一个完整、强大的实现。
幸运的是,Android提供了自定义控件的实现,有了自定义控件,我们就可以再Android的基础控件上实现我们想要的功能或者自定义的外观。
以ProgressBar为例,对于可调节的进度条似乎只有长条形的ProgressBar(圆形的都是不停转动的那种)
假如我们想要一个可调节进度的圆形进度条呢。。。
Ok,下面我们直接切入主题(关于自定义控件的相关实现细节就不多说了,还不太清楚的童鞋先找相关资料补习一下)

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

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

public class CircleProgress extends View{

	
	 private  static final int DEFAULT_MAX_VALUE = 100;			// 默认进度条最大值
	 private  static final int DEFAULT_PAINT_WIDTH = 10;			// 默认画笔宽度
	 private  static final int DEFAULT_PAINT_COLOR = 0xffffcc00;		// 默认画笔颜色
	 private  static final boolean DEFAULT_FILL_MODE = true;		// 默认填充模式
	 private  static final int DEFAULT_INSIDE_VALUE = 0;			// 默认缩进距离
	
	
	 private CircleAttribute mCircleAttribute;				// 圆形进度条基本属性

	 private int mMaxProgress;						// 进度条最大值	 	 																												
	 private int mMainCurProgress;						// 主进度条当前值 
	 private int mSubCurProgress;						// 子进度条当前值 
	
	 private CartoomEngine mCartoomEngine;					// 动画引擎
	
	 private Drawable mBackgroundPicture;					// 背景图

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

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


下面看看onDraw的代码片段:

public void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		       	
		if (mBackgroundPicture == null)									// 没背景图的话就绘制底色
		{
			canvas.drawArc(mCircleAttribute.mRoundOval, 0, 360, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mBottomPaint);
		}
		
		
		float subRate = (float)mSubCurProgress / mMaxProgress;
		float subSweep = 360 * subRate;
		canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, subSweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mSubPaint);
		
		float rate = (float)mMainCurProgress / mMaxProgress;
		float sweep = 360 * rate;
		canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, sweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mMainPaints);
	
	
	}

canvas的drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 方法是关键
相关参数说明大家详看SDK文档


控件大小决定oval
画笔属性设置paint
useCenter表示是否填充
startAngle是绘制圆弧的起点,我们使用-90度,即12点钟方向
sweepAngle是从起点顺时针绘制覆盖的角度,意味着进度值为30%的话,就是 360 * 30%

设置进度的代码片段:

 public synchronized void setMainProgress (int progress)
	 {
	    	mMainCurProgress = progress;
	    	if (mMainCurProgress < 0)
	    	{
	    		mMainCurProgress = 0;
	    	}
	    	
	    	if (mMainCurProgress > mMaxProgress)
	    	{
	    		mMainCurProgress = mMaxProgress;
	    	}
	    	
	    	invalidate();
	}

设置进度值之后触发重绘,计算sweepAngle的值,最后完成绘制效果,怎么样,是不是就对上了



该控件的自定义属性如下:

	<?xml version="1.0" encoding="utf-8"?>  
<resources> 
 
    <declare-styleable name="CircleProgressBar">  
        <attr name="max" format="integer"/>				<!-- 进度条最大值 -->
        <attr name="fill" format="boolean"/>			<!-- 是否填充圆形区域 -->
        <attr name="Paint_Width" format="integer"/>		<!-- 画笔宽度,填充模式下无效,会被重置为0 -->
        <attr name="Paint_Color" format="integer"/>		<!-- 画笔颜色 -->
        <attr name="Inside_Interval" format="integer"/> <!-- 圆形区域向里缩进的距离 --> 
    </declare-styleable>  
    
</resources> 

再贴上本例的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:roundProgress="http://schemas.android.com/apk/res/com.genius.progress"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="#ffffff">

    
    <LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:id="@+id/linearLayout1"
    android:orientation="horizontal"
    android:gravity = "center_horizontal">
    
      	<Button 
		android:text="增加主进度条" 
		android:id="@+id/buttonAddMainPro" 
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:layout_weight="1">
		</Button>
		
		
		<Button 
		android:text="增加子进度条" 
		android:id="@+id/buttonAddSubPro" 
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:layout_weight="1">
		</Button>	
		
   		<ImageButton
   		android:id="@+id/buttonImage" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:src="@drawable/background2"
    	android:layout_weight="1" />	
        
    </LinearLayout>
    
     	
    <LinearLayout 
	    android:layout_height="wrap_content" 
	    android:layout_width="match_parent" 
	    android:id="@+id/linearLayout2"
	    android:orientation="horizontal"
	    android:background="#ff0000"
	    android:gravity = "center_horizontal">
     
     
        <com.genius.circle.CircleProgress
	    android:id="@+id/roundBar1"
	    android:layout_width="wrap_content"  
	    android:layout_height="wrap_content"
	    android:background="@drawable/background1"   
		roundProgress:max="100"
		roundProgress:fill = "false"    
		roundProgress:Inside_Interval="5"
	    roundProgress:Paint_Width = "4"
	    roundProgress:Paint_Color = "0xff0000ff" 
		/>
    
        
	 	<com.genius.circle.CircleProgress 
	     android:id="@+id/roundBar2"
	     android:layout_width="wrap_content"  
	     android:layout_height="wrap_content"
	     android:background="@drawable/background3"	     
	 	 roundProgress:max="100"
	 	 roundProgress:Inside_Interval="8"
	     roundProgress:fill = "true"	
	     roundProgress:Paint_Width = "4"	        	 
	     roundProgress:Paint_Color = "0xffaa5500" 
	    />
     
	 	
	 	<com.genius.circle.CircleProgress 
	     android:id="@+id/roundBar3"
	     android:layout_width="96dp"  
	     android:layout_height="96dp"   
	 	 roundProgress:max="100"
	     roundProgress:fill="false"
	      roundProgress:Paint_Width="40"	  
	     roundProgress:Inside_Interval="20"
	    />
	 	
    </LinearLayout>

	 
    
     
  	<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:id="@+id/linearLayout3"
    android:orientation="horizontal"
    android:gravity = "center_horizontal|center_vertical"
    android:background="#00ff00">  
    
    
		    <Button 
			android:text="启动动画" 
			android:id="@+id/buttonStart" 
			android:layout_width="100dip" 
			android:layout_height="wrap_content">
			</Button>
	
	
		    <com.genius.circle.CircleProgress 
		     android:id="@+id/roundBar4"
		     android:layout_width="wrap_content"  
		     android:layout_height="wrap_content"
		     android:background="@drawable/background1"	     
		 	 roundProgress:Inside_Interval="6"
		     roundProgress:Paint_Color = "0xff0000ff" 
		    />
     	
		    <Button 
			android:text="停止动画" 
			android:id="@+id/buttonStop" 
			android:layout_width="100dip" 
			android:layout_height="wrap_content">
			</Button>
	
	
    </LinearLayout>
    
    

</LinearLayout>

大家比对下效果图就明白了


此外该控件中有两个接口是作动画相关的
public synchronized void startCartoom(int time)
public synchronized void stopCartoom()

比如你想播放一个10秒的声音片段,同时用进度条来表示播放进度,那么直接调用 startCartoom(10)来开启动画即可

其他的似乎没啥好说的了,源码工程里的注释也写很清楚了,有兴趣的童鞋下下来看看就明白了
附属工程链接:

http://download.csdn.net/detail/geniuseoe2012/4387677

喜欢就顶一下,你们的支持是窝的动力。奋斗

分享到:
评论
1 楼 yhbanywn 2014-05-09  
非常感谢博主!

相关推荐

    自定义圆形播放进度条(android)

    自定义圆形播放进度条的核心在于创建一个自定义View,这个View需要继承自Android的基础View类或者ProgressBar类。继承ProgressBar可以让我们直接利用其内置的进度更新机制,同时自定义绘制过程,从而达到我们想要的...

    Android-自定义水平刻度尺和圆形钟表刻度

    在Android开发中,有时我们需要创建独特且具有交互性的UI组件,比如自定义的水平刻度尺和圆形钟表刻度。这些控件可以用于时间显示、进度指示或者数据选择等场景,提供用户友好的交互体验。本文将详细介绍如何在...

    android自定义圆形布局CircleLayout

    本篇文章将深入探讨如何实现这样一个自定义圆形布局,并提供相关的实践示例。 首先,创建一个自定义布局通常需要继承`FrameLayout`或者`LinearLayout`等基础布局类。在这个例子中,我们继承`ViewGroup`,因为我们...

    Android三种方式实现ProgressBar自定义圆形进度条

    进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条。 Android进度条有4种风格可以使用。 默认值是progressBarStyle。 设置成progressBarStyleSmall后,图标变小...

    Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)源码

    本篇文章将深入探讨如何实现一个自定义的、带有进度指示的圆形进度条,以此来提升用户界面的交互体验。我们首先从标题和描述中提取的主要知识点包括:自定义View、自定义属性以及如何在实际项目中应用这些技术。 一...

    Aandroid自定义环形播放进度条

    android自定义环形播放进度条源码,供需要的人下载。

    ColorSeekBar 自定义view 播放进度条

    自定义view 实现音乐播放进度条,可以快进快退

    android自定义圆形进度条

    本文将深入探讨如何在Android中创建一个自定义的圆形进度条,这个进度条不仅能够展示进度,还能根据设计需求进行个性化定制。 首先,我们需要理解Android的UI体系。Android使用View和 ViewGroup两类组件构建用户...

    android实现的自定义圆形进度条

    标题提到的“android实现的自定义圆形进度条”就是一种常见的自定义视图,它允许开发者创建具有独特外观和行为的进度指示器。下面我们将深入探讨如何在Android中实现这样一个自定义圆形进度条,并结合描述和标签,...

    Android 自定义圆环动画切换、流式布局的实现.rar

    这个自定义的圆环ImageView可能是通过重写onDraw()方法来绘制一个圆形的图片边界,并可能结合Matrix进行图片旋转动画,以实现类似转盘的效果。圆环动画的实现可能涉及到Animation或Animator类,通过设置关键帧和时间...

    android 自定义view 圆形进度条

    总结,自定义Android View涉及绘制逻辑、事件处理、属性定义等多个方面。通过对xiaanming大神源码的学习和改造,我们可以深入理解自定义View的工作原理,并将其应用于实际项目中,创建出独具特色的UI组件。在实际...

    android相机圆形框拍照,自定义拍照界面

    在Android平台上,开发一款应用,实现自定义相机功能并让拍照界面呈现出圆形拍摄框,是一项技术挑战。这个功能常用于创建类似Instagram或某些社交应用的个性化拍摄体验,让用户拍摄的照片中心区域聚焦为圆形,增强...

    android自定义相机带取景框

    在Android开发中,自定义相机是一项常见的需求,它允许开发者根据特定的应用场景和用户体验来定制相机功能。"android自定义相机带取景框"这个话题就是关于如何在Android应用中创建一个具有用户界面元素(如取景框)...

    Android自定义控件之拖动条

    本文将深入探讨如何创建一个美观的自定义拖动条控件,即"Android自定义控件之拖动条"。我们将讨论以下几个关键知识点: 1. **基础知识**:在Android中,基本的滑动条控件是`SeekBar`,它允许用户通过拖动滑块来选择...

    安卓自定义控件相关-用自定义View的方式来实现圆形的遥控器菜单.rar

    本示例主要讲解如何使用自定义View来实现一个圆形的遥控器菜单。这个圆形遥控器菜单可能用于模拟电视遥控器上的导航操作,或者作为游戏控制器等交互场景。 首先,自定义控件的核心在于扩展Android的View或ViewGroup...

    Android自定义控件——圆形进度条

    在Android开发中,自定义控件是提升应用独特性和用户体验的重要手段。本篇文章将深入探讨如何创建一个圆形进度条,即`CircleProgressView`。这个控件能够以圆形的形式展示进度,常见于加载动画或者显示数据百分比的...

    android exoplayer 自定义界面,播放器

    例如,当视频开始播放时,播放按钮应该变为暂停状态,进度条应该显示当前的播放进度。 ```java public class CustomPlayerView extends FrameLayout { private SimpleExoPlayer player; private ProgressBar ...

    android自定义View(五)打造自己的遥控器菜单

    在Android开发中,自定义View是一项重要的技能,它允许开发者根据特定需求创建独特且功能丰富的用户界面。本篇文章将深入探讨如何打造一个圆形的遥控器菜单,为用户提供类似电视遥控器的操作体验。这个自定义View将...

    android 自定义渐变进度条,圆形,长条行,长方形

    "android 自定义渐变进度条,圆形,长条行,长方形"这个主题涉及到的是如何利用Android SDK来创建具有渐变效果、不同形状(圆形、长条形、长方形)的进度条。下面将详细阐述这一知识点。 首先,我们从基础开始,...

    Android 圆形颜色渐变进度条 自定义控件

    通过这个控件,开发者可以在Android应用中实现独特的、视觉效果出色的进度指示器,为用户提供更丰富的交互体验。当然,实际开发中可能还需要根据具体需求进行更多的定制和优化,例如添加动画效果、自定义样式等。但...

Global site tag (gtag.js) - Google Analytics