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

繪制

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

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

下面分別展示下這些組件的繪制澡罚，其實主要是坐標(biāo)的確定，只要坐標(biāo)知道了肾请，那么繪制起來就一氣呵成了留搔。其中，繪制小三角形用的是path進行連線繪制

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+"萬以下";
        } else if (leftValue > minValue && rightValue == maxValue) {
            textDesc = leftValue+"萬以上";
        } else if (leftValue > minValue && rightValue < maxValue) {
            if (leftValue == rightValue) {
                textDesc = rightValue+"萬以下";
            }else
                textDesc = leftValue+"-"+rightValue+"萬";
        }

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

然后是對手勢滑動的處理

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

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

接著需要對起始位置以及終點位置的邊界進行處理奸柬，防止越界生年，兩圓總不能滑出起始位置或者終點位置吧，其實對邊界的處理還是很簡單的廓奕，比如左邊圓滑動坐標(biāo)小于起始點的坐標(biāo)時抱婉，我們就把起始點的坐標(biāo)重新賦值給這個圓的圓心坐標(biāo)，右邊臨界點的判斷也是類似

       //防止越界處理
        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;
                }
            }
        }

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

            case MotionEvent.ACTION_MOVE:
                float moveX = event.getX();
                isShowRectDialog = true;
                if (leftCircleObj.cx == rightCircleObj.cx) {//兩圓圈重合的情況
                    if (touchLeftCircle) {
                        //極端情況的優(yōu)化處理仪或，滑動左邊圓到達最右邊時，再次滑動時設(shè)置為左滑士骤，即：繼續(xù)讓左邊圓向左滑動
                        if (leftCircleObj.cx == getWidth() - getPaddingRight() - strokeRadius) {
                            touchLeftCircle = true;
                            leftCircleObj.cx = (int) moveX;
                        }else {
                            //當(dāng)滑動左邊圓在中間某處與右邊圓重合時范删，此時再次繼續(xù)滑動則左邊圓處于右邊圓位置處不動，右邊圓改為向右滑動
                            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) {
                        //滑動左邊圓圈時拷肌，如果位置等于或者超過右邊圓的位置時到旦，設(shè)置右邊圓圈的坐標(biāo)給左邊圓圈，就相當(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)滑動的距離小于步長的一半時若锁，松開滑動搁骑，圓需要回彈到上一個位置處，很多細(xì)節(jié)都是需要處理的，在寫的過程中會遇到很多奇葩的問題仲器，需要有足夠的耐心慢慢去調(diào)試煤率，最后我們需要在手指抬起也就是up時將數(shù)據(jù)回調(diào)給UI進行展示

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

最后，我們再來看下布局文件以及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);
            }
        });

我們可以看到開發(fā)者使用起來也比較方便乏冀，這里不但需要一個最大值還需要一個最小值蝶糯，這樣設(shè)計的目的是，有的需求并不是從0到某一個數(shù)值辆沦，比如昼捍，也有可能是從50-1000這樣的，同時還需要告訴程序小圓每移動一下代表的數(shù)值是多少肢扯，然后根據(jù)這些數(shù)據(jù)可以算出此控件在此數(shù)據(jù)范圍內(nèi)一共可以分多少份端三，對于除不盡的話我們會增加一份來表示剩下的一點數(shù)據(jù)。這里還要感謝Nipuream老鐵的文章給的靈感鹃彻，感興趣的話可以點擊這里查看大牛文章郊闯，今天就先寫到這吧，同事都早已下班回去嗨皮的過雙休了蛛株，我也要撤了团赁，代碼寫的有些匆忙，難免會存在些問題谨履，如有問題歡迎大家提出欢摄，我們共同交流處理

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

最新更新說明（以github上最新代碼為主）

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

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

2018/10/25更新說明

dialog_price.png

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