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

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
喜欢就顶一下,你们的支持是窝的动力。
分享到:
相关推荐
自定义圆形播放进度条的核心在于创建一个自定义View,这个View需要继承自Android的基础View类或者ProgressBar类。继承ProgressBar可以让我们直接利用其内置的进度更新机制,同时自定义绘制过程,从而达到我们想要的...
在Android开发中,有时我们需要创建独特且具有交互性的UI组件,比如自定义的水平刻度尺和圆形钟表刻度。这些控件可以用于时间显示、进度指示或者数据选择等场景,提供用户友好的交互体验。本文将详细介绍如何在...
本篇文章将深入探讨如何实现这样一个自定义圆形布局,并提供相关的实践示例。 首先,创建一个自定义布局通常需要继承`FrameLayout`或者`LinearLayout`等基础布局类。在这个例子中,我们继承`ViewGroup`,因为我们...
进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条。 Android进度条有4种风格可以使用。 默认值是progressBarStyle。 设置成progressBarStyleSmall后,图标变小...
本篇文章将深入探讨如何实现一个自定义的、带有进度指示的圆形进度条,以此来提升用户界面的交互体验。我们首先从标题和描述中提取的主要知识点包括:自定义View、自定义属性以及如何在实际项目中应用这些技术。 一...
android自定义环形播放进度条源码,供需要的人下载。
自定义view 实现音乐播放进度条,可以快进快退
本文将深入探讨如何在Android中创建一个自定义的圆形进度条,这个进度条不仅能够展示进度,还能根据设计需求进行个性化定制。 首先,我们需要理解Android的UI体系。Android使用View和 ViewGroup两类组件构建用户...
标题提到的“android实现的自定义圆形进度条”就是一种常见的自定义视图,它允许开发者创建具有独特外观和行为的进度指示器。下面我们将深入探讨如何在Android中实现这样一个自定义圆形进度条,并结合描述和标签,...
这个自定义的圆环ImageView可能是通过重写onDraw()方法来绘制一个圆形的图片边界,并可能结合Matrix进行图片旋转动画,以实现类似转盘的效果。圆环动画的实现可能涉及到Animation或Animator类,通过设置关键帧和时间...
总结,自定义Android View涉及绘制逻辑、事件处理、属性定义等多个方面。通过对xiaanming大神源码的学习和改造,我们可以深入理解自定义View的工作原理,并将其应用于实际项目中,创建出独具特色的UI组件。在实际...
在Android平台上,开发一款应用,实现自定义相机功能并让拍照界面呈现出圆形拍摄框,是一项技术挑战。这个功能常用于创建类似Instagram或某些社交应用的个性化拍摄体验,让用户拍摄的照片中心区域聚焦为圆形,增强...
在Android开发中,自定义相机是一项常见的需求,它允许开发者根据特定的应用场景和用户体验来定制相机功能。"android自定义相机带取景框"这个话题就是关于如何在Android应用中创建一个具有用户界面元素(如取景框)...
本文将深入探讨如何创建一个美观的自定义拖动条控件,即"Android自定义控件之拖动条"。我们将讨论以下几个关键知识点: 1. **基础知识**:在Android中,基本的滑动条控件是`SeekBar`,它允许用户通过拖动滑块来选择...
本示例主要讲解如何使用自定义View来实现一个圆形的遥控器菜单。这个圆形遥控器菜单可能用于模拟电视遥控器上的导航操作,或者作为游戏控制器等交互场景。 首先,自定义控件的核心在于扩展Android的View或ViewGroup...
在Android开发中,自定义控件是提升应用独特性和用户体验的重要手段。本篇文章将深入探讨如何创建一个圆形进度条,即`CircleProgressView`。这个控件能够以圆形的形式展示进度,常见于加载动画或者显示数据百分比的...
例如,当视频开始播放时,播放按钮应该变为暂停状态,进度条应该显示当前的播放进度。 ```java public class CustomPlayerView extends FrameLayout { private SimpleExoPlayer player; private ProgressBar ...
在Android开发中,自定义View是一项重要的技能,它允许开发者根据特定需求创建独特且功能丰富的用户界面。本篇文章将深入探讨如何打造一个圆形的遥控器菜单,为用户提供类似电视遥控器的操作体验。这个自定义View将...
"android 自定义渐变进度条,圆形,长条行,长方形"这个主题涉及到的是如何利用Android SDK来创建具有渐变效果、不同形状(圆形、长条形、长方形)的进度条。下面将详细阐述这一知识点。 首先,我们从基础开始,...
通过这个控件,开发者可以在Android应用中实现独特的、视觉效果出色的进度指示器,为用户提供更丰富的交互体验。当然,实际开发中可能还需要根据具体需求进行更多的定制和优化,例如添加动画效果、自定义样式等。但...