import android.view.View;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;

import com.zhiziyun.dmptest.bot.R;


/**
 * Created by Administrator on 2018/7/27.
 */

public class RangeSeekBar extends View {
 private float lineWidth = 5.0f;
 private float textSize = 25.0f;

 private int inRangeColor = 0xff247ab7;
 private int outRangeColor = 0xff777777;
 private int textColor = 0xff247ab7;

 private int textMarginBottom = 10;

 private int lowerCenterX;
 private int upperCenterX;

 private int bmpWidth;
 private int bmpHeight;

 private Bitmap lowerBmp;
 private Bitmap upperBmp;

 private Paint inRangePaint;
 private Paint outRangePaint;
 private Paint bmpPaint;
 private Paint textPaint;

 private boolean isLowerMoving = false;
 private boolean isUpperMoving = false;

 private OnRangeChangedListener onRangeChangedListener;

 private int paddingLeft = 50;
 private int paddingRight = 50;
 private int paddingTop = 50;
 private int paddingBottom = 10;

 private int lineHeight;
 private int lineLength = 400;
 private int lineStart = paddingLeft;
 private int lineEnd = lineLength + paddingLeft;

 private float smallValue = 13.0f;//最小值
 private float bigValue = 60.0f;//最大值

 private float smallRange = smallValue;
 private float bigRange = bigValue;

 private int textHeight;

 public RangeSeekBar(Context context) {
  super(context);
  init();
 }

 public RangeSeekBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  init();
 }

 public RangeSeekBar(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init();
 }

 private void init() {
  lowerBmp = BitmapFactory.decodeResource(getResources(),
    R.drawable.circular);//圓形按鈕圖標，自己設(shè)置
  upperBmp = BitmapFactory.decodeResource(getResources(),
    R.drawable.circular);//圓形按鈕圖標，自己設(shè)置

  bmpWidth = upperBmp.getWidth();
  bmpHeight = upperBmp.getHeight();

  lowerCenterX = lineStart;
  upperCenterX = lineEnd;

  lineHeight = getHeight() - paddingBottom - lowerBmp.getHeight() / 2;
  textHeight = lineHeight + lowerBmp.getHeight() / 2 + 10;

 }

 private void initPaint() {
  // 繪制范圍內(nèi)的線條
  inRangePaint = new Paint();
  inRangePaint.setAntiAlias(true);
  inRangePaint.setStrokeWidth(lineWidth);
  inRangePaint.setColor(inRangeColor);

  // 繪制范圍外的線條
  outRangePaint = new Paint();
  outRangePaint.setAntiAlias(true);
  outRangePaint.setStrokeWidth(lineWidth);
  outRangePaint.setColor(outRangeColor);

  // 畫圖片滑塊
  bmpPaint = new Paint();

  // 畫范圍文字
  textPaint = new Paint();
  textPaint.setColor(textColor);
  textPaint.setTextSize(textSize);
  textPaint.setAntiAlias(true);
  textPaint.setStrokeWidth(lineWidth);
 }

 private int measureWidth(int measureSpec) {
  int result = 0;

  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);

  if (specMode == MeasureSpec.EXACTLY) {
   result = specSize;
  } else {
   result = paddingLeft + paddingRight + bmpWidth * 2;

   if (specMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, specSize);
   }
  }

  return result;
 }

 private int measureHeight(int measureHeight) {
  int result = 0;

  int specMode = MeasureSpec.getMode(measureHeight);
  int specSize = MeasureSpec.getSize(measureHeight);

  if (specMode == MeasureSpec.EXACTLY) {
   result = bmpHeight * 2;
  } else {
   result = bmpHeight + paddingTop;

   if (specMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, specSize);
   }
  }

  return result;
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  widthMeasureSpec = measureWidth(widthMeasureSpec);
  heightMeasureSpec = measureHeight(heightMeasureSpec);
  setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
 }

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

  bmpWidth = upperBmp.getWidth();
  bmpHeight = upperBmp.getHeight();

  lineHeight = getHeight() - paddingBottom - lowerBmp.getHeight() / 2;
  textHeight = lineHeight - bmpHeight / 2 - textMarginBottom;

  // 畫線
  Paint linePaint = new Paint();
  linePaint.setAntiAlias(true);
  linePaint.setStrokeWidth(lineWidth);

  // 繪制處于圖片滑塊之間線段
  linePaint.setColor(inRangeColor);
  canvas.drawLine(lowerCenterX, lineHeight, upperCenterX, lineHeight,
    linePaint);

  // 繪制處于圖片滑塊兩端的線段
  linePaint.setColor(outRangeColor);
  canvas.drawLine(lineStart, lineHeight, lowerCenterX, lineHeight,
    linePaint);
  canvas.drawLine(upperCenterX, lineHeight, lineEnd, lineHeight,
    linePaint);

  // 畫圖片滑塊
  Paint bmpPaint = new Paint();
  canvas.drawBitmap(lowerBmp, lowerCenterX - bmpWidth / 2, lineHeight
    - bmpHeight / 2, bmpPaint);
  canvas.drawBitmap(lowerBmp, upperCenterX - bmpWidth / 2, lineHeight
    - bmpHeight / 2, bmpPaint);

  // 畫范圍文字
  Paint textPaint = new Paint();
  textPaint.setColor(textColor);
  textPaint.setTextSize(textSize);
  textPaint.setAntiAlias(true);
  textPaint.setStrokeWidth(lineWidth);
  canvas.drawText(String.format("%.0f歲", smallRange), lowerCenterX
    - bmpWidth / 2, textHeight, textPaint);
  canvas.drawText(String.format("%.0f歲", bigRange), upperCenterX
    - bmpWidth / 2, textHeight, textPaint);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  super.onTouchEvent(event);

  float xPos = event.getX();
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    // 如果按下的位置在垂直方向沒有與圖片接觸，則不會滑動滑塊
    float yPos = event.getY();
    if (Math.abs(yPos - lineHeight) > bmpHeight / 2) {
     return false;
    }

    // 表示當(dāng)前按下的滑塊是左邊的滑塊
    if (Math.abs(xPos - lowerCenterX) < bmpWidth / 2) {
     isLowerMoving = true;
    }

    // //表示當(dāng)前按下的滑塊是右邊的滑塊
    if (Math.abs(xPos - upperCenterX) < bmpWidth / 2) {
     isUpperMoving = true;
    }

    // 單擊左邊滑塊的左邊線條時，左邊滑塊滑動到對應(yīng)的位置
    if (xPos >= lineStart && xPos <= lowerCenterX - bmpWidth / 2) {
     lowerCenterX = (int) xPos;
     updateRange();
     postInvalidate();
    }

    // 單擊右邊滑塊的右邊線條時， 右邊滑塊滑動到對應(yīng)的位置
    if (xPos <= lineEnd && xPos >= upperCenterX + bmpWidth / 2) {
     upperCenterX = (int) xPos;
     updateRange();
     postInvalidate();
    }
    break;
   case MotionEvent.ACTION_MOVE:
    // 滑動左邊滑塊時
    if (isLowerMoving) {
     if (xPos >= lineStart && xPos < upperCenterX - bmpWidth) {
      lowerCenterX = (int) xPos;
      updateRange();
      postInvalidate();
     }
    }

    // 滑動右邊滑塊時
    if (isUpperMoving) {
     if (xPos > lowerCenterX + bmpWidth && xPos < lineEnd) {
      upperCenterX = (int) xPos;
      updateRange();
      postInvalidate();
     }
    }

    break;
   case MotionEvent.ACTION_UP:
    // 修改滑塊的滑動狀態(tài)為不再滑動
    isLowerMoving = false;
    isUpperMoving = false;
    break;
   default:
    break;
  }

  return true;
 }

 // 計算指定滑塊對應(yīng)的范圍值
 private float computRange(float range) {
  return (range - lineStart) * (bigValue - smallValue) / lineLength
    + smallValue;
 }

 // 滑動滑塊的過程中，更新滑塊上方的范圍標識
 private void updateRange() {
  smallRange = computRange(lowerCenterX);
  bigRange = computRange(upperCenterX);

  if (null != onRangeChangedListener) {
   onRangeChangedListener.onRangeChanged(smallRange, bigRange);
  }
 }

 // 注冊滑塊范圍值改變事件的監(jiān)聽
 public void setOnRangeChangedListener(
   OnRangeChangedListener onRangeChangedListener) {
  this.onRangeChangedListener = onRangeChangedListener;
 }

 // 公共接口，用戶回調(diào)接口范圍值的改變
 public interface OnRangeChangedListener {

  public void onRangeChanged(float lowerRange, float upperRange);

 }

}

<com.zhiziyun.dmptest.bot.util.RangeSeekBar
    android:id="@+id/rangeSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

rangeSeekBar = (RangeSeekBar) findViewById(R.id.rangeSeekBar);

  rangeSeekBar.setOnRangeChangedListener(new RangeSeekBar.OnRangeChangedListener() {

   @Override
   public void onRangeChanged(float lowerRange, float upperRange) {
    tv_age.setText((int) lowerRange + "~" + (int) upperRange);
   }
  });