自定义progressBar的效果

首先看效果图:点击控件,down事件开始由0加载,up事件终止继续加载。


可以在项目中实现一些自定义的效果

思路:在自定义的view中鲜花一个整圆,在用其他颜色画出另外的部分。完成progressBar部分。

    在中间部分实现画出字体。

代码:1自定义的circleView:

public class CircleProgressView extends View {
	private static final String TAG = "CircleProgressBar";

	private int mMaxProgress = 100;

	private int mProgress = 0;

	private final int mCircleLineStrokeWidth = 4;

	private final int mTxtStrokeWidth = 2;

	// 画圆所在的距形区域
	private final RectF mRectF;

	private final Paint mPaint;

	private final Context mContext;

	public CircleProgressView(Context context, AttributeSet attrs) {
		super(context, attrs);

		mContext = context;
		mRectF = new RectF();
		mPaint = new Paint();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		// 获取view的大小
		int width = this.getWidth();
		int height = this.getHeight();
		// 获取正方形区域
		if (width != height) {
			int min = Math.min(width, height);
			width = min;
			height = min;
		}
		// ++++++开始画圆++++
		mPaint.setAntiAlias(true);// 抗锯齿功能
		mPaint.setColor(getResources().getColor(R.color.yellow));
		canvas.drawColor(Color.TRANSPARENT);
		mPaint.setStrokeWidth(mCircleLineStrokeWidth);
		mPaint.setStyle(Style.STROKE); // 设置画笔为空心
		mRectF.left = mCircleLineStrokeWidth / 2; // 左上角x
		mRectF.top = mCircleLineStrokeWidth / 2; // 左上角y
		mRectF.right = width - mCircleLineStrokeWidth / 2; // 右下角x
		mRectF.bottom = height - mCircleLineStrokeWidth / 2; // 右下角y
		// 绘制圆圈,进度条背景
		canvas.drawArc(mRectF, -90, 360, false, mPaint);
		// 绘制进度
		mPaint.setColor(getResources().getColor(R.color.red));
		canvas.drawArc(mRectF, -90, ((float) mProgress / mMaxProgress) * 360,
				false, mPaint);
		// 绘制文字
		mPaint.setStrokeWidth(mTxtStrokeWidth);
		String Text = mProgress + "%";// 显示进度文字
		int textheight = height / 4;
		mPaint.setTextSize(textheight);
		int textWidth = (int) mPaint.measureText(Text);
		mPaint.setStyle(Style.FILL);
		mPaint.setColor(getResources().getColor(R.color.text_color));
		// 设置文字位置并且绘制
		canvas.drawText(Text, width / 2 - textWidth / 2,
				(float) (height / 1.8 + textheight / 2), mPaint);
		// 绘制文字
		String topText = "恭喜你击败了";
		textheight = height / 7;
		mPaint.setTextSize(textheight);
		textWidth = (int) mPaint.measureText(topText);
		canvas.drawText(topText, width / 2 - textWidth / 2,
				(float) (height / 2.6 + textheight / 2), mPaint);

	}

	public void setProgressNotInUiThread(int progress) {
		this.mProgress = progress;
		this.postInvalidate();
	}
}

xml中的使用(注意—自定义的view要想响应touch事件需要添加clickable="true")

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.demo.MainActivity" >


    <com.example.demo.CircleProgressView
        android:id="@+id/ccc"
        android:layout_width="105dp"
        android:layout_height="180dp"
        android:layout_centerInParent="true"
        android:clickable="true" />


</RelativeLayout>
activity中的使用

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ccc = (CircleProgressView) findViewById(R.id.ccc);
		ccc.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				if (event.getAction() == MotionEvent.ACTION_DOWN) {
					isStop = false;
					Log.e("mace", "ACTION_DOWN");
					t = new Thread() {
						@Override
						public void run() {
							// TODO Auto-generated method stub
							super.run();
							int i = 0;
							while (i < 100 && !isStop) {
								i++;
								ccc.setProgressNotInUiThread(i);
								try {
									sleep(10);
								} catch (InterruptedException e) {
									// TODO Auto-generated catch block
									e.printStackTrace();
								}
							}
						}

					};
					t.start();
				} else if (event.getAction() == MotionEvent.ACTION_UP) {
					isStop = true;
					Log.e("mace", "ACTION_UP");
					// ccc.setProgressNotInUiThread(0);
				}
				return false;
			}
		});
	}

鸣谢http://blog.csdn.net/Beyond0525/article/details/48181345学习自此篇博客


猜你喜欢

转载自blog.csdn.net/mace_android/article/details/52701431