<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context=".MainActivity">

    <com.gioppl.humiditysliderview.SlideView
        android:id="@+id/sv_main"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:buttonColor="#ffffff"
        app:lineStartColor="#ff0000"
        app:lineEndColor="#2F03F4"
        app:circleR="50"
        app:markColor="#383838"
        app:textColor="#ffffff"
        app:colorTextSelect="#2196F3"
        app:isRatio="true"
        app:normalMarkLength="50"
        app:specialMarkLength="100"
        app:markToLineMargin="50"/>

</RelativeLayout>

2.java

package com.gioppl.humiditysliderview;

import android.os.Bundle;
import android.util.Log;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements SlideView.ScrollCallBack {
    private SlideView sv_main;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sv_main = findViewById(R.id.sv_main);
        sv_main.setScrollBack(this);
    }
    @Override
    public void scrollMove(int num) {

        Log.e("SLIDE_MOVE", String.valueOf(num));
    }
    @Override
    public void scrollUp(int num) {
        Log.e("SLIDE_UP", String.valueOf(num));
    }
}

自己撸代码

这个View主要包含，左边的文字显示，中间的刻度标尺，右边的可以变化的线，外加一个按钮，分开写。

1.自定义控件的参数

在编写之前，我们要确定其中的参数，包括颜色，数字，刻度大小等，新建一个attrs.xml放入values目录中，写入我们需要读取的参数。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SlideView">
        <!--    按钮的颜色    -->
        <attr name="buttonColor" format="color"/>
        <!--   滑动线两端的颜色     -->
        <attr name="lineStartColor" format="color"/>
        <!--   滑动线中间的颜色    -->
        <attr name="lineEndColor" format="color"/>
        <!--   按钮的半径     -->
        <attr name="circleR" format="integer"/>
        <!--   刻度线的颜色     -->
        <attr name="markColor" format="color"/>
        <!--   文字的颜色     -->
        <attr name="textColor" format="color"/>
        <!--   文字被选中时候的颜色     -->
        <attr name="colorTextSelect" format="color"/>
        <!--   是否是百分比数     -->
        <attr name="isRatio" format="boolean"/>
        <!--   普通的刻度的长度     -->
        <attr name="normalMarkLength" format="float"/>
        <!--   十的倍数的刻度的长度     -->
        <attr name="specialMarkLength" format="float"/>
        <!--   刻度线和滑动线的距离     -->
        <attr name="markToLineMargin" format="float"/>
    </declare-styleable>
</resources>

2.我们要新建SlideView类，继承View

3.申明我们的属性

private float  height;//控件的高度
    private int divideNum;//文字的个数
    private int colorLineStart, colorLineEnd;//两端，中间的颜色
    private int colorMark;//刻度的颜色
    private int colorText, colorTextSelect;//文字，文字被选中之后的颜色
    private boolean isRatio;//文本是否带百分号
    private float normalMarkLength, specialMarkLength;//普通的刻度和为十的刻度的长度
    private float markToLineMargin;//刻度和滑动线之间的距离
    private int colorButton;//按钮的颜色
    private Context context;//上下文
    private Paint mPaintButton;//画按钮的画笔
    private Paint mPaintLine;//画线的画笔
    private Paint mPaintMark;//画刻度尺的画笔
    private Paint mPaintText;//画文本的画笔
    private Paint mPaintTest;//测试的画笔
    private Path mPathLine;//画滑动线的路径
    private float touchY;//本次滑动的坐标的Y值
    private float originalY;//前一次的View滑动的位置Y坐标，判断向上滑动还是向下滑动
    private String result;//返回的结果
    private int touchStatus = 0;//0为禁止，1为上滑动，2为下滑动
    private CircleBean btnCircle = new CircleBean(0, 0);//按钮的坐标位置和半径
    //定义的内部类
    public static class CircleBean {
        float x, y, r;

        public CircleBean(int x, int y) {
            this.x = x;
            this.y = y;
        }
    }

4.构造方法

用构造方法中TypedArray 来接收我们xml中定义参数的数值，这个部分很简单，就不用多说了

    public SlideView(Context context) {
        super(context);
    }

    public SlideView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initAttrs(attrs);
    }

    public SlideView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        initAttrs(attrs);
    }

    public SlideView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        this.context = context;
        initAttrs(attrs);
    }

    private void initAttrs(AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlideView);
        colorLineStart = typedArray.getColor(R.styleable.SlideView_lineStartColor, Color.WHITE);
        colorLineEnd = typedArray.getColor(R.styleable.SlideView_lineEndColor, Color.WHITE);
        colorButton = typedArray.getColor(R.styleable.SlideView_buttonColor, Color.WHITE);
        btnCircle.r = typedArray.getInt(R.styleable.SlideView_circleR, 100);
        colorMark = typedArray.getColor(R.styleable.SlideView_markColor, Color.WHITE);
        colorText = typedArray.getColor(R.styleable.SlideView_textColor, Color.WHITE);
        colorTextSelect = typedArray.getColor(R.styleable.SlideView_colorTextSelect, Color.BLUE);
        isRatio = typedArray.getBoolean(R.styleable.SlideView_isRatio, true);
        normalMarkLength = typedArray.getFloat(R.styleable.SlideView_normalMarkLength, 50);
        specialMarkLength = typedArray.getFloat(R.styleable.SlideView_specialMarkLength, 100);
        markToLineMargin = typedArray.getFloat(R.styleable.SlideView_markToLineMargin, 50);
        divideNum = 11;
        typedArray.recycle();//一定要回收
    }

5.初始化画笔

现在我们需要初始化我们的5个画笔，其中有一个是测试画笔，主要是为了画贝塞尔曲线的锚点，写完后可以删除。

private void initPaints() {
        //画按钮的画笔
        mPaintButton = new Paint();//初始化画笔
        mPaintButton.setColor(colorButton);//设置颜色，这个颜色在构造方法中已经从xml中接收
        mPaintButton.setAntiAlias(true);//设置抗锯齿
        mPaintButton.setDither(true);//设置防止抖动
        mPaintButton.setStyle(Paint.Style.FILL);//设置画笔是空心还是实心，FILL是实心，STROKE是空心
        mPaintButton.setStrokeWidth(5);//画笔的宽度
        mPaintButton.setPathEffect(new CornerPathEffect(10f));//设置path的样式，比如是实线还是虚线等
        //画滑动线的画笔
        mPaintLine = new Paint();
        mPaintLine.setColor(colorButton);
        mPaintLine.setAntiAlias(true);
        mPaintLine.setDither(true);
        mPaintLine.setStyle(Paint.Style.STROKE);
        mPaintLine.setStrokeWidth(15);
        mPaintLine.setPathEffect(new CornerPathEffect(10f));
        //设置颜色，这里设置的是镜像线性模式，两端颜色一样是colorLineStart，中间是colorLineEnd
        Shader shader = new LinearGradient(0, 0, btnCircle.x, btnCircle.y, colorLineStart, colorLineEnd, Shader.TileMode.MIRROR);
        mPaintLine.setShader(shader);
        //画测试点的画笔
        mPaintTest = new Paint();
        mPaintTest.setColor(Color.RED);//锚点我们设置红丝
        mPaintTest.setAntiAlias(true);
        mPaintTest.setDither(true);
        mPaintTest.setStyle(Paint.Style.STROKE);
        mPaintTest.setStrokeWidth(5);
        mPaintTest.setPathEffect(new CornerPathEffect(30f));
        //画刻度的画笔
        mPaintMark = new Paint();
        mPaintMark.setColor(colorMark);
        mPaintMark.setAntiAlias(true);
        mPaintMark.setDither(true);
        mPaintMark.setStyle(Paint.Style.STROKE);
        mPaintMark.setStrokeWidth(2);
        //画文本的画笔
        mPaintText = new Paint();
        mPaintText.setColor(colorText);
        mPaintText.setAntiAlias(true);
        mPaintText.setDither(true);
        mPaintText.setStyle(Paint.Style.FILL);
        mPaintText.setStrokeWidth(5);
        mPaintText.setTextSize(50);
    }

6.onLayout

这个初始化画笔在onLayout中设置，为什么呢？主要是其中的画线需要前后有颜色变化，所以要得中间的位置的Y信息，只有在这个方法中才可以得到。

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //初始化控件高度
        height = bottom;
        //设置按钮的xy值，默认按钮在中间
        btnCircle.x = (left + right) / 2.0f;
        btnCircle.y = (top + bottom) / 2.0f;
        //初始化画笔
        initPaints();
        //初始化按钮的Y位置为0，上一次Y位置为0
        touchY = 0;
        originalY = 0;
    }

7.onDraw

然后就是我们的主力onDraw方法了，我们在其中绘制所有的内容，下面我们会逐一讲解这些方法的使用

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制按钮
        canvas.drawCircle(btnCircle.x, btnCircle.y, btnCircle.r, mPaintButton);
        //绘制滑动的线
        drawLinePaths(canvas);
        //绘制刻度
        drawMark(canvas);
        //绘制文本
        drawText(canvas);
    }

8.绘制按钮

就很简单一行代码

//绘制按钮
canvas.drawCircle(btnCircle.x, btnCircle.y, btnCircle.r, mPaintButton);

画⚪，这里用自带的drawCircle方法，设置⚪的x,y,半径和画笔。

9.画线

在讲解画线前，我们需要知道两个概念，第一个就是安卓的坐标轴，第二个就是什么是贝塞尔曲线

安卓屏幕坐标轴（如图）

安卓的坐标轴以左上角为原点，向右为X轴，向下为Y轴，设x轴的最大值为w,y轴最大值为h,我们画的线要从坐标点（w/2,-50）开始，为什么要设置y为-50呢，可以这么考虑，如果滑倒控件的最上面的时候，那滑动线就乱了，大家可以试一下，y=-50大概如下

drawLinePaths(canvas);这是我们自定义的一个方法，作用是画滑动的线，这是其中有点复杂的部分，代码如下

    private void drawLinePaths(Canvas canvas) {
        mPathLine = new Path();
        //将起始点移动到按钮的
        mPathLine.moveTo(btnCircle.x, -50);
        //在按钮前面的的3r处停下
        mPathLine.lineTo(btnCircle.x, btnCircle.y - btnCircle.r * 3);
        //第一条贝塞尔曲线
        mPathLine.quadTo(btnCircle.x - btnCircle.r * 0.2f, btnCircle.y - btnCircle.r * 1.9f, btnCircle.x - btnCircle.r, btnCircle.y - btnCircle.r * 1.5f);
        //第二条贝塞尔曲线
        mPathLine.quadTo(btnCircle.x - 2 * btnCircle.r, btnCircle.y - btnCircle.r * 0.9f, btnCircle.x - btnCircle.r * 2, btnCircle.y);
        //第三条贝塞尔曲线
        mPathLine.quadTo(btnCircle.x - 2 * btnCircle.r, btnCircle.y + btnCircle.r * 0.9f, btnCircle.x - btnCircle.r, btnCircle.y + btnCircle.r * 1.5f);
        //第四条贝塞尔曲线
        mPathLine.quadTo(btnCircle.x - btnCircle.r * 0.2f, btnCircle.y + btnCircle.r * 1.9f, btnCircle.x, btnCircle.y + btnCircle.r + btnCircle.r * 2);
        //把剩余的地方画直
        mPathLine.lineTo(btnCircle.x, height);
        //用画板画线
        canvas.drawPath(mPathLine, mPaintLine);
    }

首先我们要普及一下贝塞尔曲线的概念，贝塞尔曲线就是为了曲线更加的圆滑，看着顺眼，二阶贝塞尔曲线如图，贝塞尔曲线需要确定起始点，锚点，结束点，下图中间的可以挪动的点就是贝塞尔曲线的锚点，我们在安卓中的二阶贝塞尔曲线是用的Path类中的quadTo(float x1, float y1, float x2, float y2)方法，（x1,y1）是锚点的坐标，（x2,y2）是结束点的坐标。起始点的坐标要用其他方法设置，例如Path.moveTo(float x, float y)方法。

绘制可以滑动的线这个地方复杂就复杂在贝塞尔曲线的绘制，我们把曲线分成六段，如下图的不同颜色的线，第一条线和第六条线是直线，其余的是二阶贝塞尔曲线。四条贝塞尔曲线的锚点用绿色的箭头指示出来了，代码中的各种参数0.9f，1.9f，没错，这些都是我一点一点试出来的，不管怎么变化，相对位置不会变。

10.画刻度线drawMark(canvas);

先上代码

 private void drawMark(Canvas canvas) {
        int totalMarkNum = divideNum*10;//刻度总个数
        float everyMarkHeight = height / totalMarkNum;//每个的高度
        int a = 0;//计数器，计数看是否是等于10，等于5的刻度
        //Path的各种方法
        PathMeasure pathMeasure = new PathMeasure(mPathLine, false);
        float[] pos = new float[2];//位置
        float[] tan = new float[2];//正切值
        for (int i = -2; i < totalMarkNum; i++, a++) {
            pathMeasure.getPosTan(height / totalMarkNum * (i+5), pos, tan);
            float x = pos[0];//获取他的X位置
            if (a != 5 && a != 10) {//一般的刻度
                canvas.drawLine(x - markToLineMargin - normalMarkLength, i * everyMarkHeight, x -  markToLineMargin , i * everyMarkHeight, mPaintMark);
            } else if (a == 5) {//=5，没设置，和一般刻度一样
                canvas.drawLine(x - markToLineMargin - normalMarkLength, i * everyMarkHeight, x -  markToLineMargin, i * everyMarkHeight, mPaintMark);
            } else {//=10，画长一点的线
                canvas.drawLine(x - markToLineMargin - specialMarkLength, i * everyMarkHeight, x -  markToLineMargin , i * everyMarkHeight, mPaintMark);
                a = 0;
            }
        }
    }

画刻度主要的难点就是在曲线弯曲的地方，我们先把屏幕分成若干个部分，然后就循环画直线，直线很简单，canvas.drawLine方法就可以搞定，但是，现在必须要在曲线弯曲的地方刻度同时弯曲，这就要用到一个类PathMeasure.getPosTan(float distance, float pos[], float tan[])第一个参数是distance，表示曲线的距离，我们直接用每一个小刻度乘以当前的绘制进度i就可以得到了，pos是位置数组，pos[0]为该distance的x值，pos[1]是该distance的y值。tan是正切值，我们暂时用不到，对了，在PathMeasure 类初始化的时候要传入我们的滑动线的path，然后所有计算的都是该path中的数据。

11.绘制文本drawText(canvas);

在绘制文本之前，我们需要有两个处理方法，一个是文字处理方法，这个方法作用是判断在拖动到0的时候不会显示00或者00%,代码如下

    //i是我们拖动的进度，tail是尾巴，尾巴就是是否加百分号
    private String handleText(int i,String tail){
        String s=i+tail;
        if (s.equals("00")||s.equals("00%")){
            s=s.replaceFirst("00","0");
        }
        return s;
    }

第二个方法就是设置文字样式，我们在拖动的时候，选中的部分要放大处理且需要不同的颜色，代码如下

    //第一个参数是是否放大
    private void setTextPaintStyle(boolean isEnlarge){
        if (isEnlarge){//如果放大，设置颜色和文本大小
            mPaintText.setColor(colorTextSelect);
            mPaintText.setTextSize(80);
        }else {
            mPaintText.setColor(colorText);
            mPaintText.setTextSize(50);
        }
    }

接下来就是我们绘制文字的部分，先上代码

private void drawText(Canvas canvas) {
        //解析率，
        float resolutionRation = 100;
        int totalTextNum = divideNum;//共有多少个文字
        float everyTextHeight = height / totalTextNum;//每个十的整数的高度
        float everyMarkHeight = everyTextHeight / 10;//每个小的刻度的高度
        String normalTail;//正常的文字尾巴，尾巴的作用是是否带百分号
        String enlargeTail;//放大的文字尾巴
        if (isRatio) {//是否带百分号
            normalTail = "0%";
            enlargeTail = "%";
        } else {
            normalTail = "0";
            enlargeTail = "";
        }
        for (int i = 0; i <= totalTextNum; i++) {
            //这个height不是屏幕高度，是我们文字绘制的高度，就是在y的哪里绘制
            //-16是我自己调出来的，别问我为什么，-16好看
            float height = i * everyTextHeight - 16;
            if (touchStatus == 0) {//静止
                canvas.drawText(handleText(i,normalTail), 30, height, mPaintText);
            } else if (touchStatus == 1) {//上滑动
                if ((height) > btnCircle.y - resolutionRation && (height) < btnCircle.y + resolutionRation) {//正常绘制
                    //放大绘制
                    setTextPaintStyle(true);
                    int g = (int) (btnCircle.y / everyMarkHeight)+2;
                    result=g + enlargeTail;
                    canvas.drawText(g + enlargeTail, 30, btnCircle.y+20, mPaintText);
                } else {
                    //正常绘制
                    setTextPaintStyle(false);
                    canvas.drawText(handleText(i,normalTail), 30, height, mPaintText);
                }
            } else {//下滑动
                if ((height) > btnCircle.y - resolutionRation && (height) < btnCircle.y + resolutionRation) {//正常绘制
                    //放大绘制
                    setTextPaintStyle(true);
                    int g= (int) (btnCircle.y/everyMarkHeight)+2;
                    result=g + enlargeTail;
                    canvas.drawText(g + enlargeTail, 30, btnCircle.y+20, mPaintText);
                } else {
                    //正常绘制
                    setTextPaintStyle(false);
                    canvas.drawText(handleText(i,normalTail), 30, height, mPaintText);
                }
            }

        }
    }

几个名词解释，解析率resolutionRation，这个就是我们放大的文字的附近，不允许其他文字，如下图，我们在56%的时候旁边的50%，60%全都不绘制，解析率越大，说明不可绘制的范围更大。

touchStatus 这个是的作用是表示滑动状态，0为静止，1为上滑动，2为下滑动。关于这个变量的赋值，先留一个坑，后面再说。

g是个位数，在放大绘制的时候，才会有个位数的存在，一般都是10的倍数，比如10，20，30....g的赋值是我们的按钮的位置y值除以每一个刻度的高度+2，+2也是我调出来的，没有为什么，+2才是最准确的数字。

12.滑动事件onTouchEvent

先上代码

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取滑动的Y值，减去按钮的半径,保存
        touchY = event.getY() - btnCircle.r;
        //如果这一次的Y值比上一次的Y值大，说明是上滑动，反之下滑动
        if ((touchY - originalY) > 0) {
            touchStatus = 2;//上滑动
        } else {
            touchStatus = 1;//下滑动
        }
        //这次的Y值赋值给上一次的Y值，保存
        originalY = touchY;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN://按下

                break;
            case MotionEvent.ACTION_MOVE://滑动
                btnCircle.y = touchY;
                invalidate();
                //回调接口，移动回调
                if (result!=null){
                    if (result.charAt(result.length()-1)=='%'){
                        result=result.substring(0,result.length()-1);
                        scrollBack.scrollMove(Integer.parseInt(result));
                    }else {
                        scrollBack.scrollMove(Integer.parseInt(result));
                    }
                }
                break;
            case MotionEvent.ACTION_UP://松开
                //回调接口，松开回调
                if (result!=null){
                    if (result.charAt(result.length()-1)=='%'){
                        result=result.substring(0,result.length()-1);
                        scrollBack.scrollUp(Integer.parseInt(result));
                    }else {
                        scrollBack.scrollUp(Integer.parseInt(result));
                    }
                }
                break;
        }
        //返回true，说明这个控件消费了该事件
        return true;
    }

onTouchEvent是系统的滑动事件，我们复写这个方法即可，返回值是true则说明我们这个控件消费了该事件，事件不会网上层的ViewGroup传送，我们在滑动事件传过来的时候，分辨这个事件的状态，分别为按下（MotionEvent.ACTION_DOWN），滑动（MotionEvent.ACTION_MOVE），松开（MotionEvent.ACTION_UP）。在上面挖的touchStatus的坑，我们在这里补上，如果上一次事件的Y值小于这次的事件的Y值则说明我们在上滑动，反之为下滑动。我们在移动的时候给btnCircle赋值，并且通过 invalidate();方法来进行刷新界面操作。

回调接口是我们在滑动这个控件的时候得到的值信息，scrollMove是滑动回调，scrollUp是松开回调，这个是最终的结果

    //本类中的回调
    private ScrollCallBack scrollBack;
    //设置回调
    public void setScrollBack(ScrollCallBack scrollBack) {
        this.scrollBack = scrollBack;
    }
    //回调接口的类
    public interface ScrollCallBack {
        void scrollMove(int num);
        void scrollUp(int num);
    }

我们在onTouchEvent方法中设置该回调的结果，把字符串去除%然后强转成整数，回调给调用该控件的Avtivity。还记得这个result值是怎么得来的嘛？在drawText方法中，只要这个文字放大了，就认定这个就是result。