Android可雙向滑動的範圍選擇器（雙向滑動可選擇範圍的SeekBar）實現

阿新 • • 發佈：2019-02-05

一、概述

之前公司app裡面有個功能是一個可以雙向滑動的範圍選擇器，我在網上百度過一些實現方法，感覺各有利弊吧，但是都不太適合我們的需求。所以站在巨人的肩膀上，通過自定義View實現了一個可以適用於絕大多數情況的範圍選擇器來供大家使用。首先，看效果圖：
範圍選擇器效果
我對該範圍選擇器的屬性進行了一些封裝，例如我們可以自由控制我們的範圍選擇器是否顯示刻度、刻度的長度、我們選擇器上每個值的單位、最大值最小值、遊標（即那個圓形圖片）的樣式、大小、選擇器內部範圍顏色以及外部顏色等等很多屬性。更多玩法還請下載我的Demo體驗，專案地址在文末。

二、實現

2.1 首先看我們自定義View的全部程式碼

 public 
 class DoubleSlideSeekBar extends View {
    /**
     * 線條（進度條）的寬度
     */
    private int lineWidth;
    /**
     * 線條（進度條）的長度
     */
    private int lineLength = 400;
    /**
     * 字所在的高度 100$
     */
    private int textHeight;
    /**
     * 遊標 圖片寬度
     */
    private int imageWidth;
    /**
     * 遊標 圖片高度
     */ 

    private int imageHeight;
    /**
     * 是否有刻度線
     */
    private boolean hasRule;
    /**
     * 左邊的遊標是否在動
     */
    private boolean isLowerMoving;
    /**
     * 右邊的遊標是否在動
     */
    private boolean isUpperMoving;
    /**
     * 字的大小 100$
     */
    private int textSize;
    /**
     * 字的顏色 100$
     */ 

    private int textColor;
    /**
     * 兩個遊標內部 線（進度條）的顏色
     */
    private int inColor = Color.BLUE;
    /**
     * 兩個遊標外部 線（進度條）的顏色
     */
    private int outColor = Color.BLUE;
    /**
     * 刻度的顏色
     */
    private int ruleColor = Color.BLUE;
    /**
     * 刻度上邊的字 的顏色
     */
    private int ruleTextColor = Color.BLUE;
    /**
     * 左邊圖示的圖片
     */
    private Bitmap bitmapLow;
    /**
     * 右邊圖示 的圖片
     */
    private Bitmap bitmapBig;
    /**
     * 左邊圖示所在X軸的位置
     */
    private int slideLowX;
    /**
     * 右邊圖示所在X軸的位置
     */
    private int slideBigX;
    /**
     * 圖示（遊標） 高度
     */
    private int bitmapHeight;
    /**
     * 圖示（遊標） 寬度
     */
    private int bitmapWidth;
    /**
     * 加一些padding 大小酌情考慮 為了我們的自定義view可以顯示完整
     */
    private int paddingLeft = 100;
    private int paddingRight = 100;
    private int paddingTop = 50;
    private int paddingBottom = 10;
    /**
     * 線（進度條） 開始的位置
     */
    private int lineStart = paddingLeft;
    /**
     * 線的Y軸位置
     */
    private int lineY;
    /**
     * 線（進度條）的結束位置
     */
    private int lineEnd = lineLength + paddingLeft;
    /**
     * 選擇器的最大值
     */
    private int bigValue = 100;
    /**
     * 選擇器的最小值
     */
    private int smallValue = 0;
    /**
     * 選擇器的當前最小值
     */
    private float smallRange;
    /**
     * 選擇器的當前最大值
     */
    private float bigRange;
    /**
     * 單位 元
     */
    private String unit = " ";
    /**
     * 單位份數
     */
    private int equal = 20;
    /**
     * 刻度單位 $
     */
    private String ruleUnit = " ";
    /**
     * 刻度上邊文字的size
     */
    private int ruleTextSize = 20;
    /**
     * 刻度線的高度
     */
    private int ruleLineHeight = 20;
    private Paint linePaint;
    private Paint bitmapPaint;
    private Paint textPaint;
    private Paint paintRule;

    public DoubleSlideSeekBar(Context context) {
        this(context, null);
    }

    public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DoubleSlideSeekBar, defStyleAttr, 0);
        int size = typedArray.getIndexCount();
        for (int i = 0; i < size; i++) {
            int type = typedArray.getIndex(i);
            switch (type) {
                case R.styleable.DoubleSlideSeekBar_inColor:
                    inColor = typedArray.getColor(type, Color.BLACK);
                    break;
                case R.styleable.DoubleSlideSeekBar_lineHeight:
                    lineWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 10));
                    break;
                case R.styleable.DoubleSlideSeekBar_outColor:
                    outColor = typedArray.getColor(type, Color.YELLOW);
                    break;
                case R.styleable.DoubleSlideSeekBar_textColor:
                    textColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_textSize:
                    textSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageLow:
                    bitmapLow = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageBig:
                    bitmapBig = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageheight:
                    imageHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 20));
                    break;
                case R.styleable.DoubleSlideSeekBar_imagewidth:
                    imageWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 20));
                    break;
                case R.styleable.DoubleSlideSeekBar_hasRule:
                    hasRule = typedArray.getBoolean(type, false);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleColor:
                    ruleColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleTextColor:
                    ruleTextColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_unit:
                    unit = typedArray.getString(type);
                    break;
                case R.styleable.DoubleSlideSeekBar_equal:
                    equal = typedArray.getInt(type, 10);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleUnit:
                    ruleUnit = typedArray.getString(type);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleTextSize:
                    ruleTextSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleLineHeight:
                    ruleLineHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 10));
                    break;
                case R.styleable.DoubleSlideSeekBar_bigValue:
                    bigValue = typedArray.getInteger(type, 100);
                    break;
                case R.styleable.DoubleSlideSeekBar_smallValue:
                    smallValue = typedArray.getInteger(type, 100);
                    break;


                default:
                    break;
            }
        }
        typedArray.recycle();
        init();
    }

    private void init() {
        /**遊標的預設圖*/
        if (bitmapLow == null) {
            bitmapLow = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        }
        if (bitmapBig == null) {
            bitmapBig = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        }
        /**遊標圖片的真實高度 之後通過縮放比例可以把圖片設定成想要的大小*/
        bitmapHeight = bitmapLow.getHeight();
        bitmapWidth = bitmapLow.getWidth();
        // 設定想要的大小
        int newWidth = imageWidth;
        int newHeight = imageHeight;
        // 計算縮放比例
        float scaleWidth = ((float) newWidth) / bitmapWidth;
        float scaleHeight = ((float) newHeight) / bitmapHeight;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        /**縮放圖片*/
        bitmapLow = Bitmap.createBitmap(bitmapLow, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
        bitmapBig = Bitmap.createBitmap(bitmapBig, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
        /**重新獲取遊標圖片的寬高*/
        bitmapHeight = bitmapLow.getHeight();
        bitmapWidth = bitmapLow.getWidth();
        /**初始化兩個遊標的位置*/
        slideLowX = lineStart;
        slideBigX = lineEnd;
        smallRange = smallValue;
        bigRange = bigValue;
        if (hasRule) {
            //有刻度時 paddingTop 要加上（text高度）和（刻度線高度加刻度線上邊文字的高度和） 之間的最大值
            paddingTop = paddingTop + Math.max(textSize, ruleLineHeight + ruleTextSize);
        } else {
            //沒有刻度時 paddingTop 加上 text的高度
            paddingTop = paddingTop + textSize;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = getMyMeasureWidth(widthMeasureSpec);
        int height = getMyMeasureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int getMyMeasureHeight(int heightMeasureSpec) {
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            // matchparent 或者 固定大小 view最小應為 paddingBottom + paddingTop + bitmapHeight + 10 否則顯示不全
            size = Math.max(size, paddingBottom + paddingTop + bitmapHeight + 10);
        } else {
            //wrap content
            int height = paddingBottom + paddingTop + bitmapHeight + 10;
            size = Math.min(size, height);
        }
        return size;
    }

    private int getMyMeasureWidth(int widthMeasureSpec) {
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {

            size = Math.max(size, paddingLeft + paddingRight + bitmapWidth * 2);

        } else {
            //wrap content
            int width = paddingLeft + paddingRight + bitmapWidth * 2;
            size = Math.min(size, width);
        }
        // match parent 或者 固定大小 此時可以獲取線（進度條）的長度
        lineLength = size - paddingLeft - paddingRight - bitmapWidth;
        //線（進度條）的結束位置
        lineEnd = lineLength + paddingLeft + bitmapWidth / 2;
        //線（進度條）的開始位置
        lineStart = paddingLeft + bitmapWidth / 2;
        //初始化 遊標位置
        slideBigX = lineEnd;
        slideLowX = lineStart;
        return size;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Y軸 座標
        lineY = getHeight() - paddingBottom - bitmapHeight / 2;
        // 字所在高度 100$
        textHeight = lineY - bitmapHeight / 2 - 10;
        //是否畫刻度
        if (hasRule) {
            drawRule(canvas);
        }
        if (linePaint == null) {
            linePaint = new Paint();
        }
        //畫內部線
        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(lineWidth);
        linePaint.setColor(inColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);
        linePaint.setColor(outColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        //畫 外部線
        canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);
        canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);
        //畫遊標
        if (bitmapPaint == null) {
            bitmapPaint = new Paint();
        }
        canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
        canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
        //畫 遊標上邊的字
        if (textPaint == null) {
            textPaint = new Paint();
        }
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        textPaint.setAntiAlias(true);
        canvas.drawText(String.format("%.0f" + unit, smallRange), slideLowX - bitmapWidth / 2, textHeight, textPaint);
        canvas.drawText(String.format("%.0f" + unit, bigRange), slideBigX - bitmapWidth / 2, textHeight, textPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //事件機制
        super.onTouchEvent(event);
        float nowX = event.getX();
        float nowY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下 線上（進度條）範圍上
                boolean rightY = Math.abs(nowY - lineY) < bitmapHeight / 2;
                //按下 在左邊遊標上
                boolean lowSlide = Math.abs(nowX - slideLowX) < bitmapWidth / 2;
                //按下 在右邊遊標上
                boolean bigSlide = Math.abs(nowX - slideBigX) < bitmapWidth / 2;
                if (rightY && lowSlide) {
                    isLowerMoving = true;
                } else if (rightY && bigSlide) {
                    isUpperMoving = true;
                    //點選了遊標外部 的線上
                } else if (nowX >= lineStart && nowX <= slideLowX - bitmapWidth / 2 && rightY) {
                    slideLowX = (int) nowX;
                    updateRange();
                    postInvalidate();
                } else if (nowX <= lineEnd && nowX >= slideBigX + bitmapWidth / 2 && rightY) {
                    slideBigX = (int) nowX;
                    updateRange();
                    postInvalidate();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                //左邊遊標是運動狀態
                if (isLowerMoving) {
                    //當前 X座標在線上 且在右邊遊標的左邊
                    if (nowX <= slideBigX - bitmapWidth && nowX >= lineStart - bitmapWidth / 2) {
                        slideLowX = (int) nowX;
                        if (slideLowX < lineStart) {
                            slideLowX = lineStart;
                        }
                        //更新進度
                        updateRange();
                        postInvalidate();
                    }

                } else if (isUpperMoving) {
                    //當前 X座標在線上 且在左邊遊標的右邊
                    if (nowX >= slideLowX + bitmapWidth && nowX <= lineEnd + bitmapWidth / 2) {
                        slideBigX = (int) nowX;
                        if (slideBigX > lineEnd) {
                            slideBigX = lineEnd;
                        }
                        //更新進度
                        updateRange();
                        postInvalidate();

                    }
                }
                break;
            //手指擡起
            case MotionEvent.ACTION_UP:
                isUpperMoving = false;
                isLowerMoving = false;
                break;
            default:
                break;
        }

        return true;
    }

    private void updateRange() {
        //當前 左邊遊標數值
        smallRange = computRange(slideLowX);
        //當前 右邊遊標數值
        bigRange = computRange(slideBigX);
        //介面 實現值的傳遞
        if (onRangeListener != null) {
            onRangeListener.onRange(smallRange, bigRange);
        }
    }

    /**
     * 獲取當前值
     */
    private float computRange(float range) {
        return (range - lineStart) * (bigValue - smallValue) / lineLength + smallValue;
    }

    public int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 畫刻度
     */
    protected void drawRule(Canvas canvas) {
        if (paintRule == null) {
            paintRule = new Paint();
        }
        paintRule.setStrokeWidth(1);
        paintRule.setTextSize(ruleTextSize);
        paintRule.setTextAlign(Paint.Align.CENTER);
        paintRule.setAntiAlias(true);
        //遍歷 equal份,畫刻度
        for (int i = smallValue; i <= bigValue; i += (bigValue - smallValue) / equal) {
            float degX = lineStart + i * lineLength / (bigValue - smallValue);
            int degY = lineY - ruleLineHeight;
            paintRule.setColor(ruleColor);
            canvas.drawLine(degX, lineY, degX, degY, paintRule);
            paintRule.setColor(ruleTextColor);
            canvas.drawText(String.valueOf(i) + ruleUnit, degX, degY, paintRule);
        }
    }

    /**
     * 寫個介面 用來傳遞最大最小值
     */
    public interface onRangeListener {
        void onRange(float low, float big);
    }

    private onRangeListener onRangeListener;

    public void setOnRangeListener(DoubleSlideSeekBar.onRangeListener onRangeListener) {
        this.onRangeListener = onRangeListener;
    }
}

2.2 實現流程

程式碼的註解很詳細，下面我們來進一步分析此自定義view的實現步驟。首先，我們要自定義一些屬性，在res/values資料夾下建立檔案attrs,內容如下：

 <resources>
    <!--線（進度條）寬度-->
    <attr name="lineHeight" format="dimension" />
    <!--字的大小 100元-->
    <attr name="textSize" format="dimension" />
    <!--字的顏色 100元-->
    <attr name="textColor" format="color" />
    <!--兩個遊標內部 線（進度條）的顏色-->
    <attr name="inColor" format="color" />
    <!--兩個遊標外部 線（進度條）的顏色-->
    <attr name="outColor" format="color" />
    <!--左邊圖示的圖片-->
    <attr name="imageLow" format="reference"/>
    <!--右邊圖示 的圖片-->
    <attr name="imageBig" format="reference"/>
    <!--遊標 圖片寬度-->
    <attr name="imagewidth" format="dimension" />
    <!--遊標 圖片高度-->
    <attr name="imageheight" format="dimension" />
    <!--是否有刻度線-->
    <attr name="hasRule" format="boolean" />
    <!--刻度的顏色-->
    <attr name="ruleColor" format="color" />
    <!--刻度上邊的字 的顏色-->
    <attr name="ruleTextColor" format="color" />
    <!--單位 元-->
    <attr name="unit" format="string"/>
    <!--單位份數-->
    <attr name="equal" format="integer"/>
    <!--刻度單位 $-->
    <attr name="ruleUnit" format="string"/>
    <!--刻度上邊文字的size-->
    <attr name="ruleTextSize" format="dimension" />
    <!--刻度線的高度-->
    <attr name="ruleLineHeight" format="dimension" />
    <!--選擇器的最大值-->
    <attr name="bigValue" format="integer"/>
    <!--選擇器的最小值-->
    <attr name="smallValue" format="integer"/>
    <declare-styleable name="DoubleSlideSeekBar">
        <attr name="lineHeight" />
        <attr name="textSize" />
        <attr name="textColor" />
        <attr name="inColor" />
        <attr name="outColor" />
        <attr name="imageLow"/>
        <attr name="imageBig"/>
        <attr name="imagewidth" />
        <attr name="imageheight" />
        <attr name="hasRule" />
        <attr name="ruleColor" />
        <attr name="ruleTextColor" />
        <attr name="unit" />
        <attr name="equal" />
        <attr name="ruleUnit" />
        <attr name="ruleTextSize" />
        <attr name="ruleLineHeight" />
        <attr name="bigValue" />
        <attr name="smallValue" />
    </declare-styleable>
</resources>

我們要先確定我們要控制的屬性。綜合下來，我們需要控制進度條的寬度（高）、顏色、遊標上邊字的大小、刻度上邊字的大小、顏色、是否有遊標等等功能，所有屬性及說明如下（可以酌情定製）：

xml屬性	值	解釋
lineHeight	dimension	控制我們線（進度條）的寬（高）度（例20dp）
textSize	dimension	遊標上邊字的大小（例16sp）
textColor	color	遊標上邊字的顏色（例#e40627）
inColor	color	兩個遊標之間進度條的顏色（例#e40627）
outColor	color	兩個遊標外部（遊標到進度條兩端）進度條的顏色（例#e40627）
imageLow	reference	左邊遊標的圖片（例@mipmap/imgv_slide）
imageBig	reference	右邊遊標的圖片（例@mipmap/imgv_slide）
imagewidth	dimension	遊標圖片的寬度（例20dp）
imagewidth	dimension	遊標圖片的高度（例20dp）
hasRule	boolean	是否有刻度線（例 true or false）
ruleColor	color	刻度線的顏色（例#e40627）
ruleTextColor	color	刻度線上邊的字的顏色（例#e40627）
unit	string	單位（例元）
equal	integer	單位份數，把全部資料分成equal份（例smallValue是0，bigValue是100，equal是10，則每個刻度大小為（100-0）/10 =10）
ruleUnit	string	刻度上邊文字的單位（例 $）
ruleTextSize	dimension	刻度上邊文字的大小（例20sp）
ruleLineHeight	dimension	刻度線高度（例16dp）
bigValue	integer	選擇器的最大值（例 100）
smallValue	integer	選擇器的最小值（例 0）

之後在自定義View裡面獲取我們定義的屬性：

TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DoubleSlideSeekBar, defStyleAttr, 0);
        int size = typedArray.getIndexCount();
        for (int i = 0; i < size; i++) {
            int type = typedArray.getIndex(i);
            switch (type) {
                case R.styleable.DoubleSlideSeekBar_inColor:
                    inColor = typedArray.getColor(type, Color.BLACK);
                    break;
                case R.styleable.DoubleSlideSeekBar_lineHeight:
                    lineWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 10));
                    break;
                case R.styleable.DoubleSlideSeekBar_outColor:
                    outColor = typedArray.getColor(type, Color.YELLOW);
                    break;
                case R.styleable.DoubleSlideSeekBar_textColor:
                    textColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_textSize:
                    textSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageLow:
                    bitmapLow = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageBig:
                    bitmapBig = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(type, 0));
                    break;
                case R.styleable.DoubleSlideSeekBar_imageheight:
                    imageHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 20));
                    break;
                case R.styleable.DoubleSlideSeekBar_imagewidth:
                    imageWidth = (int) typedArray.getDimension(type, dip2px(getContext(), 20));
                    break;
                case R.styleable.DoubleSlideSeekBar_hasRule:
                    hasRule = typedArray.getBoolean(type, false);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleColor:
                    ruleColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleTextColor:
                    ruleTextColor = typedArray.getColor(type, Color.BLUE);
                    break;
                case R.styleable.DoubleSlideSeekBar_unit:
                    unit = typedArray.getString(type);
                    break;
                case R.styleable.DoubleSlideSeekBar_equal:
                    equal = typedArray.getInt(type, 10);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleUnit:
                    ruleUnit = typedArray.getString(type);
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleTextSize:
                    ruleTextSize = typedArray.getDimensionPixelSize(type, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DoubleSlideSeekBar_ruleLineHeight:
                    ruleLineHeight = (int) typedArray.getDimension(type, dip2px(getContext(), 10));
                    break;
                case R.styleable.DoubleSlideSeekBar_bigValue:
                    bigValue = typedArray.getInteger(type, 100);
                    break;
                case R.styleable.DoubleSlideSeekBar_smallValue:
                    smallValue = typedArray.getInteger(type, 100);
                    break;


                default:
                    break;
            }
        }
        typedArray.recycle();

由於我們要使用的是三個引數的構造器，所以對應一參二參的構造器進行如下設定：

 public DoubleSlideSeekBar(Context context) {
        this(context, null);
    }

    public DoubleSlideSeekBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

初始化

 /**遊標圖片的真實高度 之後通過縮放比例可以把圖片設定成想要的大小*/
        bitmapHeight = bitmapLow.getHeight();
        bitmapWidth = bitmapLow.getWidth();
        // 設定想要的大小
        int newWidth = imageWidth;
        int newHeight = imageHeight;
        // 計算縮放比例
        float scaleWidth = ((float) newWidth) / bitmapWidth;
        float scaleHeight = ((float) newHeight) / bitmapHeight;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        /**縮放圖片*/
        bitmapLow = Bitmap.createBitmap(bitmapLow, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
        bitmapBig = Bitmap.createBitmap(bitmapBig, 0, 0, bitmapWidth, bitmapHeight, matrix, true);
        /**重新獲取遊標圖片的寬高*/
        bitmapHeight = bitmapLow.getHeight();
        bitmapWidth = bitmapLow.getWidth();
        /**初始化兩個遊標的位置*/
        slideLowX = lineStart;
        slideBigX = lineEnd;
        smallRange = smallValue;
        bigRange = bigValue;
        if (hasRule) {
            //有刻度時 paddingTop 要加上（text高度）和（刻度線高度加刻度線上邊文字的高度和） 之間的最大值
            paddingTop = paddingTop + Math.max(textSize, ruleLineHeight + ruleTextSize);
        } else {
            //沒有刻度時 paddingTop 加上 text的高度
            paddingTop = paddingTop + textSize;
        }

通過Matrix對bitmap進行縮放，將遊標設定成我們想要的大小。初始化兩個遊標在雙向選擇器的兩頭，一般都是在最大值和最小值處的，若有特殊需求也可更改slideLowX和slideBigX進行設定。由於我們在計算自定義view的高度時，需要把刻度以及刻度上邊文字的高度算進去，所以有刻度時 paddingTop 要加上（text高度）和（刻度線高度加刻度線上邊文字的高度和）之間的最大值，沒有刻度時 paddingTop 加上 text的高度。

計算寬高
計算View的高度：

int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            // matchparent 或者 固定大小 view最小應為 paddingBottom + paddingTop + bitmapHeight + 10 否則顯示不全
            size = Math.max(size, paddingBottom + paddingTop + bitmapHeight + 10);
        } else {
            //wrap content
            int height = paddingBottom + paddingTop + bitmapHeight + 10;
            size = Math.min(size, height);
        }

當mode == MeasureSpec.EXACTLY時，我們在佈局檔案中已經固定了view的高度，但是view最小應為 paddingBottom + paddingTop + bitmapHeight + 10 否則顯示不全。當沒有固定大小時，一般是wrap content，那麼它的高度應為 paddingBottom + paddingTop + bitmapHeight + 10（+10只是為了能讓view所佔的空間大一些而已，沒有特殊意義，可以不加）。
計算View的寬度：

        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {

            size = Math.max(size, paddingLeft + paddingRight + bitmapWidth * 2);

        } else {
            //wrap content
            int width = paddingLeft + paddingRight + bitmapWidth * 2;
            size = Math.min(size, width);
        }
        // match parent 或者 固定大小 此時可以獲取線（進度條）的長度
        lineLength = size - paddingLeft - paddingRight - bitmapWidth;
        //線（進度條）的結束位置
        lineEnd = lineLength + paddingLeft + bitmapWidth / 2;
        //線（進度條）的開始位置
        lineStart = paddingLeft + bitmapWidth / 2;
        //初始化 遊標位置
        slideBigX = lineEnd;
        slideLowX = lineStart;

與計算高度同理，但此時，我們需要確定線（進度條）的長度，起始點。

onDraw 繪製進度條
畫兩個遊標之間的線：

        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(lineWidth);
        linePaint.setColor(inColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(slideLowX, lineY, slideBigX, lineY, linePaint);

此線從（slideLowX，lineY）到（slideBigX，lineY），其中slideLowX，slideBigY已經在計算寬度時賦值。lineY = getHeight() - paddingBottom - bitmapHeight / 2，即整個View的高度減paddingBottom再減bitmapHeight / 2（遊標圖的1/2高度），如果遊標高度比線寬小的話，則lineY = getHeight() - paddingBottom - lineWidth / 2，不過這種需求應該很少。
畫兩個遊標到兩端的線：

        linePaint.setColor(outColor);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        //畫 外部線
        canvas.drawLine(lineStart, lineY, slideLowX, lineY, linePaint);
        canvas.drawLine(slideBigX, lineY, lineEnd, lineY, linePaint);

linePaint.setStrokeCap(Paint.Cap.ROUND)可以畫出帶圓角的線。之後要畫兩條線，一條是從線的起點到左邊遊標的中心。另一條是從右邊遊標的中心到線的終點。
畫遊標：

        canvas.drawBitmap(bitmapLow, slideLowX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);
        canvas.drawBitmap(bitmapBig, slideBigX - bitmapWidth / 2, lineY - bitmapHeight / 2, bitmapPaint);

即左邊遊標左部為slideLowX - bitmapWidth / 2，頂端在lineY - bitmapHeight / 2。右邊遊標同理。
畫遊標上邊的字：

        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        textPaint.setAntiAlias(true);
        canvas.drawText(String.format("%.0f" + unit, smallRange), slideLowX - bitmapWidth / 2, textHeight, textPaint);
        canvas.drawText(String.format("%.0f" + unit, bigRange), slideBigX - bitmapWidth / 2, textHeight, textPaint);

字的位置控制在遊標的正上方。有其他需求可以在此處調整。
畫刻度線：

        paintRule.setStrokeWidth(1);
        paintRule.setTextSize(ruleTextSize);
        paintRule.setTextAlign(Paint.Align.CENTER);
        paintRule.setAntiAlias(true);
        //遍歷 equal份,畫刻度
        for (int i = smallValue; i <= bigValue; i += (bigValue - smallValue) / equal) {
            float degX = lineStart + i * lineLength / (bigValue - smallValue);
            int degY = lineY - ruleLineHeight;
            paintRule.setColor(ruleColor);
            canvas.drawLine(degX, lineY, degX, degY, paintRule);
            paintRule.setColor(ruleTextColor);
            canvas.drawText(String.valueOf(i) + ruleUnit, degX, degY, paintRule);
        }

我們已經傳過來equal的值，即把所有資料分成equal份，每一份畫一個刻度。並在刻度上方寫上數字。如果有特殊需求，比如有的刻度線長有的刻度線短，則需要加個判斷，根據判斷的結果drawLine，不同的結果設定不同的高度。

事件監聽
我們需要判斷我們觸控式螢幕幕時是否點選在遊標上，是左邊遊標還是右邊遊標。此時則需要我們對點選事件的監聽。判斷點選位置的方法：

                float nowX = event.getX();
                float nowY = event.getY();
                //按下 在遊標範圍上
                boolean rightY = Math.abs(nowY - lineY) < bitmapHeight / 2;
                //按下 在左邊遊標上
                boolean lowSlide = Math.abs(nowX - slideLowX) < bitmapWidth / 2;
                //按下 在右邊遊標上
                boolean bigSlide = Math.abs(nowX - slideBigX) < bitmapWidth / 2;
                if (rightY && lowSlide) {
                    isLowerMoving = true;
                } else if (rightY && bigSlide) {
                    isUpperMoving = true;
                    //點選了遊標外部 的線上
                } else if (nowX >= lineStart && nowX <= slideLowX - bitmapWidth / 2 && rightY) {
                    slideLowX = (int) nowX;
                    updateRange();
                    postInvalidate();
                } else if (nowX <= lineEnd && nowX >= slideBigX + bitmapWidth / 2 && rightY) {
                    slideBigX = (int) nowX;
                    updateRange();

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    Android可雙向滑動的範圍選擇器（雙向滑動可選擇範圍的SeekBar）實現
      
							
							
							一、概述

之前公司app裡面有個功能是一個可以雙向滑動的範圍選擇器，我在網上百度過一些實現方法，感覺各有利弊吧，但是都不太適合我們的需求。所以站在巨人的肩膀上，通過自定義View實現了一個可以適用於絕大多數情況的範圍選擇器來供大家使用。首先，看效果圖： 
 
 

  
 

    

    
    起名與選擇器~（總結類、持續更新系列）
      瀏覽器   自定義   輸入   class   引入   -type   一個   important   css   廢話沒有，直接幹活
　　一、起名方式：1.元素自身的標簽名； 2.利用class屬性自定義名稱；3.利用id屬性自定義名稱。共三種，其中class使用居多。
　　二、選擇器：註：選擇器使用 

  
 

    

    
    iview裡面時間選擇器（預設當月1號到至今）
       
 
 
 <template>
<div>
    <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" 
        placeholder 

  
 

    

    
    jQuery選擇器——（記一次慘痛的經歷）
      
                1.基本選擇器

$("#id")            //ID選擇器
$("div")            //元素選擇器
$(".classname")     //類選擇器
$(".classname,.classname1,#id1")     //組合選擇器

 

  
 

    

    
    【CSS3】選擇器（表單元素選擇器 & 其他）--慕課網【學習總結】
      
							
							
							1.表單元素選擇器



(１):enabled選擇器

　　在Web的表單中，有些表單元素有可用狀態（“:enabled”）和不可用狀態（“:disabled”），比如輸入框，密碼框，複選框等。我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。
 

  
 

    

    
    微信小程式----picker選擇器（picker、省市區選擇器）（MUI選擇器）
      
							
							
							



效果圖





實現原理


  利用微信小程式的picker元件，其中： 
  1，普通選擇器：mode = selector實現一級選擇例項； 
  2，省市區選擇器：mode = region實現省市區三級聯動； 
  3， 多列選擇器：mode 

  
 

    

    
    android  年月日選擇器（可選擇年，年月，年月日）
      
                首先是兩個佈局檔案 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk 

  
 

    

    
    Android：仿QQ照片選擇器（按相簿分類顯示，多選新增）
      
                

本例的目的是實現類似於QQ的照片選擇功能。選擇照片之後，使用類似於新浪微博 發微博 頁面進行展示。

先上效果圖：

      


本例中使用的主要技術：

1.使用ContentProvider讀取SD卡所有圖片資訊。

2.對1中獲取的圖片，以圖片所屬的父資料夾進 

  
 

    

    
    Android開發之狀態選擇器（selector）詳解
      
                
這些天博主的專案進度比較快，現在伺服器那端進度較慢，所以博主晚上最近會比較有時間，所以最近會多寫些部落格出來和大家分享~希望能夠幫助到大家。
所謂狀態選擇器，就是控制元件（view或者viewgroup）的狀態發現變化的時候，我們可以再指定的狀態下，切換控制元件的背景屬性（ 

  
 

    

    
    Android 圖片選擇器（第二種）
       ImageConfig imageConfig
        = new ImageConfig.Builder(new GlideLoader())
        .steepToolBarColor(getResources().getColor(R.color.blue))
        .ti 

  
 

    

    
    萬能選擇器（可自定義生日選擇，地區選擇，性別選擇，，，，）;
      
                


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import and 

  
 

    

    
    仿網易新聞標籤選擇器（可拖動）-TabMoveLayout
      
							
							
							仿網易新聞標籤欄-TabMoveLayout

網易新聞標籤欄的實現效果我一直想實現試試，最近發現支付寶的應用欄也變成了這樣，最近花了點時間終於實現，初步實現效果如下，後面有時間還會繼續完善 




實現功能

1.長按抖動 
2.標籤可隨意拖動，其他標籤隨之 

  
 

    

    
    CSS3學習系列之選擇器（二）
      計算   選擇器   sky   :focus   ddr   gree   for   指定元素   學習   
first-child選擇器和last-child選擇器

first-child指定第一個元素。last-child指定最後一個子元素。
例如：

<!DOCTYPE html>
 

  
 

    

    
    jQuery UI 日期選擇器（Datepicker）
      jquery ui   next   ext   style   cti   cto   log   href   region    
設置JqueryUI DatePicker默認語言為中文
 
<!doctype html><html lang="en">
	<head&g 

  
 

    

    
    jquery過濾選擇器-----------（表單對象屬性過濾選擇器 與 表單選擇器）
      images   alt   分享   wid   image   logs   jquery   query   器）   1.表單對象屬性選擇器
　　
 
2.程序 
 
3.表單選擇器
　　
 jquery過濾選擇器-----------（表單對象屬性過濾選擇器 與 表單選擇器） 

  
 

    

    
    css3新特性選擇器（補充）
      last   inpu   child   一行   標簽   after   第一個   ren   得到   1.選擇p標簽中的第一個字符
p:first-letter{
color:red;
font-size:25px;
}
2.選擇p標簽中的第一行
p:first-line{
　　color:red 

  
 

    

    
    jQuery UI 實例 - 日期選擇器（Datepicker）
      for   cal   周四   radi   panel   alternate   可能   max   輸入   默認功能
日期選擇器（Datepicker）綁定到一個標準的表單 input 字段上。把焦點移到 input 上（點擊或者使用 tab 鍵），在一個小的覆蓋層上打開一個交互日歷。選擇一個日期 

  
 

    

    
    css選擇器（基礎）
      掌握   class   就是   content   tle   版本   語法   tex   人物   CSS選擇器：
    一個樣式的語法是由選擇器+屬性+屬性值三部分組成；
 
    到底什麽是選擇器呢？
 
答：個人直白的理解為：選擇一種要對它進行操作的標簽的方法就叫做選擇器。也就是說選擇器就 

  
 

    

    
    CSS選擇器之偽類選擇器（偽元素）
      寫法   cor   outline   p標簽   而不是   edit   實現   after   tab   



selection


[CSS4]應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。（IE8及以下不支持）（火狐-moz-selection）

 

  
 

    

    
    CSS(CSS3)選擇器（1）
      cti   str   插入   link   規則   padding   不可   情況   可能   這篇文章主要用於存儲CSS以及CSS3的選擇器部分知識，以便日後查閱及記憶.
該內容分為兩部分，第一部分為css選擇器的一些基本知識。第二部分為CSS3新增加的選擇器。
在開始之前，先簡單介紹一下選擇器