首先看效果图:点击控件,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学习自此篇博客