自定义刻度尺进度条

于 2021-04-14 17:02:19 发布
阅读量301 收藏
点赞数
分类专栏： Android自定义UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m107119232/article/details/115703555
版权

自定义刻度尺进度条代码记录下

package com.myf.ruler;

import android.animation.TimeAnimator;
import android.animation.TimeAnimator.TimeListener;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * 刻度进度条
 * @author Mengyf
 *
 */
@SuppressLint({ "NewApi", "DefaultLocale" }) 
public class RulerProgressBar extends View{
	/** 绘制刻度的画笔 */
	private Paint mPaintRuler;
	/** 绘制刻度尺颜色 */
	private int mRulerColor = Color.RED;
	/** 设置刻度之间的距离 */
	private int mRulerDistance = 5;
	/** 绘制刻度尺高度 */
	private int mRulerHeight = 100;
	/** 绘制刻度尺宽度 */
	private int mRulerWidth;
	/** 进度值 */
	private int mProgress;
	/** 最大值 */
	private int mMax = 100;
	/** 设置托块的宽度 */
	private float mRulerThumbWidth = 2;
	/** 设置托块的高度 */
	private float mRulerThumbHeight = 100;
	/** 设置拖块的颜色 */
	private int mRulerThumbColor = Color.BLUE;
	/** 动画 */
	private TimeAnimator mTimeAnimator;
	/** 拖块的偏移量 */
	private float mThumbOffset = 0;
	/** 记录目标偏移量 */
	private float mTargetOffset;
	/** 设置动画执行速度 */
	private float mAnimSpeed = 1f;
	/** 设置文字大小 */
	private float mTextSize = 30;
	
	private IOnProgressChangeListener mL;
	/** 记录上一次的值 */
	private int mLastProgress = -1;
	/** 是否显示文本 */
	private boolean isShowText = false;
    
    /**
     * 圆形进度
     * @param l
     */
    public void setOnProgressChangeListener(IOnProgressChangeListener l) {
    	mL = l;
	}
    
    /**
     * 进度值改变监听
     * @author ZH-SW-Mengyf
     *
     */
    public interface IOnProgressChangeListener{
    	/**
    	 * 环形进度条
    	 * @param rectangularView
    	 * @param progress
    	 */
		void progressChange(RulerProgressBar rulerProgressBar, int progress,boolean isAniming);
    }
    
	/**
	 * 通知进度改变
	 * @param progress
	 * @param isAniming
	 */
	private void notifyProgressChange(int progress,boolean isAniming) {
		if (mL != null) {
			if (mLastProgress != progress||!isAniming) {
				mLastProgress = progress;
				mL.progressChange(this, progress, isAniming);
			}
		}
	}
	
	public RulerProgressBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(context);
	}

	public RulerProgressBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}

	public RulerProgressBar(Context context) {
		super(context);
		init(context);
	}
	
	private void init(Context context){
		initPaintRuler();
		setRulerColor(Color.RED);
		setRulerDistance(10);
		setMax(50);
		setRulerHeight(100);
		setRulerWidth(3);
		setRulerThumbWidth(3);
		setRulerThumbColor(Color.BLUE);
		setRulerThumbHeight(100);
		setProgress(21);
		setAnimSpeed(2);
		setShowText(true);
	}
	
	/**
	 * 初始化刻度画笔
	 */
	private void initPaintRuler() {
		mPaintRuler = new Paint(); 
		mPaintRuler.setAntiAlias(true);
	}
	
	/**
	 * 绘制线颜色
	 * @param lineColor
	 */
	private void setRulerColor(int rulerColor) {
		mRulerColor = rulerColor;
		invalidate();
	}

	/**
	 * 设置刻度之间的距离
	 */
	public void setRulerDistance(int rulerDistance) {
		mRulerDistance = rulerDistance;
		invalidate();
	}
	
	/**
	 * 获取刻度之间的距离
	 */
	public int getRulerDistance() {
		return mRulerDistance;
	}
	
	/**
	 * 绘制刻度尺高度
	 */
	public void setRulerHeight(int rulerHeight) {
		mRulerHeight = rulerHeight;
		invalidate();
	}
	
	/**
	 * 绘制刻度尺线宽度
	 */
	public void setRulerWidth(int rulerWidth) {
		mRulerWidth = rulerWidth;
		invalidate();
	}
	
	/**
	 * 获取刻度尺线宽度
	 * @return
	 */
	public int getRulerWidth() {
		return mRulerWidth;
	}
	
	/**
	 * 设置动画执行的速度
	 * 
	 * @param animSpeed
	 */
	public void setAnimSpeed(float animSpeed) {
		if (animSpeed < 0.1) {
			animSpeed = 0.1f;
		}
		mAnimSpeed = animSpeed;
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		final int minimumWidth = getSuggestedMinimumWidth();
		final int minimumHeight = getSuggestedMinimumHeight();
		int width = measureWidth(minimumWidth, widthMeasureSpec);
		int height = measureHeight(minimumHeight, heightMeasureSpec);
		setMeasuredDimension(width, height);
	}
	
	/**
	 * 测量宽度
	 * @param defaultWidth
	 * @param measureSpec
	 * @return
	 */
	private int measureWidth(int defaultWidth, int measureSpec) {
		int specMode = MeasureSpec.getMode(measureSpec);
		int specSize = MeasureSpec.getSize(measureSpec);
		switch (specMode) {
		case MeasureSpec.AT_MOST:
			defaultWidth = mRulerDistance * getMax() + mRulerWidth +getPaddingStart()+getPaddingEnd();
			break;
			
		case MeasureSpec.EXACTLY:
			defaultWidth = specSize;
			break;
			
		case MeasureSpec.UNSPECIFIED:
			defaultWidth = Math.max(defaultWidth, specSize);
		}
		return defaultWidth;
	}
	
	/**
	 * 测量高度
	 * @param defaultHeight
	 * @param measureSpec
	 * @return
	 */
	private int measureHeight(int defaultHeight, int measureSpec) {
		int specMode = MeasureSpec.getMode(measureSpec);
		int specSize = MeasureSpec.getSize(measureSpec);
		switch (specMode) {
		case MeasureSpec.AT_MOST:
			defaultHeight = mRulerHeight;
			break;
			
		case MeasureSpec.EXACTLY:
			defaultHeight = specSize;
			break;
			
		case MeasureSpec.UNSPECIFIED:
			defaultHeight = Math.max(defaultHeight, specSize);
			break;
		}
		return defaultHeight;

	}

	/**
	 * 绘制刻度拖块颜色
	 * @param rulerThumbColor
	 */
	private void setRulerThumbColor(int rulerThumbColor) {
		mRulerThumbColor = rulerThumbColor;
		invalidate();
	}
	
	/**
	 * 绘制刻度拖块宽度
	 * @param rulerThumbWidth
	 */
	private void setRulerThumbWidth(float rulerThumbWidth) {
		mRulerThumbWidth = rulerThumbWidth;
		invalidate();
	}
	
	/**
	 * 绘制刻度拖块高度
	 * @param rulerThumbWidth
	 */
	private void setRulerThumbHeight(float rulerThumbHeight) {
		mRulerThumbHeight = rulerThumbHeight;
		invalidate();
	}
	
	/**
	 * 设置最大值
	 * 
	 * @param max
	 */
	public void setMax(int max) {
		if (max < 0) {
			max = 0;
		}
		if (max != mMax) {
			mMax = max;
			postInvalidate();

			if (mProgress > max) {
				mProgress = max;
			}
			refreshProgress(mProgress, false);
		}
	}

	/**
	 * 或者最大值
	 * 
	 * @return
	 */
	public int getMax() {
		return mMax;
	}
	
	/**
	 * 设置进度值
	 * @param progress
	 */
	public void setProgress(int progress) {
		setProgress(progress, false, true);
	}
	
	/**
	 * 设置进度值
	 * @param progress
	 */
	public void setProgress(int progress ,boolean anim) {
		setProgress(progress, anim, true);
	}
	
	/**
	 * 设置进度
	 * 
	 * @param progress
	 * @param fromUser
	 * @param refreshProgress
	 */
	public void setProgress(int progress, boolean anim, boolean refreshProgress) {
		if (progress < 0) {
			progress = 0;
		}

		if (progress > mMax) {
			progress = mMax;
		}

		if (progress != mProgress || refreshProgress) {
			mProgress = progress;
			if (refreshProgress) {
				refreshProgress(mProgress, anim);
			}
		}
	}

	/**
	 * 获取进度
	 * 
	 * @return
	 */
	public int getProgress() {
		return mProgress;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		drawRuler(canvas);
		drawRulerThumb(canvas);
	}

	/**
	 * 绘制刻度
	 * @param canvas
	 */
	private void drawRuler(Canvas canvas) {
		mPaintRuler.setColor(mRulerColor);
		mPaintRuler.setStrokeWidth(mRulerWidth);
		mPaintRuler.setStrokeCap(Paint.Cap.ROUND);
		for (int i = 0; i <= getMax(); i++) {
			float rulerPosition = getRulerPosition(i);
			float startX = rulerPosition + getPaddingStart();
			float startY = 0 + getPaddingTop();
			float stopX = rulerPosition + getPaddingStart();
			float stopY = mRulerHeight - getPaddingBottom();
			
			if (i % 10 == 0) {
				stopY = mRulerHeight / 1.5f;
				canvas.drawLine(startX, startY, stopX, stopY, mPaintRuler);
				drawRulerText(canvas, i, startX, stopY);
			}else if(i % 5 == 0){
				stopY = mRulerHeight / 2.0f;
				canvas.drawLine(startX, startY, stopX, stopY, mPaintRuler);
			}else{
				stopY = mRulerHeight / 3f;
				canvas.drawLine(startX, startY, stopX, stopY, mPaintRuler);
			}
		}
	}

	/**
	 * 设置文字大小
	 * @param textSize
	 */
	public void setTextSize(float textSize ) {
		mTextSize = textSize;
		invalidate();
	}

	/**
	 * 显示文本
	 * @param showText
	 */
	public void setShowText(boolean showText) {
		isShowText = showText;
		setPadding((int)mTextSize, getPaddingTop(), (int)mTextSize , getPaddingBottom());
		invalidate();
	}
	
	/**
	 * 绘制刻度尺文字
	 * @param canvas
	 */
	private void drawRulerText(Canvas canvas,int i, float startX, float startY) {
		if (isShowText) {
			String text = String.valueOf(i);
			mPaintRuler.setTextSize(mTextSize);
			float valueW = mPaintRuler.measureText(text);
			canvas.drawText(text, startX - valueW / 2, startY + mTextSize, mPaintRuler);
		}
	}
	
	/**
	 * 获取每个刻度的位置
	 * @param i
	 * @return
	 */
	private float getRulerPosition(int i) {
		return mRulerWidth / 2 + i * mRulerDistance;
	}
	
	/**
	 * 绘制刻度拖块
	 * @param canvas
	 */
	private void drawRulerThumb(Canvas canvas) {
		mPaintRuler.setColor(mRulerThumbColor);
		mPaintRuler.setStrokeWidth(mRulerThumbWidth);
		mPaintRuler.setStrokeCap(Paint.Cap.ROUND);
		float startX = mThumbOffset + getPaddingStart();
		float startY = 0 + getPaddingTop();
		float stopX = mThumbOffset + getPaddingStart();
		float stopY = mRulerThumbHeight - getPaddingBottom();
		canvas.drawLine(startX, startY, stopX, stopY, mPaintRuler);
	}
	
	/**
	 * 获取每个刻度的位置
	 * @param i
	 * @return
	 */
	private float getRulerThumbPosition(int i) {
		return mRulerThumbWidth / 2 + i * mRulerDistance;
	}

	/**
	 * 刷新进度值
	 * 
	 * @param progress
	 */
	protected void refreshProgress(int progress , boolean isAnim) {
		if (isAnim) {
			setAnim(getRulerThumbPosition(progress));
		}else{
			mProgress = progress;
			refreshThumbOffset(getRulerThumbPosition(progress));
			notifyProgressChange(mProgress, false);
		}
	}
	
	/**
	 * 刷新托快的偏移量
	 * @param offset
	 */
	protected void refreshThumbOffset(float offset) {
		stopAnim();
		mThumbOffset = getThumbValidOffset(offset);
		invalidate();
	}
	
	/**
	 * 设置动画效果
	 * @param offset
	 */
	@SuppressLint("NewApi") 
	private void setAnim(final float offset) {
		mTargetOffset = offset;
		if (mTimeAnimator == null) {
			mTimeAnimator = new TimeAnimator();
			mTimeAnimator.setTimeListener(new TimeListener() {
				
				@Override
				public void onTimeUpdate(TimeAnimator animation, long totalTime, long deltaTime) {
					//意思就是传递进来的mTargetOffset值如果大于现有的mThumbOffset，那么就应该自增达到mTargetOffset
					if (mTargetOffset > mThumbOffset) {
						mThumbOffset = getTempOffset(true);
						mProgress = (int) (mThumbOffset / mRulerDistance);
						notifyProgressChange(mProgress, true);
						//当mThumbOffset在进行自增，等于或者大于了目标值mTargetOffset，就应该停止
						if (mTargetOffset <= mThumbOffset) {
							mThumbOffset = mTargetOffset;
							notifyProgressChange(mProgress, false);
							stopAnim();
						}
					} 
					//意思就是传递进来的mTargetOffset值如果小于现有的mThumbOffset，那么就应该自减达到mTargetOffset
					else if (mTargetOffset < mThumbOffset) {
						mThumbOffset = getTempOffset(false);
						mProgress = (int) (mThumbOffset / mRulerDistance);
						notifyProgressChange(mProgress, true);
						//当mThumbOffset在进行自减，等于或者小于了目标值mTargetOffset，就应该停止
						if (mTargetOffset >= mThumbOffset) {
							mThumbOffset = mTargetOffset;
							notifyProgressChange(mProgress, false);
							stopAnim();
						}
					}else{
						stopAnim();
					}
					postInvalidate();
				}
			});
		}
		startAnim();
	}
	
	/**
	 * 获取临时，自增，或者自减偏移量
	 * @param isAdd
	 * @return
	 */
	private float getTempOffset(boolean isAdd) {
		float offset;
		if (isAdd) {
			offset = mThumbOffset + mAnimSpeed;
		} else {
			offset = mThumbOffset - mAnimSpeed;
		}
		
		offset = getThumbValidOffset(offset);
		return offset;
	}
	
	/**
	 * 获取有效的偏移量
	 * @return
	 */
	protected float getThumbValidOffset(float offset) {
		int maxOffset = (int) (mMax * mRulerDistance + mRulerThumbWidth);
		if (offset > maxOffset) {
			offset = maxOffset;
		}
		if (offset < 0) {
			offset = 0;
		}
		return offset;
	}
	
	/**
	 * 开机动画
	 */
	private void startAnim() {
		if (mTimeAnimator != null && !mTimeAnimator.isStarted()) {
			mTimeAnimator.start();
		}
	}

	/**
	 * 结束动画
	 */
	private void stopAnim() {
		if (mTimeAnimator != null && mTimeAnimator.isStarted()) {
			mTimeAnimator.end();
		}
	}
}

 

蒙永峰
关注
专栏目录
Android自定义带进度的刻度条
Chase_Java的博客
11-30 3303
如何自定义控件？ 1.自定义属性的声明和获取； 2.测量onMeasure； 3.布局onLayout（ViewGroup）； 4.绘制onDraw； 5.onTouchEvent； 6.onInterceptTouchEvent（ViewGroup）; 7.状态的恢复与保存（与Activity生命周期有关）；自定义绘制的PrograssBar的水平进度条如下 有刻度 刻度在中间显示
android 带刻度的滑动条_Android自定义控件尺子 滚动刻度尺
weixin_33365244的博客
12-23 513
自定义控件是件很有乐趣的事，慢慢的会爱上它，哈哈哈。废话不多说先上设计图 接下来我们我们要先分析一下页面中需要到哪些东西1.一条无限长的底线；2.一根在屏幕中间的红色标记线，代表当前位置；3.一个半透明的蓝色背景，改背景超过部分才会被展现；4.刻度 整数高一点刻度 非整第一点的刻度5.一个大刻度上都会标的数值6.滚动接下来进入正题，让我们开始绘制：首先我们先给控件定义它的属性，根据刚才的分析我给...
带刻度进度条
03-17
android mark progress bar 带刻度进度条、滑动条
带刻度的自定义SeekBar
10-19
仿QQ设置字体大小、带刻度的SeekBar。 思路:自定义view其实就像一个画画过程，步骤如下： a：首先画刻度条； b：刻度描述； c：然后画拖动块； d：响应手势。
时间刻度-进度条
09-19
模仿海康的存储设备录像回放的进度条，时间刻度，录像状态条，动态刷新
自定义刻度jQuery进度条及插件
10-23
自定义刻度jq进度条可以自定义进度条刻度圆点数量，大小等相关属性，可以通过css控制圆点的外观样式，通过progressdots插件自定义刻度动画，使用该插件还需引入jquery，jquery.progressdots.js和jquery.progressdots...
Android 自定义View实现环形带刻度的进度条
06-19
刻度尺是进度条的重要组成部分，用于显示进度的细节。我们可以利用`Canvas`的`drawLine`方法在圆环内画出一系列的线来表示刻度。通过计算每个刻度的角度和起点、终点坐标，确保它们均匀分布在圆环内部。为了美观，...
Android 自定义View实现环形带刻度颜色渐变的进度条
07-01
本篇文章将深入探讨如何实现一个环形带刻度颜色渐变的进度条，这种进度条常用于显示旋转动画或者加载进度，具有较高的视觉吸引力。 首先，我们需要创建一个新的Java类继承自`View`，并重写`onDraw()`方法，这是绘制...
Android实现底部带刻度的进度条样式
08-25
本篇文章将探讨如何实现一个底部带有刻度的进度条样式。这种进度条的特点是刻度可以根据应用的需要动态变化，因此不能简单地使用预设的背景图片。下面我们将详细介绍如何自定义一个这样的控件。 首先，我们需要创建...
Qt自定义控件实现圆盘进度条
08-25
Qt自定义控件实现圆盘进度条 本文详细介绍了Qt自定义控件实现圆盘进度条的方法，包括了实现圆盘进度条的主要思路和代码实现。通过使用qpainter根据图形需求画圆和圆弧，画指针（多边形，指定坐标即可），根据具体的...
带刻度进度条 seekbar
03-19
带刻度进度条 seekbar
js实现移动端H5页面手指滑动刻度尺功能
09-28
主要介绍了js实现H5页面手指滑动刻度尺功能,需要的朋友可以参考下
android自定义环形进度条（类似仪表盘）
01-05
android自定义环形进度条（类似仪表盘）
可以设置刻度的进度条
最后一班地铁的专栏
06-19 3326
        现在做的软件上要用图形来显示串口传过来的信号值大小，最简单的办法，莫过于用进度条显示了。但是在使用的过程中发现一个问题，就是没有刻度。如果有美工，问题也好解决，在没有美工的情况下，只好靠自己动手DIY了。       由于以前没有做过控件，就在网上找了别人做的拿来参考，于是，就发现了颜色渐变进度条的代码。这个代码严格说来并不完全，进度条只能横着不能竖起来。在读懂了颜色渐变进度条
Android自定义一个属于自己的刻度尺
dalong的博客
12-16 7237
概述       本文只要说的是自定义一个刻度尺，正好学习下android自定义控件，之前写过一篇《Android自定义一个属于自己的时间钟表》，大家如果感兴趣可以去看下，好了不扯淡了，直接上效果： 看到这个效果以后估计好多新手会觉得不知道如何入手，但是要是大神看到了就会想用什么方式实现才是最好的。这就是差距啊，没办法像我这个菜鸟只好参考下其他实现方法，写了这个demo
圆形带刻度的进度条
srh869357630的专栏
01-25 1113
从网上下载的代码，稍微修改了下，为了防止忘掉，就先写到这了 类似小米安全中心安全度刻度显示 源码地址：链接: http://pan.baidu.com/s/1MXGmE 密码: f2pz
自定义progressBar（进度条）
rabinrow002的博客
12-28 373
首先在drawable文件夹下画出progressBar的形状 shape_progressbar.xml <gradient android:angle="270" android:centerY="0.75"
Android一个底部带刻度的进度条
忆，学海之路
10-14 1836
由于公司需要一个带刻度的进度条样式，网上找了一圈，有些是加个刻度的背景图片，这样对于我的项目来说，不合适，因为刻度需要动态去改变，所以换背景图片的方案肯定是不行的，唯一的办法就是自己绘制一个进度条，进度条的绘制相对来说是比较简单的。我自己对自定义控件这一块也不是很了解，全当学习一下吧，写这篇博客也是记录一下，如果有人也有这样样式的进度条需求，也可以直接拿过去用，比较自己也用过很多大...
自定义滚动刻度尺控件
一杯苦芥的专栏
04-15 506
目前支持的自定义属性&lt;declare-styleable name="ScaleView"&gt; &lt;!-- 基线是否显示 --&gt; &lt;attr name="baseLineEnable" format="boolean" /&gt; &lt;!-- 基线的颜色 --&gt; &lt;attr name="base
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值