Android 自定义View (三) 圆环交替 等待效果
来源:互联网 发布:js移动端拖拽事件 编辑:程序博客网 时间:2024/06/05 02:20
转载请标明出处: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>
<?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();
- }
/** * 第一圈的颜色 */ 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); // 根据进度画圆弧
- }
- }
@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); // 根据进度画圆弧 } }
大功完成了,当然了,唯一比较纠结的地方就是两个颜色何时切换,如何切换,我采用上面的办法,你也可以自己想想怎么实现。
好了,各位看官留个言,顶一个吧~
源码点击下载
阅读全文
0 0
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- Android 自定义View (三) 圆环交替 等待效果
- 文章收藏
- 数据处理:离散化好处多
- HTML5 video 视频标签使用介绍
- 参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))
- 设计模式-策略模式
- Android 自定义View (三) 圆环交替 等待效果
- Unity3D 场景摄像机控制 插件包
- Java中字符串String总结
- 【洛谷5月月赛R2】由乃与大母神原型和偶像崇拜(线段树+hash)
- 唤醒支付宝-没有的装
- SSO单点登录
- WebView 截长图
- 自定义view(二)canvas与图形绘制
- 共享单车被带到乡下私用,警方:或涉嫌盗窃