垂直摆放的进度条 VerticalSeekBar

1e97da0737325a6483ccfebbe0ed9c36da93a5137961c-1j0DuG_fw658.png

前言

近期在项目开发中，需要对原生的 SeekBar 进行自定义，因为原生 SeekBar 只能水平放置并且样子太丑了，哈哈哈。需求是构建一个垂直摆放的 SeekBar，所以借鉴了 CSDN 中某位大牛的代码，但当时忙于完成工作，忘记是哪位前辈写的了。

话不多说，直接放图

Screenshot_2018-05-29-18-25-32-307_com.feng.launc.png

对，没错；就是图中调节亮度和音量的进度条，下面 po 出的代码只是垂直摆放控件，图片中具体样式需要自定义

VerticalSeekBar 代码

public class VerticalSeekBar extends SeekBar {

        private Drawable mThumb;
        private SeekBar.OnSeekBarChangeListener mOnSeekBarChangeListener;

        public VerticalSeekBar(Context context) {
            super(context);
        }

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

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

        public void setOnSeekBarChangeListener(SeekBar.OnSeekBarChangeListener l) {
            mOnSeekBarChangeListener = l;
        }

        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(h, w, oldh, oldw);
        }

        @Override
        protected  void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(heightMeasureSpec, widthMeasureSpec);

            setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
        }

        protected void onDraw(Canvas c) {
            c.rotate(-90);
            c.translate(-getHeight(), 0);

            super.onDraw(c);
        }

        void onProgressRefresh(float scale, boolean fromUser) {
            Drawable thumb = mThumb;
            if (thumb != null) {
                setThumbPos(getHeight(), thumb, scale, Integer.MIN_VALUE);
                invalidate();
            }
            if (mOnSeekBarChangeListener != null) {
                mOnSeekBarChangeListener.onProgressChanged(this, getProgress(), fromUser);
            }
        }

        private void setThumbPos(int w, Drawable thumb, float scale, int gap) {
            int available = w - getPaddingLeft() - getPaddingRight();

            int thumbWidth = thumb.getIntrinsicWidth();
            int thumbHeight = thumb.getIntrinsicHeight();

            int thumbPos = (int) (scale * available + 0.5f);

            // int topBound = getWidth() / 2 - thumbHeight / 2 - getPaddingTop();
            // int bottomBound = getWidth() / 2 + thumbHeight / 2 - getPaddingTop();
            int topBound, bottomBound;
            if (gap == Integer.MIN_VALUE) {
                Rect oldBounds = thumb.getBounds();
                topBound = oldBounds.top;
                bottomBound = oldBounds.bottom;
            } else {
                topBound = gap;
                bottomBound = gap + thumbHeight;
            }
            thumb.setBounds(thumbPos, topBound, thumbPos + thumbWidth, bottomBound);
        }

        public void setThumb(Drawable thumb) {
            mThumb = thumb;
            super.setThumb(thumb);
        }

        void onStartTrackingTouch() {
            if (mOnSeekBarChangeListener != null) {
                mOnSeekBarChangeListener.onStartTrackingTouch(this);
            }
        }

        void onStopTrackingTouch() {
            if (mOnSeekBarChangeListener != null) {
                mOnSeekBarChangeListener.onStopTrackingTouch(this);
            }
        }

        private void attemptClaimDrag() {
            if (getParent() != null) {
                getParent().requestDisallowInterceptTouchEvent(true);
            }
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (!isEnabled()) {
                return false;
            }

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    setPressed(true);
                    onStartTrackingTouch();
                    break;

                case MotionEvent.ACTION_MOVE:
                    attemptClaimDrag();
                    setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                    break;
                case MotionEvent.ACTION_UP:
                    onStopTrackingTouch();
                    setPressed(false);
                    break;

                case MotionEvent.ACTION_CANCEL:
                    onStopTrackingTouch();
                    setPressed(false);
                    break;
            }
            return true;
        }
}

关键代码

• 重写 onDarw ，将控件旋转 90 度。

 

  protected void onDraw(Canvas c) {
            c.rotate(-90);
            c.translate(-getHeight(), 0);

            super.onDraw(c);
        }