android 左右滑动进度
左右滑动进度游标源文件是别的大佬写的，我这个是在原来的基础上做了点删减；主要作为一次记录；以下便是修改后的完整代码；DoubleSlideSeekBar
·
左右滑动进度游标
源文件是别的大佬写的，我这个是在原来的基础上做了点删减；主要作为一次记录；以下便是修改后的完整代码；
#
public class DoubleSlideSeekBar extends View {
/**
* 线条（进度条）的宽度
*/
private int lineWidth;
/**
* 线条（进度条）的长度
*/
private int lineLength = 400;
/**
* 字所在的高度 100$
*/
private float textHeight;
private int textToImg = 20;//字体距离顶部图片的间距
/**
* 游标 图片宽度
*/
private int imageWidth;
/**
* 游标 图片高度
*/
private int imageHeight;
/**
* 左边的游标是否在动
*/
private boolean isLowerMoving;
/**
* 右边的游标是否在动
*/
private boolean isUpperMoving;
/**
* 字的大小 100$
*/
private int textSize;
/**
* 字的颜色 100$
*/
private int textColor;
/**
* 两个游标内部 线（进度条）的颜色
*/
private int inColor = Color.BLUE;
/**
* 两个游标外部 线（进度条）的颜色
*/
private int outColor = Color.BLUE;
/**
* 刻度的颜色
*/
private int ruleColor = Color.BLUE;
/**
* 刻度上边的字 的颜色
*/
private int ruleTextColor = Color.BLUE;
/**
* 左边图标的图片
*/
private Bitmap bitmapLow;
/**
* 右边图标 的图片
*/
private Bitmap bitmapBig;
/**
* 左边图标所在X轴的位置
*/
private int slideLowX;
/**
* 右边图标所在X轴的位置
*/
private int slideBigX;
/**
* 图标（游标） 高度
*/
private int bitmapHeight;
/**
* 图标（游标） 宽度
*/
private int bitmapWidth;
/**
* 加一些padding 大小酌情考虑 为了我们的自定义view可以显示完整
*/
private int paddingLeft = 25;
private int paddingRight = 25;
private int paddingTop = 20;
private int paddingBottom = 20;
/**
* 线（进度条） 开始的位置
*/
private int lineStart = paddingLeft;
/**
* 线的Y轴位置
*/
private int lineY;
/**
* 线（进度条）的结束位置
*/
private int lineEnd = lineLength + paddingLeft;
/**
* 选择器的最大值
*/
private int bigValue = 360;
/**
* 选择器的最小值
*/
private int smallValue = 0;
/**
* 选择器的当前最小值
*/
private float smallRange = 0;
/**
* 选择器的当前最大值
*/
private float bigRange = 360;
/**
* 单位 元
*/
private String unit = "";
/**
* 刻度线的高度
*/
private Paint linePaint;
private Paint bitmapPaint;
private Paint textPaint;
public DoubleSlideSeekBar(Context context) {
this(context, null);
}
public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DoubleSlideSeekBar, defStyleAttr, 0);
int size = typedArray.getIndexCount();
for (int i = 0; i < size; i++) {
int type = typedArray.getIndex(i);
if (type == R.styleable.DoubleSlideSeekBar_inColor) {
inColor = typedArray.getColor(type, Color.BLACK);
} else if (type == R.styleable.DoubleSlideSeekBar_lineHeight) {
lineWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 10f));
} else if (type == R.styleable.DoubleSlideSeekBar_outColor) {
outColor = typedArray.getColor(type, Color.YELLOW);
} else if (type == R.styleable.DoubleSlideSeekBar_textColor) {
textColor = typedArray.getColor(type, Color.BLUE);
} else if (type == R.styleable.DoubleSlideSeekBar_textSize) {
textSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
} else if (type == R.styleable.DoubleSlideSeekBar_imageLow) {
bitmapLow = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
} else if (type == R.styleable.DoubleSlideSeekBar_imageBig) {
bitmapBig = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
} else if (type == R.styleable.DoubleSlideSeekBar_imageheight) {
imageHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 20f));
} else if (type == R.styleable.DoubleSlideSeekBar_imagewidth) {
imageWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 20f));
} else if (type == R.styleable.DoubleSlideSeekBar_ruleColor) {
ruleColor = typedArray.getColor(type, Color.BLUE);
} else if (type == R.styleable.DoubleSlideSeekBar_ruleTextColor) {
ruleTextColor = typedArray.getColor(type, Color.BLUE);
} else if (type == R.styleable.DoubleSlideSeekBar_unit) {
unit = typedArray.getString(type);
} else if (type == R.styleable.DoubleSlideSeekBar_bigValue) {
bigValue = typedArray.getInteger(type, 100);
} else if (type == R.styleable.DoubleSlideSeekBar_smallValue) {
smallValue = typedArray.getInteger(type, 100);
}
}
typedArray.recycle();
init();
}
private void init() {
/**游标的默认图*/
if (bitmapLow == null) {
bitmapLow = BitmapFactory.decodeResource(getResources(), R.drawable.icon_bar_seek);
}
if (bitmapBig == null) {
bitmapBig = BitmapFactory.decodeResource(getResources(), R.drawable.icon_bar_seek);
}
/**游标图片的真实高度 之后通过缩放比例可以把图片设置成想要的大小*/
bitmapHeight = bitmapLow.getHeight();
bitmapWidth = bitmapLow.getWidth();
// 设置想要的大小
int newWidth = imageWidth;
int newHeight = imageHeight;
// 计算缩放比例
float scaleWidth = ((float) newWidth) / bitmapWidth;
float scaleHeight = ((float) newHeight) / bitmapHeight;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
/**缩放图片*/
bitmapLow = Bitmap.createBitmap(bitmapLow, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
bitmapBig = Bitmap.createBitmap(bitmapBig, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
/**重新获取游标图片的宽高*/
bitmapHeight = bitmapLow.getHeight();
bitmapWidth = bitmapLow.getWidth();
/*获取组件的内边距*/
paddingLeft = getPaddingLeft();
paddingRight = getPaddingRight();
paddingTop = getPaddingTop();
paddingBottom = getPaddingBottom();
/*初始化文字paint*/
if (textPaint == null) {
textPaint = new Paint();
}
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
textPaint.setAntiAlias(true);
textPaint.setTextAlign(Paint.Align.CENTER);
Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
textHeight = fontMetrics.bottom - fontMetrics.top;
//初始化线的画笔
linePaint = new Paint();
linePaint.setAntiAlias(true);
linePaint.setStrokeWidth(lineWidth);
linePaint.setColor(inColor);
linePaint.setStrokeCap(Paint.Cap.ROUND);
//初始化 大小值
smallRange = smallValue;
bigRange = bigValue;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getMyMeasureWidth(widthMeasureSpec);
int height = getMyMeasureHeight(heightMeasureSpec);
setMeasuredDimension(width, height);
}
private int getMyMeasureHeight(int heightMeasureSpec) {
int mode = MeasureSpec.getMode(heightMeasureSpec);
int size = MeasureSpec.getSize(heightMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
size = (int) Math.max(size, paddingBottom + paddingTop + bitmapHeight + textHeight / 2 + 5 + textToImg);
} else {
//wrap content
int height = (int) (paddingBottom + paddingTop + bitmapHeight + textHeight / 2 + 5 + textToImg);
size = Math.min(size, height);
}
return size;
}
private int getMyMeasureWidth(int widthMeasureSpec) {
int mode = MeasureSpec.getMode(widthMeasureSpec);
int size = MeasureSpec.getSize(widthMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
size = Math.max(size, paddingLeft + paddingRight + lineWidth + bitmapWidth);
} else {
//wrap content
int width = paddingLeft + paddingRight + lineWidth + bitmapWidth;
size = Math.min(size, width);
}
// match parent 或者 固定大小 此时可以获取线（进度条）的长度
lineLength = size - paddingLeft - paddingRight - bitmapWidth;
//线（进度条）的结束位置
lineEnd = lineLength + paddingLeft + bitmapWidth / 2;
//线（进度条）的开始位置
lineStart = paddingLeft + bitmapWidth / 2;
//初始化 游标位置
slideBigX = lineEnd;
slideLowX = lineStart;
return size;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Y轴 坐标
lineY = paddingTop + bitmapHeight / 2;
//画线
linePaint.setColor(inColor);
canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);
linePaint.setColor(outColor);
//画 外部线
canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);
canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);
//画游标
if (bitmapPaint == null) {
bitmapPaint = new Paint();
}
canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
//画 游标上边的字
String minRange = String.format("%.0f" + unit, smallRange);
String maxRange = String.format("%.0f" + unit, bigRange);
canvas.drawText(minRange, slideLowX, lineY + bitmapHeight / 2 + textToImg + textHeight / 2, textPaint);
canvas.drawText(maxRange, slideBigX, lineY + bitmapHeight / 2 + textToImg + textHeight / 2, textPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//事件机制
super.onTouchEvent(event);
float nowX = event.getX();
float nowY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//按下 在线（进度条）范围上
boolean rightY = Math.abs(nowY - lineY) < bitmapHeight / 2;
//按下 在左边游标上
boolean lowSlide = Math.abs(nowX - slideLowX) < bitmapWidth / 2;
//按下 在右边游标上
boolean bigSlide = Math.abs(nowX - slideBigX) < bitmapWidth / 2;
if (rightY && lowSlide) {
isLowerMoving = true;
} else if (rightY && bigSlide) {
isUpperMoving = true;
//点击了游标外部 的线上
} else if (nowX >= lineStart && nowX <= slideLowX - bitmapWidth / 2 && rightY) {
slideLowX = (int) nowX;
updateRange();
postInvalidate();
} else if (nowX <= lineEnd && nowX >= slideBigX + bitmapWidth / 2 && rightY) {
slideBigX = (int) nowX;
updateRange();
postInvalidate();
}
break;
case MotionEvent.ACTION_MOVE:
//左边游标是运动状态
if (isLowerMoving) {
//当前 X坐标在线上 且在右边游标的左边
if (nowX <= slideBigX && nowX >= lineStart - bitmapWidth / 2) {//可重合
// if (nowX <= slideBigX - bitmapWidth && nowX >= lineStart - bitmapWidth / 2) {//不可重合
slideLowX = (int) nowX;
if (slideLowX < lineStart) {
slideLowX = lineStart;
}
//更新进度
updateRange();
postInvalidate();
}
} else if (isUpperMoving) {
//当前 X坐标在线上 且在左边游标的右边
// if (nowX >= slideLowX + bitmapWidth && nowX <= lineEnd + bitmapWidth / 2) {//不可重合
if (nowX >= slideLowX && nowX <= lineEnd + bitmapWidth / 2) { //可重合
slideBigX = (int) nowX;
if (slideBigX > lineEnd) {
slideBigX = lineEnd;
}
//更新进度
updateRange();
postInvalidate();
}
}
break;
//手指抬起
case MotionEvent.ACTION_UP:
isUpperMoving = false;
isLowerMoving = false;
break;
default:
break;
}
return true;
}
private void updateRange() {
//当前 左边游标数值
smallRange = computRange(slideLowX);
//当前 右边游标数值
bigRange = computRange(slideBigX);
//接口 实现值的传递
if (onRangeListener != null) {
onRangeListener.onRange(smallRange, bigRange);
}
}
/**
* 获取当前值
*/
private float computRange(float range) {
return (range - lineStart) * (bigValue - smallValue) / lineLength + smallValue;
}
public int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 获取当前Slide值
*/
private float computSlide(float range) {
return (range - smallValue) * lineLength / (bigValue - smallValue) + lineStart;
}
/**
* 重置值
*/
public void resetRange(float low, float big) {
this.smallRange = low;
this.bigRange = big;
slideLowX = (int) computSlide(low);
slideBigX = (int) computSlide(big);
postInvalidate();
}
/**
* 写个接口 用来传递最大最小值
*/
public interface onRangeListener {
void onRange(float low, float big);
}
private onRangeListener onRangeListener;
public void setOnRangeListener(DoubleSlideSeekBar.onRangeListener onRangeListener) {
this.onRangeListener = onRangeListener;
}
}
资源文件
<!--线（进度条）宽度-->
<attr name="lineHeight" format="dimension" />
<!--字的大小 100元-->
<attr name="textSize" format="dimension" />
<!--字的颜色 100元-->
<attr name="textColor" format="color" />
<!--两个游标内部 线（进度条）的颜色-->
<attr name="inColor" format="color" />
<!--两个游标外部 线（进度条）的颜色-->
<attr name="outColor" format="color" />
<!--左边图标的图片-->
<attr name="imageLow" format="reference"/>
<!--右边图标 的图片-->
<attr name="imageBig" format="reference"/>
<!--游标 图片宽度-->
<attr name="imagewidth" format="dimension" />
<!--游标 图片高度-->
<attr name="imageheight" format="dimension" />
<!--是否有刻度线-->
<attr name="hasRule" format="boolean" />
<!--刻度的颜色-->
<attr name="ruleColor" format="color" />
<!--刻度上边的字 的颜色-->
<attr name="ruleTextColor" format="color" />
<!--单位 元-->
<attr name="unit" format="string"/>
<!--单位份数-->
<attr name="equal" format="integer"/>
<!--刻度单位 $-->
<attr name="ruleUnit" format="string"/>
<!--刻度上边文字的size-->
<attr name="ruleTextSize" format="dimension" />
<!--刻度线的高度-->
<attr name="ruleLineHeight" format="dimension" />
<!--选择器的最大值-->
<attr name="bigValue" format="integer"/>
<!--选择器的最小值-->
<attr name="smallValue" format="integer"/>
<declare-styleable name="DoubleSlideSeekBar">
<attr name="lineHeight" />
<attr name="textSize" />
<attr name="textColor" />
<attr name="inColor" />
<attr name="outColor" />
<attr name="imageLow"/>
<attr name="imageBig"/>
<attr name="imagewidth" />
<attr name="imageheight" />
<attr name="hasRule" />
<attr name="ruleColor" />
<attr name="ruleTextColor" />
<attr name="unit" />
<attr name="equal" />
<attr name="ruleUnit" />
<attr name="ruleTextSize" />
<attr name="ruleLineHeight" />
<attr name="bigValue" />
<attr name="smallValue" />
</declare-styleable>
xml布局:
<com.cn.app.widget.DoubleSlideSeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="5dp"
app:imageheight="22dp"
app:imagewidth="20dp"
app:inColor="#9B91CD"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv"
app:lineHeight="2dp"
app:outColor="#E3E2ED"
app:textColor="#9B91CD"
app:textSize="14sp" />
第一次用，主要用于记录，如有冒犯还请见谅！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)