`
阿尔萨斯
  • 浏览: 4110534 次
社区版块
存档分类
最新评论

Android 自定义View (三) 圆环交替 等待效果

 
阅读更多

转载请标明出处: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); // 根据进度画圆弧
		}

	}

大功完成了,当然了,唯一比较纠结的地方就是两个颜色何时切换,如何切换,我采用上面的办法,你也可以自己想想怎么实现。


好了,各位看官留个言,顶一个吧~


源码点击下载


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics