画板——滑动条

创建一个类继承与View

1.png

创建横竖屏

2.png

创建一个画布方法，画背景条和进度条

1.当屏幕为横屏的时候

if(getWidth()>getHeight()){
            //横着
            //画背景条
            canvas.drawLine(0,getHeight()/2,
                    getWidth(),getHeight()/2,linePaint);
            if (position>0) {
                //画进度条
                canvas.drawLine(0, getHeight() / 2,
                        position,getHeight()/2 , progressPaint);
            }

            cy=getHeight()/2;
            radius=getHeight()/thumbScale;
            //确定cx的值
            if (positiongetWidth()-radius){
                cx=getWidth()-radius;
            }else {
                cx= (int) position;
            }
        }

2.当屏幕为竖屏的时候

else {
            //竖着
            canvas.drawLine(getWidth()/2,0,
                    getWidth()/2,getHeight(),linePaint);
            if (position>0){
                canvas.drawLine(getWidth()/2,0,
                        getWidth()/2,position,progressPaint);
            }
            cx=getWidth()/2;
            radius=getWidth()/thumbScale;
            //确定中心cy的值
            if (positiongetHeight()-radius){
                cy=getHeight()-radius;
            }else {
                cy= (int) position;
            }
        }

在画布里面画小圆点

//画小圆点
        if (style==SLIDER) {
            canvas.drawCircle(cx, cy, radius, circlePaint);
        }

创建画笔的方法

public void init(){
        //线
        linePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        linePaint.setColor(lineColor);
        linePaint.setStrokeWidth(lineSize);

        //小圆点
        circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(thumbColor);
        circlePaint.setStyle(Paint.Style.FILL);

        //进度条
        progressPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        progressPaint.setColor(progressColor);
        progressPaint.setStrokeWidth(lineSize);
    }

在这个demo里面所用到的变量

 private int lineSize=6;//线条粗细
    private Paint linePaint;
    private int lineColor=Color.BLACK;//线条颜色

    private int cx;//中心点x
    private int cy;//中心点y
    private int radius;//小圆点半径
    private Paint circlePaint;
    private int thumbColor=Color.MAGENTA;

    private int thumbScale=4;//小圆点尺寸缩放基数
    private float position;//记录触摸点的坐标

    private Paint progressPaint;//进度条进度画笔
    private int progressColor=Color.MAGENTA;//进度条的颜色

    public static int PROGRESS=0;//进度条
    public static int SLIDER=1;//滑动条
    private int style=PROGRESS;//默认样式为进度条

    public int max=100;//设置最大值
    public float progress;//进度值

    //2.滑动改变的监听者
    private OnSliderChangeListener onSliderChangeListener;

创建touch事件——在这里面实现滑动条的移动和小圆点的放大

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //小圆点放大
                thumbScale=2;
                //获取当前触摸点的值
                if (getWidth()>getHeight()){
                    //横向时 y不变 x改变
                    position=event.getX();
                }else {
                    //竖着时 x不变 y改变
                    position=event.getY();
                }
                callBack();
                break;
            case MotionEvent.ACTION_MOVE:
                //获取当前触摸点的值
                if (getWidth()>getHeight()){
                    //横向时 y不变 x改变
                    position=event.getX();
                    if (position<0){
                        position=0;
                    }else if (position>getWidth()){
                        position=getWidth();
                    }
                }else {
                    //竖着时 x不变 y改变
                    position=event.getY();
                    if (position<0){
                        position=0;
                    }else if (position>getHeight()){
                        position=getHeight();
                    }
                }
                callBack();
                break;
            case MotionEvent.ACTION_UP:
                thumbScale=4;
                break;
        }
        if (style==SLIDER) {
            invalidate();//刷新
        }
        return true;
    }

创建一个回调的方法

//4.回调——在这里面实现距离的限定
    private void callBack(){
        if (onSliderChangeListener!=null){
            if (getWidth()>getHeight()) {
                progress = position /getWidth();
            }else {
                progress=position/getHeight();
            }
            onSliderChangeListener.progressChanged(progress*max);
        }
    }

创建set，get的方法

public int getStyle() {
        return style;
    }

    public void setStyle(int style) {
        this.style = style;
    }

    public float getProgress() {
        return progress;
    }

    public void setProgress(float progress) {
        this.progress = progress;
        if (progress<0.001) {
            //将进度值转化为控件中的尺寸位置
            if (getWidth() > getHeight()) {
                position = progress * getWidth();
            } else {
                position = progress * getHeight();
            }
            //重绘进度
            invalidate();
        }
    }

    public void setMax(int max) {
        this.max = max;

    }
    //1.
    public interface OnSliderChangeListener{
        void progressChanged(float progress);
    }
    //3.
    public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
        this.onSliderChangeListener = onSliderChangeListener;
    }

在xml里面创建控件

3.png

在Mainactivity里面实现小圆点和滑动条的优化

 final Slider slider=findViewById(R.id.slider);
       slider.setMax(50);
       slider.setStyle(Slider.SLIDER);slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
           @Override
           public void progressChanged(float progress) {

           }
       });

效果图

1572697819118.gif