private class CirclePoint{
        //圓的圓心坐標(biāo)
        public int cx;
        public int cy;
    }

繪制

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //繪制中間圓角矩形線(xiàn)
        drawDefaultCornerRectLine(canvas);
        //繪制兩圓之間的圓角矩形
        drawSelectedRectLine(canvas);
        //畫(huà)左邊圓以及圓的邊框
        drawLeftCircle(canvas);
        //畫(huà)右邊圓以及圓的邊框
        drawRightCircle(canvas);
        //繪制文字
        drawBottomText(canvas);
        //繪制描述信息圓角矩形彈窗
        drawRectDialog(canvas);
        //繪制描述信息彈窗中的文字
        drawTextOfRectDialog(canvas);
        //繪制小三角形
        drawSmallTriangle(canvas);
    }

下面分別展示下這些組件的繪制，其實(shí)主要是坐標(biāo)的確定，只要坐標(biāo)知道了，那么繪制起來(lái)就一氣呵成了。其中，繪制小三角形用的是path進(jìn)行連線(xiàn)繪制

private void drawDefaultCornerRectLine(Canvas canvas) {
        canvas.drawRoundRect(defaultCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, defaultLinePaint);
    }

    private void drawSelectedRectLine(Canvas canvas) {
        canvas.drawRoundRect(selectedCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, selectedLinePaint);
    }
    
    private void drawLeftCircle(Canvas canvas) {
        canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCirclePaint);
        canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCircleStrokePaint);
    }

    private void drawRightCircle(Canvas canvas) {
        canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCirclePaint);
        canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCircleStrokePaint);
    }

    private void drawBottomText(Canvas canvas) {
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        for (int i = 0; i <=slice; i++) {
            int value = i*sliceValue > maxValue ? maxValue : i*sliceValue + minValue;
            String text = String.valueOf(value);
            float textWidth = textPaint.measureText(text);
            canvas.drawText(text, i*perSlice - textWidth/2 + (getPaddingLeft() + strokeRadius), getPaddingTop()+rectDialogHeightAndSpace+strokeRadius*2+spaceDistance+textSize/2, textPaint);
        }
    }

    private void drawRectDialog(Canvas canvas) {
        if (isShowRectDialog) {
            canvas.drawRoundRect(numberDescRect, rectDialogCornerRadius, rectDialogCornerRadius, selectedLinePaint);
        }
    }
    
    private void drawTextOfRectDialog(Canvas canvas) {
        if (leftValue == minValue && (rightValue == maxValue || rightValue < maxValue)) {
            textDesc = rightValue+"萬(wàn)以下";
        } else if (leftValue > minValue && rightValue == maxValue) {
            textDesc = leftValue+"萬(wàn)以上";
        } else if (leftValue > minValue && rightValue < maxValue) {
            if (leftValue == rightValue) {
                textDesc = rightValue+"萬(wàn)以下";
            }else
                textDesc = leftValue+"-"+rightValue+"萬(wàn)";
        }

        if (isShowRectDialog) {
            textPaint.setColor(rectDialogTextColor);
            textPaint.setTextSize(rectDialogTextSize);
            float textWidth = textPaint.measureText(textDesc);
            float textLeft = numberDescRect.left + rectDialogWidth/2 - textWidth/2;
            canvas.drawText(textDesc, textLeft, getPaddingTop()+rectDialogCornerRadius+rectDialogTextSize/4, textPaint);
        }
    }

    private void drawSmallTriangle(Canvas canvas) {
        if (isShowRectDialog) {
            trianglePath.reset();
            trianglePath.moveTo(numberDescRect.left + rectDialogWidth/2 - triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2);
            trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2 + triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2);
            trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2, getPaddingTop() + rectDialogCornerRadius*2+triangleHeight);
            trianglePath.close();
            canvas.drawPath(trianglePath, selectedLinePaint);
        }
    }

然后是對(duì)手勢(shì)滑動(dòng)的處理

對(duì)于手勢(shì)滑動(dòng)的處理還是比較麻煩和繁瑣的，首先我們需要確定當(dāng)前滑動(dòng)的是左邊圓還是右邊圓，可以通過(guò)如下方式進(jìn)行判斷，為了方便大家理解，我在代碼中寫(xiě)了詳細(xì)的注釋?zhuān)淮螣o(wú)意間的機(jī)會(huì)看到CodeCopyer大牛的文章中關(guān)于點(diǎn)擊屬于哪個(gè)位置用到了Region（Region表示多個(gè)圖形組成的區(qū)域范圍，一般判斷某一點(diǎn)(按下的坐標(biāo))是否在某一個(gè)區(qū)域范圍內(nèi)），又get到了一項(xiàng)技能，在這里表示感謝，感興趣的小伙伴可以用此方式實(shí)現(xiàn)下

private boolean checkIsLeftOrRight(float downX) {
        //如果按下的區(qū)域位于左邊區(qū)域，則按下坐標(biāo)downX的值就會(huì)比較小(即按下坐標(biāo)點(diǎn)在左邊)，那么leftCircleObj.cx - downX的絕對(duì)值也會(huì)比較小
        //rightCircleObj.cx - downX絕對(duì)值肯定是大于leftCircleObj.cx - downX絕對(duì)值的，兩者相減肯定是小于0的
        if (Math.abs(leftCircleObj.cx - downX) - Math.abs(rightCircleObj.cx - downX) > 0) {//表示按下的區(qū)域位于右邊
            return false;
        }
        return true;
    }

接著需要對(duì)起始位置以及終點(diǎn)位置的邊界進(jìn)行處理，防止越界，兩圓總不能滑出起始位置或者終點(diǎn)位置吧，其實(shí)對(duì)邊界的處理還是很簡(jiǎn)單的，比如左邊圓滑動(dòng)坐標(biāo)小于起始點(diǎn)的坐標(biāo)時(shí)，我們就把起始點(diǎn)的坐標(biāo)重新賦值給這個(gè)圓的圓心坐標(biāo)，右邊臨界點(diǎn)的判斷也是類(lèi)似

       //防止越界處理
        if (touchLeftCircle) {
            if (leftCircleObj.cx > rightCircleObj.cx) {
                leftCircleObj.cx = rightCircleObj.cx;
            }else {
                if (leftCircleObj.cx < getPaddingLeft() + strokeRadius) {
                    leftCircleObj.cx = getPaddingLeft() + strokeRadius;
                }
                if (leftCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) {
                    leftCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius;
                }
            }
        }else {
            if (leftCircleObj.cx > rightCircleObj.cx) {
                rightCircleObj.cx  = leftCircleObj.cx;
            }else {
                if (rightCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) {
                    rightCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius;
                }

                if (rightCircleObj.cx < getPaddingLeft() + strokeRadius) {
                    rightCircleObj.cx = getPaddingLeft() + strokeRadius;
                }
            }
        }

以及兩圓相遇時(shí)的處理，總不能確認(rèn)過(guò)眼神就是對(duì)的人吧，這塊處理需要特別的注意，就像文章開(kāi)頭對(duì)控件的分析中說(shuō)到的幾種情況，①兩圓在起始位置處相遇②兩圓在終點(diǎn)位置處相遇③兩圓在中間某一處相遇。對(duì)于情況①和②情況比較相似，這里就統(tǒng)一啰嗦下，滑動(dòng)右邊圓在起始位置處和左邊圓相遇后，再次向右滑動(dòng)，那么要保證左邊圓不動(dòng)，右邊圓繼續(xù)向右滑動(dòng)；當(dāng)左邊圓在終點(diǎn)處與右邊圓相遇時(shí)也是同樣道理。對(duì)于情況③當(dāng)滑動(dòng)左邊圓在中間某一處與右邊圓相遇時(shí)，繼續(xù)向右滑動(dòng)，注意此時(shí)左邊圓停留在之前右邊圓的位置處不動(dòng)，而右邊圓則繼續(xù)向右滑動(dòng)（根據(jù)圖二可以很清晰的觀(guān)察出滑動(dòng)的規(guī)律），用代碼表示就是在move時(shí)進(jìn)行判斷處理

            case MotionEvent.ACTION_MOVE:
                float moveX = event.getX();
                isShowRectDialog = true;
                if (leftCircleObj.cx == rightCircleObj.cx) {//兩圓圈重合的情況
                    if (touchLeftCircle) {
                        //極端情況的優(yōu)化處理，滑動(dòng)左邊圓到達(dá)最右邊時(shí)，再次滑動(dòng)時(shí)設(shè)置為左滑，即：繼續(xù)讓左邊圓向左滑動(dòng)
                        if (leftCircleObj.cx == getWidth() - getPaddingRight() - strokeRadius) {
                            touchLeftCircle = true;
                            leftCircleObj.cx = (int) moveX;
                        }else {
                            //當(dāng)滑動(dòng)左邊圓在中間某處與右邊圓重合時(shí)，此時(shí)再次繼續(xù)滑動(dòng)則左邊圓處于右邊圓位置處不動(dòng)，右邊圓改為向右滑動(dòng)
                            touchLeftCircle = false;
                            rightCircleObj.cx = (int) moveX;
                        }
                    }else {
                        if (rightCircleObj.cx == getPaddingLeft() + strokeRadius) {
                            touchLeftCircle = false;
                            rightCircleObj.cx = (int) moveX;
                        }else {
                            touchLeftCircle = true;
                            leftCircleObj.cx = (int) moveX;
                        }
                    }
                }else {
                    if (touchLeftCircle) {
                        //滑動(dòng)左邊圓圈時(shí)，如果位置等于或者超過(guò)右邊圓的位置時(shí)，設(shè)置右邊圓圈的坐標(biāo)給左邊圓圈，就相當(dāng)于左邊圓圈停留在右邊圓圈之前的位置上，然后移動(dòng)右邊圓圈
                        leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : (int) moveX;
                    }else {
                        //同理
                        rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : (int) moveX;
                    }
                }

                break;

其次還要保證在兩圓滑動(dòng)的過(guò)程中最上方顯示價(jià)格信息描述的圓角矩形彈窗始終位于兩圓的中間位置，還有就是文章開(kāi)頭分析的，當(dāng)滑動(dòng)的距離小于步長(zhǎng)的一半時(shí)，松開(kāi)滑動(dòng)，圓需要回彈到上一個(gè)位置處，很多細(xì)節(jié)都是需要處理的，在寫(xiě)的過(guò)程中會(huì)遇到很多奇葩的問(wèn)題，需要有足夠的耐心慢慢去調(diào)試，最后我們需要在手指抬起也就是up時(shí)將數(shù)據(jù)回調(diào)給UI進(jìn)行展示

            case MotionEvent.ACTION_UP:
                if (touchLeftCircle) {
                    int partsOfLeft = getSliceByCoordinate((int) event.getX());
                    leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : partsOfLeft*perSlice+strokeRadius;
                }else {
                    int partsOfRight = getSliceByCoordinate((int) event.getX());
                    rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : partsOfRight*perSlice+strokeRadius;
                }

                int leftData = getSliceByCoordinate(leftCircleObj.cx)*sliceValue + minValue;
                int rightData = getSliceByCoordinate(rightCircleObj.cx)*sliceValue + minValue;
                leftValue = leftData > maxValue ? maxValue : leftData;
                rightValue = rightData > maxValue ? maxValue : rightData;
                //回調(diào)
                if (listener != null) {
                    listener.onMoveValue(leftValue, rightValue);
                }
                break;
        }

最后，我們?cè)賮?lái)看下布局文件以及Activity中如何調(diào)用展示

<com.ch.custom.view.RangeBarView
        android:id="@+id/view_range_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        app:rect_line_default_color="@color/color_cdcd"
        app:rect_line_checked_color="@color/color_275D9D"
        app:left_circle_solid_color="@color/color_fff"
        app:left_circle_stroke_color="@color/color_cdcd"
        app:right_circle_solid_color="@color/color_fff"
        app:right_circle_stroke_color="@color/color_cdcd"
        app:circle_stroke_width="2dp"
        app:circle_radius="15dp"
        app:rect_line_height="3dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        />

以及Activity

        int minValue = 0;
        int maxValue = 100;
        int sliceValue = 20;
        tvLeftValue.setText(minValue+"");
        tvRightValue.setText(maxValue+"");
        rangeBarView.setDatas(minValue, maxValue, sliceValue, new RangeBarView.OnMoveValueListener() {
            @Override
            public void onMoveValue(int leftValue, int rightValue) {
                tvLeftValue.setText("左邊值為：" + leftValue + "--> "+leftValue);
                tvRightValue.setText("右邊值為：" + rightValue + "--> "+rightValue);
            }
        });

我們可以看到開(kāi)發(fā)者使用起來(lái)也比較方便，這里不但需要一個(gè)最大值還需要一個(gè)最小值，這樣設(shè)計(jì)的目的是，有的需求并不是從0到某一個(gè)數(shù)值，比如，也有可能是從50-1000這樣的，同時(shí)還需要告訴程序小圓每移動(dòng)一下代表的數(shù)值是多少，然后根據(jù)這些數(shù)據(jù)可以算出此控件在此數(shù)據(jù)范圍內(nèi)一共可以分多少份，對(duì)于除不盡的話(huà)我們會(huì)增加一份來(lái)表示剩下的一點(diǎn)數(shù)據(jù)。這里還要感謝Nipuream老鐵的文章給的靈感，感興趣的話(huà)可以點(diǎn)擊這里查看大牛文章，今天就先寫(xiě)到這吧，同事都早已下班回去嗨皮的過(guò)雙休了，我也要撤了，代碼寫(xiě)的有些匆忙，難免會(huì)存在些問(wèn)題，如有問(wèn)題歡迎大家提出，我們共同交流處理

github源碼下載地址：https://github.com/smileCH/RangeBar

最新更新說(shuō)明（以github上最新代碼為主）

昨天看到github上有小伙伴在使用此控件時(shí)遇到一些問(wèn)題，并給我提了issues，看到后我第一時(shí)間對(duì)此控件進(jìn)行了修復(fù)，解決了設(shè)置padding值導(dǎo)致滑動(dòng)位置不準(zhǔn)確的問(wèn)題，優(yōu)化了滑動(dòng)松手后小圓自動(dòng)回彈的計(jì)算問(wèn)題以及開(kāi)發(fā)者設(shè)置的份數(shù)非常多的情況導(dǎo)致小圓無(wú)法滑動(dòng)到最大位置，這些問(wèn)題我都修復(fù)了，并且在代碼中標(biāo)注了日期以及修復(fù)思路，這樣大家就能快速定位代碼，加上注釋理解起來(lái)就會(huì)很順暢。大家可以放心用于商業(yè)項(xiàng)目中。

考慮到有的老鐵可能只需要單項(xiàng)的滑動(dòng)，所以后期打算做成可以根據(jù)用戶(hù)的選擇來(lái)決定是使用雙向滑動(dòng)還是單項(xiàng)滑動(dòng)，只需要在application中初始化的時(shí)候告訴我你要使用哪種方式就行，這樣才更靈活

2018/10/25更新說(shuō)明

dialog_price.png

根據(jù)上面的效果圖我們的產(chǎn)品要求點(diǎn)擊下面的價(jià)格，例如￥0 - ￥150，那么相應(yīng)的上面雙向滑動(dòng)的價(jià)格控件中的兩個(gè)小圓也要相應(yīng)移動(dòng)到指定數(shù)值對(duì)應(yīng)的坐標(biāo)位置處，所以，這里我又對(duì)外開(kāi)放了一個(gè)setCircleMoveCoordinateByValue(int minData, int maxData)方法，只需要把數(shù)值區(qū)間傳給我們的滑動(dòng)控件就行了，兩個(gè)小圓會(huì)滑動(dòng)到指定位置處。感興趣的話(huà)可以到github上查看最新代碼，如果你也在使用此控件并且用的不爽的話(huà)，歡迎提出，我會(huì)盡力減少你的困擾