转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24500107
一个朋友今天有这么个需求(下图),我觉得那自定义View来做还是很适合的,就做了下,顺便和大家分享下,对于自定义View多练没坏处么。如果你看了前两篇,那么这篇一定so easy 。
效果就这样,分析了一下,大概有这几个属性,两个颜色,一个速度,一个圆环的宽度。
还是我们自定View的那几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[3、重写onMesure ]
4、重写onDraw
-------------------------------------------------------------------------------------------------------------------
1、自定义属性:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="firstColor" format="color" />
<attr name="secondColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="speed" format="integer" />
<declare-styleable name="CustomProgressBar">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="speed" />
</declare-styleable>
</resources>
2、
在View的构造方法中获得我们自定义的属性
/**
* 第一圈的颜色
*/
private int mFirstColor;
/**
* 第二圈的颜色
*/
private int mSecondColor;
/**
* 圈的宽度
*/
private int mCircleWidth;
/**
* 画笔
*/
private Paint mPaint;
/**
* 当前进度
*/
private int mProgress;
/**
* 速度
*/
private int mSpeed;
/**
* 是否应该开始下一个
*/
private boolean isNext = false;
public CustomProgressBar(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CustomProgressBar(Context context)
{
this(context, null);
}
/**
* 必要的初始化,获得一些自定义的值
*
* @param context
* @param attrs
* @param defStyle
*/
public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomProgressBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomProgressBar_secondColor:
mSecondColor = a.getColor(attr, Color.RED);
break;
case R.styleable.CustomProgressBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomProgressBar_speed:
mSpeed = a.getInt(attr, 20);// 默认20
break;
}
}
a.recycle();
mPaint = new Paint();
// 绘图线程
new Thread()
{
public void run()
{
while (true)
{
mProgress++;
if (mProgress == 360)
{
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try
{
Thread.sleep(mSpeed);
} catch (InterruptedException e)
{
e.printStackTrace();
}
}
};
}.start();
}
3、直接重写onDraw,这不需要重写onMeasure
@Override
protected void onDraw(Canvas canvas)
{
int centre = getWidth() / 2; // 获取圆心的x坐标
int radius = centre - mCircleWidth / 2;// 半径
mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
if (!isNext)
{// 第一颜色的圈完整,第二颜色跑
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
} else
{
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
}
}
大功完成了,当然了,唯一比较纠结的地方就是两个颜色何时切换,如何切换,我采用上面的办法,你也可以自己想想怎么实现。
好了,各位看官留个言,顶一个吧~
分享到:
相关推荐
例子为博客的示例教程:http://blog.csdn.net/lmj623565791/article/details/24500107 有问题,博客留言
给大家介绍如何基于Android自定义View实现圆环交替的效果,实现后效果很赞,有需要的小伙伴们可以参考借鉴。
Android自定义View——彩色圆环统计图
Android自定义View——从零开始实现书籍翻页效果(三) Android自定义View——从零开始实现书籍翻页效果(四) Android自定义View——从零开始实现书籍翻页效果(性能优化篇)效果展示:覆盖翻页效果CoverPageView...
有需要的可以下载哈,没事就点赞呗
此作为Android自定义View之画圆环(进阶篇:圆形进度条)的示例代码,如有疑问,请留言
Android自定义View实现转盘旋转的效果
android 自定义view比较综合的例子,涉及到一些复杂的实现效果,有一些基础的人可以参考下。
安卓自定义View三滑块SeekBar,可以根据需要变换成双滑块或其他多滑块,可以动态设置三滑块的值
Android自定义View实现开关按钮效果,适用于Android进阶初级开发者参考探讨。博文地址:http://blog.csdn.net/jaynm/article/details/52601935
android自定义View实现SwitchView
android 自定义view及自定义属性
此示例作为csdn博客(Android自定义view之画圆环(手把手教你如何一步步画圆环)的示例)的示例Demo,仅供参考
android 自定义View界面大合集
实现了圆圈旋转 圆环拖动,图标拖动、 还有图片缩放~等功能的demo
Android自定义View高仿抖音潜艇大挑战小游戏.zipAndroid自定义View高仿抖音潜艇大挑战小游戏.zipAndroid自定义View高仿抖音潜艇大挑战小游戏.zipAndroid自定义View高仿抖音潜艇大挑战小游戏.zipAndroid自定义View...
Android自定义View——贝塞尔曲线实现直播点赞效果 Android自定义View——贝塞尔曲线实现直播点赞效果
Android自定义View——拼手气转盘 Android自定义View——拼手气转盘
Android自定义View 雷达扫描效果。可以根据自己的需求配置View的主题颜色、扫描颜色、扫描速度、圆圈数量、是否显示水滴等。 效果图: 这个View的代码只有一个类,非常的简单。没有提供直接引用的链接,需要使用...
一个自定义的Android圆环,拿去就可以使用,就一个View,占用空间小,不用依赖,也可以自行修改!