iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 >Android开发双向滑动选择器范围SeekBar实现
  • 276

0
分享到

Android开发双向滑动选择器范围SeekBar实现

选择器选择seekbarandroid开发Android 2022-06-09 21:06:37 276人浏览 八月长安
摘要

目录一、概述二、实现2.1 首先看我们自定义View的全部代码2.2 实现流程初始化计算宽高onDraw 绘制进度条事件监听三、使用 布局文件布局文件（有刻度线）布局文件（无刻

目录

一、概述

二、实现

2.1 首先看我们自定义View的全部代码

2.2 实现流程

初始化

计算宽高

onDraw 绘制进度条

事件监听

三、使用 布局文件

布局文件（有刻度线）

布局文件（无刻度线）

四、后记

一、概述

之前公司app里面有个功能是一个可以双向滑动的范围选择器，我在网上百度过一些实现方法，感觉各有利弊吧，但是都不太适合我们的需求。所以站在巨人的肩膀上，通过自定义View实现了一个可以适用于绝大多数情况的范围选择器来供大家使用。

首先，看效果图：

我对该范围选择器的属性进行了一些封装，例如我们可以自由控制我们的范围选择器是否显示刻度、刻度的长度、我们选择器上每个值的单位、最大值最小值、游标（即那个圆形图片）的样式、大小、选择器内部范围颜色以及外部颜色等等很多属性。更多玩法还请下载我的Demo体验，项目地址在文末。

二、实现 2.1 首先看我们自定义View的全部代码 
 public class DoubleSlideSeekBar extends View {
    
    private int lineWidth;
    
    private int lineLength = 400;
    
    private int textHeight;
    
    private int imageWidth;
    
    private int imageHeight;
    
    private boolean hasRule;
    
    private boolean isLowerMoving;
    
    private boolean isUpperMoving;
    
    private int textSize;
    
    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;
    
    private int slideLowX;
    
    private int slideBigX;
    
    private int bitmapHeight;
    
    private int bitmapWidth;
    
    private int paddingLeft = 100;
    private int paddingRight = 100;
    private int paddingTop = 50;
    private int paddingBottom = 10;
    
    private int lineStart = paddingLeft;
    
    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 = " ";
    
    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.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.2 实现流程

代码的注解很详细，下面我们来进一步分析此自定义view的实现步骤。

首先，我们要自定义一些属性，在res/values文件夹下创建文件attrs,内容如下：

 <resources>
    <!--线（进度条）宽度-->
    <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>
</resources>

我们要先确定我们要控制的属性。综合下来，我们需要控制进度条的宽度（高）、颜色、游标上边字的大小、刻度上边字的大小、颜色、是否有游标等等功能，所有属性及说明如下（可以酌情定制）：

xml属性值解释
lineHeightdimension控制我们线（进度条）的宽（高）度（例20dp）
textSizedimension游标上边字的大小（例16sp）
textColorcolor游标上边字的颜色 （例#e40627）
inColorcolor两个游标之间进度条的颜色 （例#e40627）
outColorcolor两个游标外部（游标到进度条两端）进度条的颜色 （例#e40627）
imageLowreference左边游标的图片 （例@mipmap/imgv_slide）
imageBigreference右边游标的图片 （例@mipmap/imgv_slide）
imagewidthdimension游标图片的宽度 （例20dp）
imagewidthdimension游标图片的高度 （例20dp）
hasRuleboolean是否有刻度线（例 true or false）
ruleColorcolor刻度线的颜色 （例#e40627）
ruleTextColorcolor刻度线上边的字的颜色 （例#e40627）
unitstring单位 （例 元）
equalinteger单位份数，把全部数据分成equal份（例smallValue是0，bigValue是100，equal是10，则每个刻度大小为（100-0）/10 =10）
ruleUnitstring刻度上边文字的单位 （例 $）
ruleTextSizedimension刻度上边文字的大小 （例20sp）
ruleLineHeightdimension刻度线高度（例16dp）
bigValueinteger选择器的最大值 （例 100）
smallValueinteger选择器的最小值 （例 0）

之后在自定义View里面获取我们定义的属性：

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();

由于我们要使用的是三个参数的构造器，所以对应一参二参的构造器进行如下设置：

 public DoubleSlideSeekBar(Context context) {
        this(context, null);
    }
    public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
初始化 
 
        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;
        }

通过Matrix对bitmap进行缩放，将游标设置成我们想要的大小。初始化两个游标在双向选择器的两头，一般都是在最大值和最小值处的，若有特殊需求也可更改slideLowX和slideBigX进行设置。由于我们在计算自定义view的高度时，需要把刻度以及刻度上边文字的高度算进去，所以有刻度时 paddingTop 要加上（text高度）和（刻度线高度加刻度线上边文字的高度和） 之间的最大值，没有刻度时 paddingTop 加上 text的高度。

计算宽高

计算View的高度：

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);
        }

当mode == MeasureSpec.EXACTLY时，我们在布局文件中已经固定了view的高度，但是view最小应为 paddingBottom + paddingTop + bitmapHeight + 10 否则显示不全。当没有固定大小时，一般是wrap content，那么它的高度应为 paddingBottom + paddingTop + bitmapHeight + 10（+10只是为了能让view所占的空间大一些而已，没有特殊意义，可以不加）。

计算View的宽度：

        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;

与计算高度同理，但此时，我们需要确定线（进度条）的长度，起始点。

onDraw 绘制进度条

画两个游标之间的线：

        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(lineWidth);
        linePaint.setColor(inColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);

此线从（slideLowX，lineY）到（slideBigX，lineY），其中slideLowX，slideBigY已经在计算宽度时赋值。lineY = getHeight() - paddingBottom - bitmapHeight / 2，即整个View的高度减paddingBottom再减bitmapHeight / 2（游标图的1/2高度），如果游标高度比线宽小的话，则lineY = getHeight() - paddingBottom - lineWidth / 2，不过这种需求应该很少。

画两个游标到两端的线：

        linePaint.setColor(outColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        //画 外部线
        canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);
        canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);

linePaint.setStrokeCap(Paint.Cap.ROUND)可以画出带圆角的线。之后要画两条线，一条是从线的起点到左边游标的中心。另一条是从右边游标的中心到线的终点。画游标：

        canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
        canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);

即左边游标左部为slideLowX - bitmapWidth / 2，顶端在lineY - bitmapHeight / 2。右边游标同理。

画游标上边的字：

        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);

字的位置控制在游标的正上方。有其他需求可以在此处调整。

画刻度线：

        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);
        }

我们已经传过来equal的值，即把所有数据分成equal份，每一份画一个刻度。并在刻度上方写上数字。如果有特殊需求，比如有的刻度线长有的刻度线短，则需要加个判断，根据判断的结果drawLine，不同的结果设置不同的高度。

事件监听

我们需要判断我们触摸屏幕时是否点击在游标上，是左边游标还是右边游标。此时则需要我们对点击事件的监听。

判断点击位置的方法：

                float nowX = event.getX();
                float nowY = event.getY();
                //按下 在游标范围上
                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();
                }

若Math.abs(nowY - lineY) < bitmapHeight / 2，则当前点击位置Y的坐标在游标上下顶点之间，此时可判定当前点击位置在Y轴方向上满足点到了游标。接下来判断X轴，若Math.abs(nowX - slideLowX) < bitmapWidth / 2即当前点击位置X的坐标在游标的左右顶点之间，此时满足当前点击到了左边游标的条件。我们此时才可以判定当前点击位置点在了左边游标上。右边游标的判定同理。完整的监听代码请在文末上传的项目中查看。

滑动状态监听：

//左边游标是运动状态
                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();
                    }

如果经判定，当前点击位置在左边游标上，且当前坐标在右边游标的左边，并且在线的起点的右边（当然还得考虑到游标图片大小的影响，不能让两个游标重合）(nowX <= slideBigX - bitmapWidth && nowX >= lineStart - bitmapWidth / 2)，那么更新当前slideLowX，更新进度，之后调用postInvalidate()刷新界面。更新进度：

  private void updateRange() {
        //当前 左边游标数值
        smallRange = computRange(slideLowX);
        //当前 右边游标数值
        bigRange = computRange(slideBigX);
        //接口 实现值的传递
        if (onRangeListener != null) {
            onRangeListener.onRange(smallRange, bigRange);
        }
    }

通过此方法获取左右游标上的数值，然后通过我们自己定义的接口进行值的传递。

computRange();

private float computRange(float range) {
        return (range - lineStart) * (bigValue - smallValue) / lineLength + smallValue;
    }

这个方法在我看来就是个数学题了。通过当前长度占总长度的比例，再乘以数据的总数，加上起点的数据（数据的最小值），就是我们当前的数据了。

三、使用 布局文件 布局文件（有刻度线） 
<com.example.txs.doubleslideseekbar.DoubleSlideSeekBar
        Android:id="@+id/doubleslide_withrule"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:lineHeight="6dp"
        custom:textSize="12sp"
        custom:textColor="#0628e4"
        custom:inColor="#f10a0a"
        custom:outColor="#af08e2"
        custom:imageLow="@mipmap/imgv_slide"
        custom:imageBig="@mipmap/imgv_slide"
        custom:imagewidth="20dp"
        custom:imageheight="20dp"
        custom:hasRule="true"
        custom:ruleColor="#0e0e0e"
        custom:ruleTextColor="#f74104"
        custom:unit="元"
        custom:equal="10"
        custom:ruleUnit="$"
        custom:ruleTextSize="8sp"
        custom:ruleLineHeight="10dp"
        />
布局文件（无刻度线） 
<com.example.txs.doubleslideseekbar.DoubleSlideSeekBar
        android:id="@+id/doubleslide_withoutrule"
        android:layout_marginTop="40dp"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        custom:lineHeight="20dp"
        custom:textSize="16sp"
        custom:textColor="#e40627"
        custom:inColor="#0a40f1"
        custom:outColor="#ace208"
        custom:imageLow="@mipmap/imgv_slide"
        custom:imageBig="@mipmap/imgv_slide"
        custom:imagewidth="20dp"
        custom:imageheight="20dp"
        custom:hasRule="false"
        custom:bigValue="1000"
        custom:smallValue="0"
        />

这里面包含了我们自定义属性的使用，又不懂得地方请看上方表格。

- 代码中用法

public class MainActivity extends AppCompatActivity {
    private DoubleSlideSeekBar mDoubleslideWithrule;
    private DoubleSlideSeekBar mDoubleslideWithoutrule;
    private TextView mTvMinRule;
    private TextView mTvMaxRule;
    private TextView mTvMinWithoutRule;
    private TextView mTvMaxWithoutRule;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        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));
            }
        });
        mDoubleslideWithoutrule.setOnRangeListener(new DoubleSlideSeekBar.onRangeListener() {
            @Override
            public void onRange(float low, float big) {
                mTvMinWithoutRule.setText("最小值" + String.format("%.0f" , low));
                mTvMaxWithoutRule.setText("最大值" + String.format("%.0f" , big));
            }
        });
    }
    private void initView() {
        mDoubleslideWithrule = (DoubleSlideSeekBar) findViewById(R.id.doubleslide_withrule);
        mDoubleslideWithoutrule = (DoubleSlideSeekBar) findViewById(R.id.doubleslide_withoutrule);
        mTvMinRule = (TextView) findViewById(R.id.tv_min_rule);
        mTvMaxRule = (TextView) findViewById(R.id.tv_max_rule);
        mTvMinWithoutRule = (TextView) findViewById(R.id.tv_min_without_rule);
        mTvMaxWithoutRule = (TextView) findViewById(R.id.tv_max_without_rule);
    }
}

用法很简单，我们可以通过我们定义的接口获取当前范围。

四、后记

此项目使用自定义view的知识比较多，大家若想巩固自己的自定义view的知识可以拿这个项目来练练手，而且由于时间问题，此项目可优化的地方还很多，比如再加一个属性控制游标上边的文字在游标上部，中部，下部。

滑动监听判断tanα<1才判断是游标在滑动，控制不同长度的刻度线等。这些大家都可以根据自己的需求自由定制，我所实现的功能也只是符合大多数情况而已。

GitHub项目地址：https://github.com/tangxuesong6/DoubleSlideSeekBar

以上就是Android开发双向滑动范围选择器SeekBar实现的详细内容，更多关于Android双向滑动SeekBar范围的资料请关注编程网其它相关文章！


点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Android开发双向滑动选择器范围SeekBar实现

本文链接: https://www.lsjlt.com/news/30981.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Android开发自定义双向SeekBar拖动条控件
    目录目标:双向拖动的自定义View实现步骤自定义属性获取确定自定义view尺寸绘制相关的内容部分滑动事件处理目标:双向拖动的自定义View 国际惯例先预览后实现 我们要实现的就是一...
    99+
    2024-04-02
  • Android 实现滑动数字选择器
    Android 滑动数字选择器是一种用户界面控件，它允许用户从一系列数字中选择一个值。用户可以通过滑动手势或点击手势来选择数字。以下是一些关于 Android 滑动数字选择器的信息和链接： Android NumberPicker：这是 ...
    99+
    2023-09-23
    笔记 android java android studio
  • ElementUI年份范围选择器功能实现
    目录ElementUI 年份范围选择器实现效果依赖组件代码调用组件代码总结ElementUI 年份范围选择器 Element的日期选择器组件没有提供选择年份范围的功能。由于项目需要，...
    99+
    2023-02-10
    elementui日期选择器范围 element选择年度范围 element日期选择器
  • jQuery怎么实现日期范围选择器
    本篇内容主要讲解“jQuery怎么实现日期范围选择器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery怎么实现日期范围选择器”吧!jQuery Date...
    99+
    2024-04-02
  • ElementUI日期选择器时间选择范围限制的实现
    目录单个输入框的情景1: 设置选择今天以及今天之后的日期情景2: 设置选择今天以及今天以前的日期情景3: 设置选择今天之后的日期（不能选择当天时间）两个输入框情景1: 限制结束日期不...
    99+
    2024-04-02
  • Android开发仿IOS滑动开关实现代码
    Android开发仿IOS滑动开关实现代码Android与iOS相比，ios好多控件都是自带的，而android需要使用自定义来实现。今天说的是ios的滑动开关，我层看到好多博客都是通过自定义ToggleButton实现的。这里我通过自定义...
    99+
    2023-05-31
    android ios 滑动开关
  • Android怎么开发Button实现selector选择器
    这篇文章主要介绍了Android怎么开发Button实现selector选择器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Android怎么开发Button实现selector选择器文章都会有所收获，下面我们...
    99+
    2023-07-02
  • Android开发手册Button实现selector选择器
    目录实践过程btn_selector_shape1.xmlbtn_selector_shape2.xmlbtn_selector0.xml布局中引用selector是按钮最常用的功能...
    99+
    2024-04-02
  • Android开发之实现手势滑动的功能
    Android开发之实现手势滑动的功能首先得Activity必须实现OnGestureListener接口，该接口提供了关于手势操作的一些方法，onDown方法：onDown是，一旦触摸屏按下，就马上产生onDown事件public boo...
    99+
    2023-05-30
    android 手势滑动 roi
  • Android开发之ViewPager实现滑动切换页面
    本文实例为大家分享了Android开发之ViewPager实现滑动切换页面的具体代码，供大家参考，具体内容如下 基本构件 activity_main.xml 依然是在简单的线性布局里...
    99+
    2024-04-02
  • 怎么在Android应用中实现㝉滑动选择控件
    这篇文章给大家介绍怎么在Android应用中实现㝉滑动选择控件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。实现步骤这里分解为3个动作:Down、Move、Up来进行分析，博主文采不好，大家直接看流程图吧！！代码分析前...
    99+
    2023-05-31
    android roi
  • Android开发实现日期时间控件选择
    本文实例为大家分享了Android开发实现日期时间控件选择的具体代码，供大家参考，具体内容如下 前言 整合Android原生控件（日期控件DatePicker、时间控件TimePic...
    99+
    2024-04-02
  • Android开发中如何实现一个滑动删除功能
    这篇文章将为大家详细讲解有关Android开发中如何实现一个滑动删除功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。先看一下效果activity_lookstaff.xml<Rela...
    99+
    2023-05-31
    android 滑动删除 roi
  • Android仿天猫横向滑动指示器功能的实现
    Android开发中会有很多很新奇的交互，比如天猫商城的首页头部的分类，使用的是GridLayoutManager+横向指示器实现的，效果如下图。 那对于这种效果要如何实现呢？最简...
    99+
    2022-11-13
    Android横向滑动指示器 Android横向滑动
  • Android开发中利用HorizontalScrollView实现一个左右滑动效果
    这期内容当中小编将会给大家带来有关Android开发中利用HorizontalScrollView实现一个左右滑动效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。效果图一.什么是HorizontalSc...
    99+
    2023-05-31
    android horizontalscrollview roi
  • Android开发中实现一个头像滑动变大变小功能
    这篇文章给大家介绍Android开发中实现一个头像滑动变大变小功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。实现通过监听ScrollView在Y轴的滑动距离，然后在代码中动态设置头像的位置和大小。public cl...
    99+
    2023-05-31
    android roi
  • android开发中怎么实现一个日期选择控件
    android开发中怎么实现一个日期选择控件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。效果如下：具体实现方法为：先新建一个安卓项目DoubleDatePicker，在res...
    99+
    2023-05-31
    android roi
  • 如何实现jquery手机触屏滑动拼音字母城市选择器
    这篇文章将为大家详细讲解有关如何实现jquery手机触屏滑动拼音字母城市选择器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。用到城市选择，直接用拼音滑动方式来选择，用的时...
    99+
    2024-04-02
  • 微信小程序开发中如何实现三级联动地址选择器
    这篇文章将为大家详细讲解有关微信小程序开发中如何实现三级联动地址选择器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。picker和picker-view组件在正式介绍实现之前，我们需要先来介绍下这两个组件...
    99+
    2023-06-26
  • 微信小程序开发中如何实现城市选择器
    这篇文章将为大家详细讲解有关微信小程序开发中如何实现城市选择器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。移动开发中城市选择器必不可少.gif: 这里只上部分js代码:...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作