Android实现自定义进度条

原创 2013年12月06日 11:13:18


TasksCompletedView.java
package com.snailws.taskscompleted.activity;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.view.View;

import com.snailws.taskscompleted.R;

/**
 *
 * @version 1.0
 */
public class TasksCompletedView extends View {

	// 画实心圆的画笔
	private Paint mCirclePaint;
	// 画圆环的画笔
	private Paint mRingPaint;
	// 画字体的画笔
	private Paint mTextPaint;
	// 圆形颜色
	private int mCircleColor;
	// 圆环颜色
	private int mRingColor;
	// 半径
	private float mRadius;
	// 圆环半径
	private float mRingRadius;
	// 圆环宽度
	private float mStrokeWidth;
	// 圆心x坐标
	private int mXCenter;
	// 圆心y坐标
	private int mYCenter;
	// 字的长度
	private float mTxtWidth;
	// 字的高度
	private float mTxtHeight;
	// 总进度
	private int mTotalProgress = 100;
	// 当前进度
	private int mProgress;

	public TasksCompletedView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// 获取自定义的属性
		initAttrs(context, attrs);
		initVariable();
	}

	private void initAttrs(Context context, AttributeSet attrs) {
		TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.TasksCompletedView, 0, 0);
		mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
		mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
		mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
		mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
		
		mRingRadius = mRadius + mStrokeWidth / 2;
	}

	private void initVariable() {
		mCirclePaint = new Paint();
		mCirclePaint.setAntiAlias(true);
		mCirclePaint.setColor(mCircleColor);
		mCirclePaint.setStyle(Paint.Style.FILL);
		
		mRingPaint = new Paint();
		mRingPaint.setAntiAlias(true);
		mRingPaint.setColor(mRingColor);
		mRingPaint.setStyle(Paint.Style.STROKE);
		mRingPaint.setStrokeWidth(mStrokeWidth);
		
		mTextPaint = new Paint();
		mTextPaint.setAntiAlias(true);
		mTextPaint.setStyle(Paint.Style.FILL);
		mTextPaint.setARGB(255, 255, 255, 255);
		mTextPaint.setTextSize(mRadius / 2);
		
		FontMetrics fm = mTextPaint.getFontMetrics();
		mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
		
	}

	@Override
	protected void onDraw(Canvas canvas) {

		mXCenter = getWidth() / 2;
		mYCenter = getHeight() / 2;
		
		canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);
		
		if (mProgress > 0 ) {
			RectF oval = new RectF();
			oval.left = (mXCenter - mRingRadius);
			oval.top = (mYCenter - mRingRadius);
			oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
			oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
			canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //
//			canvas.drawCircle(mXCenter, mYCenter, mRadius + mStrokeWidth / 2, mRingPaint);
			String txt = mProgress + "%";
			mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
			canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);
		}
	}
	
	public void setProgress(int progress) {
		mProgress = progress;
//		invalidate();
		postInvalidate();
	}

}


布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:tc="http://schemas.android.com/apk/res/com.snailws.taskscompleted"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <include layout="@layout/header_common" />

    <com.snailws.taskscompleted.activity.TasksCompletedView
        android:id="@+id/tasks_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        tc:radius="100dip"
        tc:strokeWidth="20dip"
        tc:circleColor="@color/circle_color"
        tc:ringColor="@color/ring_color" />

</LinearLayout>

使用:

package com.snailws.taskscompleted.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

import com.snailws.taskscompleted.R;

/**
 * 
 * @author 
 * @version 1.0
 */
public class MainActivity extends Activity {
	
	private TasksCompletedView mTasksView;
	
	private int mTotalProgress;
	private int mCurrentProgress;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		initVariable();
		initView();
		
		new Thread(new ProgressRunable()).start();
	}
	
	private void initVariable() {
		mTotalProgress = 100;
		mCurrentProgress = 0;
	}
	
	private void initView() {
		mTasksView = (TasksCompletedView) findViewById(R.id.tasks_view);
	}
	
	class ProgressRunable implements Runnable {

		@Override
		public void run() {
			while (mCurrentProgress < mTotalProgress) {
				mCurrentProgress += 1;
				mTasksView.setProgress(mCurrentProgress);
				try {
					Thread.sleep(100);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		}
		
	}


}


android自定义view实现水平进度条

今天利用android自定义view实现了一个带有标识当前进度的水平进度条,先看效果: 实现原理view的测量这里我先说下实现该view效果的原理,由于该view是一个不规则的view,所以我们需要...
  • mockingbirds
  • mockingbirds
  • 2015年10月30日 22:53
  • 3930

自定义ProgressDialog进度条对话框的实现

Android SDK已经提供有进度条组件ProgressDialog组件,但用的时候我们会发现可能风格与我们应用的整体风格不太搭配,而且ProgressDialog的可定制行也不太强,这时就需要我们...
  • heqiangflytosky
  • heqiangflytosky
  • 2014年03月13日 16:43
  • 4104

Android:自定义View实现绚丽的圆形进度条

Android:自定义View实现绚丽的圆形进度条
  • books1958
  • books1958
  • 2015年09月07日 16:44
  • 5304

(源码)Android自定义进度条的4种实现方法

  • 2014年11月25日 09:20
  • 1.77MB
  • 下载

Android 自定义View-图片文字变色,实现酷炫LoadingView或者进度条

  • 2016年07月22日 21:07
  • 2.68MB
  • 下载

Android 三种常用实现自定义圆形进度条 ProgressBar

  • 2016年12月20日 11:19
  • 1.48MB
  • 下载

Android自定义View-实现圆形水波进度条

  • 2016年08月29日 11:42
  • 367KB
  • 下载

三种方式实现自定义圆形页面加载中效果的进度条,包含一个好看的Android UI

一、通过动画实现 定义res/anim/loading.xml如下: xmlns:android="http://schemas.android.com/apk/res/android">    ...
  • ch1406285246
  • ch1406285246
  • 2016年08月15日 14:48
  • 1416

Android在自定义View(SurfaceView)中实现进度条Progress

http://www.havenliu.com/java/689.html Android本身带有Progress控件。可以在布局中灵活使用,但如果是在自定义的View或者SurfaceView...
  • daditao
  • daditao
  • 2014年06月20日 14:36
  • 2099

Android 自定义View 实现较美观的loading进度条的绘制

1、首先绘制得底部的边框: 左右两个半圆环,中间上下两条平行线 //边框背景 mPaint.setColor(mProgressBankground...
  • RichieZhu
  • RichieZhu
  • 2016年10月19日 20:55
  • 953
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android实现自定义进度条
举报原因:
原因补充:

(最多只允许输入30个字)