android 左右滑动进度

左右滑动进度游标

源文件是别的大佬写的，我这个是在原来的基础上做了点删减；主要作为一次记录；以下便是修改后的完整代码；

# 

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" />

第一次用，主要用于记录，如有冒犯还请见谅！