Android開發(fā)自定義雙向SeekBar拖動(dòng)條控件

更新時(shí)間：2022年06月09日 09:15:55 作者：CodeCopyer

這篇文章主要為大家介紹了Android開發(fā)自定義雙向SeekBar拖動(dòng)條控件使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

目標(biāo):雙向拖動(dòng)的自定義View

國(guó)際慣例先預(yù)覽后實(shí)現(xiàn)

我們要實(shí)現(xiàn)的就是一個(gè)段位樣式的拖動(dòng)條,用來做篩選條件用的,細(xì)心的朋友可能會(huì)發(fā)現(xiàn)微信設(shè)置里面有個(gè)一個(gè)通用字體的設(shè)置,拖動(dòng)然后改變字體大小;

這個(gè)相對(duì)比微信那個(gè)的自定義view算是一個(gè)擴(kuò)展,因?yàn)槲覀兪请p向滑動(dòng),這個(gè)多考慮的一點(diǎn)就是手指拖動(dòng)的是哪一個(gè)滑動(dòng)塊!

我們先看下GIF預(yù)覽,然后我們今天就一步步實(shí)現(xiàn)這個(gè)小玩意…

實(shí)現(xiàn)步驟

自定義屬性的抽取
view尺寸的計(jì)算
相關(guān)內(nèi)容的繪制(文字,原點(diǎn),背景進(jìn)度條,當(dāng)前進(jìn)度條等等)
處理滑動(dòng)事件

大體思路分四部分;我們一步步來;簡(jiǎn)單的就一部帶過了

自定義屬性獲取

 public ATDragView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ATDragView, defStyleAttr, R.style.def_dragview);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.ATDragView_seek_bg_color:
                    seekBgColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ATDragView_seek_pb_color:
                    seekPbColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ATDragView_seek_ball_solid_color:
                    seekBallSolidColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ATDragView_seek_ball_stroke_color:
                    seekBallStrokeColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ATDragView_seek_text_color:
                    seekTextColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ATDragView_seek_text_size:
                    seekTextSize = typedArray.getDimensionPixelSize(attr, 0);
                    break;
            }
        }
        typedArray.recycle();
        init();
    }

拿到我們?cè)O(shè)置的屬性后,初始化我們需要的工具,比如畫筆,等

    private void init() {
        currentMovingType = BallType.LEFT;
        seekTextPaint = creatPaint(seekTextColor, seekTextSize, Paint.Style.FILL, 0);
        seekBgPaint = creatPaint(seekBgColor, 0, Paint.Style.FILL, 0);
        seekBallPaint = creatPaint(seekBallSolidColor, 0, Paint.Style.FILL, 0);
        seekPbPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0);
        seekBallEndPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0);
        seekBallStrokePaint = creatPaint(seekBallStrokeColor, 0, Paint.Style.FILL, 0);
        seekBallStrokePaint.setShadowLayer(5, 2, 2, seekBallStrokeColor);
    }

確定自定義view尺寸

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int measureHeight;
        if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) {
            measureHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_HEIGHT, getContext().getResources().getDisplayMetrics());
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(measureHeight, MeasureSpec.EXACTLY);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

繪制相關(guān)的內(nèi)容部分

這里我們分析效果圖發(fā)現(xiàn),需要繪制五部分,兩個(gè)圓,兩個(gè)進(jìn)度條一個(gè) 一堆文字,我們根據(jù)計(jì)算出來的view尺寸以及UI給的比例,即可繪制出來他們這個(gè)就是canvas的API使用

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawTexts(canvas);
        drawSeekBG(canvas);
        drawSeekPB(canvas);
        drawLeftCircle(canvas);
        drawRightCircle(canvas);
    }

具體的文字繪制,是根據(jù)外界傳入的數(shù)據(jù)來繪制的所以細(xì)節(jié)如下

  private void drawTexts(Canvas canvas) {
        if (null == data) return;
        int size = data.size();
        int unitWidth = getUnitWidth(size - 1);
        for (int i = 0; i < size; i++) {
            String tempDesc = data.get(i);
            float measureTextWidth = seekPbPaint.measureText(tempDesc);
            canvas.drawText(tempDesc, DEF_PADDING + unitWidth * i - measureTextWidth / 2, seekTextY, seekTextPaint);
        }
    }

這個(gè)View的核心部分不是繪制,而是計(jì)算,描述下我們具體的確定位置的思路

根據(jù)外界傳入的數(shù)據(jù)集合平均分view的寬度,求得平均一份的寬度大小
然后循環(huán)數(shù)據(jù)集合根據(jù)平均一份的寬度,確定沒個(gè)文字所在的坐標(biāo)值

然后我們看下計(jì)算的代碼;

// 計(jì)算單位寬度,view寬度-內(nèi)容的左右邊距以及圓球的半徑,自己體會(huì)下為什么
   private int getUnitWidth(int count) {
        return (viewWidth - 2 * DEF_PADDING - 2 * seekBallRadio) / count;
    }

這個(gè)方法可以說是最重要的一個(gè)了,

//根據(jù)當(dāng)前手指觸摸的x坐標(biāo)計(jì)算,手指離開屏幕以后,應(yīng)該停留到哪個(gè)位置,比如滑動(dòng)到400到500之間但是不到600,我們不能讓他停留在半路上,讓他自動(dòng)找回他停留的左邊,也就是GIF中的小小回彈效果
  private int getCurrentSeekX(int upX) {
        if (null == data) {
            return 0;
        }
        int unitWidth = getUnitWidth(data.size() - 1);
        return unitWidth * (upX / unitWidth);
    }

滑動(dòng)事件處理

核心的代碼全部完畢了,我們看下onTouch里面的處理

 public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            //記錄手指按下的坐標(biāo)
                downX = (int) event.getX();
                // 根據(jù)當(dāng)前坐標(biāo),確定要移動(dòng)哪個(gè)球球,因?yàn)槲覀冋f了,我們這個(gè)是有兩個(gè)球的,唯一的一個(gè)技巧點(diǎn)就是這個(gè)地方,根據(jù)手指按下的坐標(biāo)找到距離哪個(gè)球位置最近就移動(dòng)哪個(gè)球,這里注意下.
                currentMovingType = getMovingLeftOrRight(downX);
                if (BallType.LEFT == currentMovingType) {
                    leftSeekBallX = downX;
                } else if (BallType.RIGHT == currentMovingType) {
                    rightSeekBallX = downX;
                }
                seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
                break;
            case MotionEvent.ACTION_MOVE:
            //移動(dòng)的時(shí)候根據(jù)計(jì)算出來的位置以及方向改變兩個(gè)小球的位置以及舉行進(jìn)度條的RectF的范圍
                int moveX = (int) event.getX();
                // 特殊情況處理,兩個(gè)球重合應(yīng)該怎么辦,
                if (leftSeekBallX == rightSeekBallX) {
                    if (moveX - downX > 0) {
                        currentMovingType = BallType.RIGHT;
                        rightSeekBallX = moveX;
                    } else {
                        currentMovingType = BallType.LEFT;
                        leftSeekBallX = moveX;
                    }
                } else {
                    if (BallType.LEFT == currentMovingType) {
                        leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : moveX;
                    } else if (BallType.RIGHT == currentMovingType) {
                        rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : moveX;
                    }
                }
                seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
                break;
            case MotionEvent.ACTION_UP:
            // 手指離開的時(shí)候,確定返回給UI的數(shù)據(jù)集
                if (BallType.LEFT == currentMovingType) {
                    leftPosition = getDataPosition((int) event.getX());
                    leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio;
                } else if (BallType.RIGHT == currentMovingType) {
                    rightPosition = getDataPosition((int) event.getX());
                    rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio;
                }
                if (null != dragFinishedListener) {
                    dragFinishedListener.dragFinished(leftPosition, rightPosition);
                }
                break;
        }
// 邊界處理,確保左邊的球不會(huì)超過右邊的,右邊的不會(huì)超過左邊的
        if (BallType.LEFT == currentMovingType) {
            if (leftSeekBallX < seekBallRadio + DEF_PADDING) {
                leftSeekBallX = seekBallRadio + DEF_PADDING;
            }
            if (leftSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) {
                leftSeekBallX = viewWidth - seekBallRadio - DEF_PADDING;
            }
        } else if (BallType.RIGHT == currentMovingType) {
            if (rightSeekBallX < seekBallRadio + DEF_PADDING) {
                rightSeekBallX = seekBallRadio + DEF_PADDING;
            }
            if (rightSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) {
                rightSeekBallX = viewWidth - seekBallRadio - DEF_PADDING;
            }
        }
        seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT);
        invalidate();
        return true;
    }

大部分的核心的代碼就這么多,然后剩下的view寫完了就該把回調(diào)借口透出給UI 完活了…..

public void setData(List<String> data, OnDragFinishedListener dragFinishedListener) {
        this.dragFinishedListener = dragFinishedListener;
        this.data = data;
        leftPosition = 0;
        if (null != data && data.size() != 0) {
            rightPosition = data.size() - 1;
        }
    }

源代碼下載地址 https://github.com/GuoFeilong/ATDragViewDemo

以上就是Android開發(fā)自定義雙向SeekBar拖動(dòng)條控件的詳細(xì)內(nèi)容，更多關(guān)于Android自定義雙向SeekBar的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: