android 自定义进度条

最新推荐文章于 2024-04-21 09:50:42 发布

一直向钱

最新推荐文章于 2024-04-21 09:50:42 发布

阅读量815

点赞数

分类专栏： android开发

本文链接：https://blog.csdn.net/u013519290/article/details/65435763

版权

android开发专栏收录该内容

95 篇文章 4 订阅

订阅专栏

效果图：

入口MainActivity

package com.beyole.definedprogressbar;

import com.beyole.view.HorizontalProgressbarWithNumbers;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;

public class MainActivity extends Activity {

	private HorizontalProgressbarWithNumbers mProgressBar;
	private static final int PROGRESS_UPDATE = 0x111;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mProgressBar = (HorizontalProgressbarWithNumbers) findViewById(R.id.id_myHorizontalProgressBar);
		MyHandler.sendEmptyMessage(PROGRESS_UPDATE);
	}

	private Handler MyHandler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			int progress = mProgressBar.getProgress();
			mProgressBar.setProgress(++progress);
			if (progress > 100) {
				MyHandler.removeMessages(PROGRESS_UPDATE);
			}
			MyHandler.sendEmptyMessageDelayed(PROGRESS_UPDATE, 100);
		};
	};

}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:beyole="http://schemas.android.com/apk/res/com.beyole.definedprogressbar"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.beyole.view.HorizontalProgressbarWithNumbers
        android:id="@+id/id_myHorizontalProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dip"
        android:padding="5dp" >
    </com.beyole.view.HorizontalProgressbarWithNumbers>

    <com.beyole.view.RoundProgressbarWithNumbers
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dip"
        android:padding="5dp"
        android:progress="50"
        beyole:process_reached_bar_height="20dp"
        beyole:process_text_color="#ffF53B03"
        beyole:radius="60dp" />

</LinearLayout>

HorizontalProgressbarWithNumbers.java

package com.beyole.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ProgressBar;

import com.beyole.definedprogressbar.R;

public class HorizontalProgressbarWithNumbers extends ProgressBar {

	// 设置默认字体大小
	private static final int DEFAULT_TEXT_SIZE = 10;
	// 设置默认字体的颜色
	private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1;
	// 设置默认未处理完的进度条的颜色
	private static final int DEFAULT_PROCESS_UNREACHED_COLOR = 0XFFD3D6DA;
	// 设置默认正在运行的进度条的高度
	private static final int DEFAULT_PROCESS_UNREACHED_BAR_HEIGHT = 2;
	// 设置默认还未进行的进度条的高度
	private static final int DEFAULT_PROCESS_REACHED_BAR_HEIGHT = 2;
	// 设置默认的字体与正在运行的进度条的偏移
	private static final int DEFAULT_PROCESS_TEXT_OFFSET = 10;
	// 画笔
	protected Paint mPaint = new Paint();
	// 字体颜色
	protected int mTextColor = DEFAULT_TEXT_COLOR;
	// 字体大小 sp转换为px
	protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
	// 字体偏移 dp转换为px
	protected int mTextOffset = dp2px(DEFAULT_PROCESS_TEXT_OFFSET);
	// 未在运行的进度条的高度
	protected int mProcessUnreachedBarHeight = dp2px(DEFAULT_PROCESS_UNREACHED_BAR_HEIGHT);
	// 正在运行的进度条的高度
	protected int mProcessReachedBarHeight = dp2px(DEFAULT_PROCESS_REACHED_BAR_HEIGHT);
	// 设置正在运行的进度条的颜色
	protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
	// 设置未运行的进度条的颜色
	protected int mUnreachedBarColor = DEFAULT_PROCESS_UNREACHED_COLOR;
	// 进度条宽度
	protected int mRealWidth;
	// 是否显示文字进度
	protected boolean mIfDrawtext = true;
	// 是否可见
	protected static final int VISIBLE = 0;

	public HorizontalProgressbarWithNumbers(Context context) {
		this(context, null);
	}

	public HorizontalProgressbarWithNumbers(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public HorizontalProgressbarWithNumbers(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		setHorizontalScrollBarEnabled(true);
		obtainStyledAttributeSet(attrs);
		mPaint.setColor(mTextColor);
		mPaint.setTextSize(mTextSize);
	}

	/**
	 * 获取xml中设置好的属性
	 * 
	 * @param attrs
	 */
	private void obtainStyledAttributeSet(AttributeSet attrs) {
		TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressbarWithNumbers);
		mTextColor = typedArray.getColor(R.styleable.HorizontalProgressbarWithNumbers_process_text_color, DEFAULT_TEXT_COLOR);
		mTextSize = (int) typedArray.getDimension(R.styleable.HorizontalProgressbarWithNumbers_process_text_size, mTextSize);
		mReachedBarColor = typedArray.getColor(R.styleable.HorizontalProgressbarWithNumbers_process_reached_color, mTextColor);
		mUnreachedBarColor = typedArray.getColor(R.styleable.HorizontalProgressbarWithNumbers_process_unreached_color, DEFAULT_PROCESS_UNREACHED_COLOR);
		mProcessReachedBarHeight = (int) typedArray.getDimension(R.styleable.HorizontalProgressbarWithNumbers_process_reached_bar_height, DEFAULT_PROCESS_REACHED_BAR_HEIGHT);
		mProcessUnreachedBarHeight = (int) typedArray.getDimension(R.styleable.HorizontalProgressbarWithNumbers_process_unreached_bar_height, DEFAULT_PROCESS_UNREACHED_BAR_HEIGHT);
		mTextOffset = typedArray.getInt(R.styleable.HorizontalProgressbarWithNumbers_process_text_offset, DEFAULT_PROCESS_TEXT_OFFSET);
		int textVisible = typedArray.getInt(R.styleable.HorizontalProgressbarWithNumbers_process_text_visibility, VISIBLE);
		if (textVisible != VISIBLE) {
			mIfDrawtext = false;
		}
		typedArray.recycle();
	}

	/**
	 * 所有的属性，包括进度条的宽度都是由用户自定义的，所以需要重新测量一下view的大小
	 */
	@Override
	protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		// 如果宽度模式为wrap_content,则进行测量
		if (heightMode != MeasureSpec.EXACTLY) {
			float textHeight = mPaint.ascent() + mPaint.descent();
			int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + Math.max(Math.max(mProcessReachedBarHeight, mProcessUnreachedBarHeight), Math.abs(textHeight)));
			// 重新设置宽度
			heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, MeasureSpec.EXACTLY);
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
		// 保存当前画布
		canvas.save();
		// 画笔平移到getPaddingLeft(),getHeight/2。以此为坐标原点(0,0)
		canvas.translate(getPaddingLeft(), getHeight() / 2);
		boolean noNeedBg = false;
		// 当前进度与最大值的比率
		float ratio = getProgress() * 1.0f / getMax();
		// 已到达的宽度
		float processPosX = ratio * mRealWidth;
		// 绘制的文本
		String text = getProgress() + "%";
		// 拿到字体的宽度和高度
		float textWidth = mPaint.measureText(text);
		float textHeight = (mPaint.ascent() + mPaint.descent()) / 2;

		// 如果到达最后，则未进行的部分不用绘制
		if (processPosX + textWidth > mRealWidth) {
			processPosX = mRealWidth - textWidth;
			noNeedBg = true;
		}

		// 绘制到达的进度
		float endX = processPosX - mTextOffset / 2;
		if (endX > 0) {
			mPaint.setColor(mReachedBarColor);
			mPaint.setStrokeWidth(mProcessReachedBarHeight);
			canvas.drawLine(0, 0, endX, 0, mPaint);
		}
		// 绘制文本
		if (mIfDrawtext) {
			mPaint.setColor(mTextColor);
			canvas.drawText(text, processPosX, -textHeight, mPaint);
		}
		// 绘制未到达的进度
		if (!noNeedBg) {
			float start = processPosX + textWidth + mTextOffset / 2;
			mPaint.setColor(mUnreachedBarColor);
			mPaint.setStrokeWidth(mProcessUnreachedBarHeight);
			canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
		}
		canvas.restore();
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		mRealWidth = w - getPaddingLeft() - getPaddingRight();
	}

	/**
	 * dp转换为px
	 * 
	 * @param dpVal
	 * @return
	 */
	public int dp2px(int dpVal) {
		return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());
	}

	/**
	 * sp转换为px
	 * 
	 * @param spVal
	 * @return
	 */
	public int sp2px(int spVal) {
		return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());
	}
}

RoundProgressbarWithNumbers.java

package com.beyole.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint.Cap;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;

import com.beyole.definedprogressbar.R;

public class RoundProgressbarWithNumbers extends HorizontalProgressbarWithNumbers {

	private int mRadius = dp2px(30);

	public RoundProgressbarWithNumbers(Context context) {
		this(context, null);
	}

	public RoundProgressbarWithNumbers(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public RoundProgressbarWithNumbers(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		mProcessReachedBarHeight = (int) (mProcessUnreachedBarHeight * 2.5f);
		TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressbarWithNumbers);
		mRadius = (int) typedArray.getDimension(R.styleable.RoundProgressbarWithNumbers_radius, mRadius);
		typedArray.recycle();
		mTextSize = sp2px(14);
		mPaint.setStyle(Style.STROKE);// 画笔类型 STROKE空心 FILL 实心 FILL_AND_STROKE
												// 用契形填充
		mPaint.setAntiAlias(true); // 防锯齿
		mPaint.setDither(true);// 防抖动
		mPaint.setStrokeCap(Cap.ROUND);// //画笔笔刷类型 如影响画笔但始末端
	}

	@Override
	protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);

		int paintWidth = Math.max(mProcessReachedBarHeight, mProcessUnreachedBarHeight);
		if (heightMode != MeasureSpec.EXACTLY) {
			int exceptHeight = getPaddingTop() + getPaddingBottom() + paintWidth + mRadius * 2;
			heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, MeasureSpec.EXACTLY);
		}

		if (widthMode != MeasureSpec.EXACTLY) {
			int exceptWidth = getPaddingLeft() + getPaddingRight() + mRadius * 2 + paintWidth;
			widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, MeasureSpec.EXACTLY);
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
		String progress = getProgress() + "%";
		float textWidth = mPaint.measureText(progress);
		float textHeight = (mPaint.ascent() + mPaint.descent()) / 2;
		canvas.save();
		canvas.translate(getPaddingLeft(), getPaddingTop());
		mPaint.setStyle(Style.STROKE);
		mPaint.setColor(mUnreachedBarColor);
		mPaint.setStrokeWidth(mProcessUnreachedBarHeight);
		canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
		mPaint.setColor(mReachedBarColor);
		mPaint.setStrokeWidth(mProcessReachedBarHeight);
		float sweepAngle = getProgress() * 1.0f / getMax() * 360;
		canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0, sweepAngle, false, mPaint);
		mPaint.setStyle(Style.FILL);
		canvas.drawText(progress, mRadius - textWidth / 2, mRadius - textHeight, mPaint);
		canvas.restore();
	}
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="HorizontalProgressbarWithNumbers">
        <attr name="process_unreached_color" format="color" />
        <attr name="process_reached_color" format="color" />
        <attr name="process_unreached_bar_height" format="dimension" />
        <attr name="process_reached_bar_height" format="dimension" />
        <attr name="process_text_size" format="dimension" />
        <attr name="process_text_color" format="color" />
        <attr name="process_text_offset" format="dimension" />
        <attr name="process_text_visibility" format="enum">
            <enum name="visible" value="0" />
            <enum name="invisiable" value="1" />
        </attr>
    </declare-styleable>
    <declare-styleable name="RoundProgressbarWithNumbers">
        <attr name="radius" format="dimension" />
    </declare-styleable>

</resources>

一直向钱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
android 自定义进度条

效果图：入口MainActivitypackage com.beyole.definedprogressbar;import com.beyole.view.HorizontalProgressbarWithNumbers;import android.app.Activity;import android.os.Bundle;import android.os.Han
复制链接

扫一扫