本文实例为大家分享了Android双向选择控件DoubleSeekBar的使用方法，供大家参考，具体内容如下先看效果图
1.DoubleSlideSeekBar
public class DoubleSlideSeekBar extends View {/*** 线条（进度条）的宽度*/ private int lineWidth;/*** 线条（进度条）的长度*/ private int lineLength = 400;/*** 字所在的高度 100$*/ private int textHeight;/*** 游标 图片宽度*/ private int imageWidth;/*** 游标 图片高度*/ private int imageHeight;/*** 是否有刻度线*/ private boolean hasRule;/*** 左边的游标是否在动*/ 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 = 100;private int paddingRight = 100;private int paddingTop = 50;private int paddingBottom = 10;/*** 线（进度条） 开始的位置*/ private int lineStart = paddingLeft;/*** 线的Y轴位置*/ private int lineY;/*** 线（进度条）的结束位置*/ private int lineEnd = lineLength + paddingLeft;/*** 选择器的最大值*/ private int bigValue = 100;/*** 选择器的最小值*/ private int smallValue = 0;/*** 选择器的当前最小值*/ private float smallRange;/*** 选择器的当前最大值*/ private float bigRange;/*** 单位 元*/ private String unit = " ";/*** 单位份数*/ private int equal = 20;/*** 刻度单位 $*/ private String ruleUnit = " ";/*** 刻度上边文字的size*/ private int ruleTextSize = 20;/*** 刻度线的高度*/ private int ruleLineHeight = 20;private Paint linePaint;private Paint bitmapPaint;private Paint textPaint;private Paint paintRule;
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);switch (type) {case R.styleable.DoubleSlideSeekBar_inColor:inColor = typedArray.getColor(type, Color.BLACK);break;case R.styleable.DoubleSlideSeekBar_lineHeight:lineWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 10));break;case R.styleable.DoubleSlideSeekBar_outColor:outColor = typedArray.getColor(type, Color.YELLOW);break;case R.styleable.DoubleSlideSeekBar_textColor:textColor = typedArray.getColor(type, Color.BLUE);break;case R.styleable.DoubleSlideSeekBar_textSize:textSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));break;case R.styleable.DoubleSlideSeekBar_imageLow:bitmapLow = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));break;case R.styleable.DoubleSlideSeekBar_imageBig:bitmapBig = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));break;case R.styleable.DoubleSlideSeekBar_imageheight:imageHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 20));break;case R.styleable.DoubleSlideSeekBar_imagewidth:imageWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 20));break;case R.styleable.DoubleSlideSeekBar_hasRule:hasRule = typedArray.getBoolean(type, false);break;case R.styleable.DoubleSlideSeekBar_ruleColor:ruleColor = typedArray.getColor(type, Color.BLUE);break;case R.styleable.DoubleSlideSeekBar_ruleTextColor:ruleTextColor = typedArray.getColor(type, Color.BLUE);break;case R.styleable.DoubleSlideSeekBar_unit:unit = typedArray.getString(type);break;case R.styleable.DoubleSlideSeekBar_equal:equal = typedArray.getInt(type, 10);break;case R.styleable.DoubleSlideSeekBar_ruleUnit:ruleUnit = typedArray.getString(type);break;case R.styleable.DoubleSlideSeekBar_ruleTextSize:ruleTextSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));break;case R.styleable.DoubleSlideSeekBar_ruleLineHeight:ruleLineHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 10));break;case R.styleable.DoubleSlideSeekBar_bigValue:bigValue = typedArray.getInteger(type, 100);break;case R.styleable.DoubleSlideSeekBar_smallValue:smallValue = typedArray.getInteger(type, 100);break;
default:break;}}typedArray.recycle();init();}
private void init() {/**游标的默认图*/ if (bitmapLow == null) {bitmapLow = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);}if (bitmapBig == null) {bitmapBig = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);}/**游标图片的真实高度 之后通过缩放比例可以把图片设置成想要的大小*/ 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();/**初始化两个游标的位置*/ slideLowX = lineStart;slideBigX = lineEnd;smallRange = smallValue;bigRange = bigValue;if (hasRule) {//有刻度时 paddingTop 要加上（text高度）和（刻度线高度加刻度线上边文字的高度和） 之间的最大值paddingTop = paddingTop + Math.max(textSize, ruleLineHeight + ruleTextSize);} else {//没有刻度时 paddingTop 加上 text的高度paddingTop = paddingTop + textSize;}}
@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) {// matchparent 或者 固定大小 view最小应为 paddingBottom + paddingTop + bitmapHeight + 10 否则显示不全size = Math.max(size, paddingBottom + paddingTop + bitmapHeight + 10);} else {//wrap content int height = paddingBottom + paddingTop + bitmapHeight + 10;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 + bitmapWidth * 2);
} else {//wrap content int width = paddingLeft + paddingRight + bitmapWidth * 2;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 = getHeight() - paddingBottom - bitmapHeight / 2;// 字所在高度 100$textHeight = lineY - bitmapHeight / 2 - 10;// //是否画刻度// if (hasRule) {// drawRule(canvas);// }// if (linePaint == null) {// linePaint = new Paint();// }linePaint = new Paint();//画内部线linePaint.setAntiAlias(true);linePaint.setStrokeWidth(lineWidth);linePaint.setColor(inColor);linePaint.setStrokeCap(Paint.Cap.ROUND);canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);linePaint.setColor(outColor);linePaint.setStrokeCap(Paint.Cap.ROUND);//画 外部线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);//画 游标上边的字if (textPaint == null) {textPaint = new Paint();}textPaint.setColor(textColor);textPaint.setTextSize(textSize);textPaint.setAntiAlias(true);canvas.drawText(String.format("%.0f" + unit, smallRange), slideLowX - bitmapWidth / 2, textHeight, textPaint);canvas.drawText(String.format("%.0f" + unit, bigRange), slideBigX - bitmapWidth / 2, textHeight, 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 - 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) {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);}
// /**// * 画刻度// */// protected void drawRule(Canvas canvas) {// if (paintRule == null) {// paintRule = new Paint();// }// paintRule.setStrokeWidth(1);// paintRule.setTextSize(ruleTextSize);// paintRule.setTextAlign(Paint.Align.CENTER);// paintRule.setAntiAlias(true);// //遍历 equal份,画刻度// for (int i = smallValue; i <= bigValue; i += (bigValue - smallValue) / equal) {// float degX = lineStart + i * lineLength / (bigValue - smallValue);// int degY = lineY - ruleLineHeight;// paintRule.setColor(ruleColor);// canvas.drawLine(degX, lineY, degX, degY, paintRule);// paintRule.setColor(ruleTextColor);// canvas.drawText(String.valueOf(i) + ruleUnit, degX, degY, paintRule);// }// }
/*** 写个接口 用来传递最大最小值*/ public interface onRangeListener {void onRange(float low, float big);}
private onRangeListener onRangeListener;
public void setOnRangeListener(DoubleSlideSeekBar.onRangeListener onRangeListener) {this.onRangeListener = onRangeListener;}}
2.在values文件夹中创建attrs.xml
3.activity_main.XML布局
4.MainActivity
public class MainActivity extends AppCompatActivity {
private DoubleSlideSeekBar mDoubleslideWithrule;private TextView mTvMinRule;private TextView mTvMaxRule;
@Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mDoubleslideWithrule = (DoubleSlideSeekBar) findViewById(R.id.doubleslide_withrule);mTvMinRule = (TextView) findViewById(R.id.tv_min_rule);mTvMaxRule = (TextView) findViewById(R.id.tv_max_rule);setListener();}private void setListener() {
mDoubleslideWithrule.setOnRangeListener(new DoubleSlideSeekBar.onRangeListener() {@Override public void onRange(float low, float big) {mTvMinRule.setText("最小值" + String.format("%.0f" , low));mTvMaxRule.setText("最大值" + String.format("%.0f" , big));}});}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Android SeekBar 自定义thumb旋转动画效果Android中SeekBar拖动条使用方法详解Android seekbar实现可拖动进度条Android 自定义SeekBar 实现分段显示不同背景颜色的示例代码Android开发自定义双向SeekBar拖动条控件