Android开发之如何自定义垂直方向的SeekBar

SeekBar进度条在项目开发过程中使用的太频繁了，比如媒体播放器当前播放的时间进度等。那么今天将对seekbar的使用做一个总结，后面写工作要用到直接过来copy就好。这边seekbar的使用分为横向和纵向两种显示方式。

先上效果图，如下：

左边第一条是本人工作项目中EQ应用提取出来的，实现方式为自定义view继承自imageview来绘制完成，过程也是相当得简单，无非就是draw几张bitmap然后处理一些数据，使用一些动画和定义一个接口回调类，写多了view的绘制就觉得其实所有的自定义view都是类似差不多这种模式的了。

那么关键代码，如下：

这边seekbarView的相关draw的操作都被封装到了EqScroller.java这个类中，充当mvc模式中control角色。

绘制部分代码如下：

public void drawEqScroller(Canvas canvas, int mScrollUID) {

        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setTextAlign(Paint.Align.CENTER); // 文本对齐 居中
        mPaint.setTextSize(mTextSize);

        // 不设置抗锯齿
        mPaint.setAntiAlias(false);

        // 绘制进度条 Bar bmp
        canvas.drawBitmap(mScrollBar, mDrawRect, mDrawRect, mPaint);

        String strLevel = null;

        if (mLevelValue != null) {
            // 四舍五入
            strLevel = mLevelValue[Math.round(mNumCurF - mNumMin)];
        } else {
            int value = Math.round(mNumCurF);
            if (mScrollUID != 11) {
                if (value > 0) {
                    strLevel = value + "db";
                } else {
                    strLevel = "" + value + "db";
                }
            } else {
                strLevel = "" + value;
            }
        }

        // 绘制拖拽指针 Thumb bmp
        canvas.drawBitmap(mScrollThumb, mThumbMatrix, mPaint);

        mPaint.setAntiAlias(true); // 设置抗锯齿
        mPaint.setColor(mEqSeekBar.getResources().getColor(R.color.white));

        // 绘制当前进度标识文字（-14 ~ +14）
        canvas.drawText(strLevel, mSclBarWidth / 2.0F - 1.0F, mSclBarHeight - mTextSize, mPaint);
    }

在draw之前准备一下数据，代码如下：

public void buildDrawParameter() {
        // 绝对值 这里是浮点数判断是否相等
        float interpolator = 2.8F;
        float diffNumF = Math.abs(mNumTagF - mNumCurF);

        if (diffNumF > 0.001D) {

            interpolator = (float) (Math.random()) * 1.5F + 1.5F;
            interpolator = interpolator < 2.8F ? 2.8F : interpolator;

            mNumCurF += (mNumTagF - mNumCurF) / interpolator;

            if (!mMotionFlag) {
                mMotionFlag = true;
                mEqSeekBar.scrollMotionBegin();
            }
        }

        int nIndex = Math.round(mNumCurF);
        mEqSeekBar.setScrollMotion(nIndex, mSettingFlag);

        mScrollPointY = ((mNumCurF - mNumMin) / (mNumMax - mNumMin) * (mEndOffset - mBeginOffset) + mBeginOffset);

        // ScrollBar Bitmap 更新区域
        mDrawRect.left = 0;
        mDrawRect.right = (int) mSclBarWidth;
        mDrawRect.bottom = (int) mSclBarHeight;
        mDrawRect.top = (int) mScrollPointY;

        mThumbMatrix.reset(); // 恢复图片位置
        mThumbMatrix.postTranslate((mSclBarWidth - mSclThumbWidth) / 2.0F, -mSclThumbHeight / 6 + mScrollPointY); // 垂直移动

        if (mMotionFlag && diffNumF < 0.001D) {
            mNumCurF = mNumTagF;
            mMotionFlag = false;
            mEqSeekBar.scrollMotionFinished();
        }
    }

最后再不使用时进行一个recycle操作。代码如下：

public void recycle() {
        if ((mScrollBar != null) && (!mScrollBar.isRecycled())) {
            mScrollBar.recycle();
            mScrollBar = null;
        }

        if ((mScrollThumb != null) && (!mScrollThumb.isRecycled())) {
            mScrollThumb.recycle();
            mScrollThumb = null;
        }
    }

XML文件部分代码，如下：

<LinearLayout
        style="@style/scroll_layout"
        android:orientation="vertical" >

        <TextView
            style="@style/scroll_title"
            android:text="@string/BAND_32HZ"
            android:textColor="@color/white" />

        <com.asir.seekbar.view.EqSeekBarView
            android:id="@+id/id_scroll_31_hz"
            style="@style/scroll_band_attrs"
            asir:scroll_uid="1" />
    </LinearLayout>

自定义属性，使用代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:asir="http://schemas.android.com/apk/res/com.asir.seekbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:visibility="visible" >

attrs.xml属性资源文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="center_x" format="integer" />
    <attr name="center_y" format="integer" />
    <attr name="circle_r" format="integer" />
    <attr name="scroll_bar" format="integer" />
    <attr name="scroll_item" format="integer" />
    <attr name="scroll_begin" format="float" />
    <attr name="scroll_end" format="float" />
    <attr name="scroll_uid" format="integer" />
    <attr name="copy_scroll_bar" format="integer" />
    <attr name="copy_scroll_item" format="integer" />
    <attr name="copy_scroll_begin_angle" format="float" />
    <attr name="copy_scroll_end_angle" format="float" />

</resources>

中间那条垂直的seekbar是通过继承自Android原生的SeekBar来实现的，这种方式实现的在使用上和横向seekbar类似

关键代码如下，AsirSeekBar.java：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.SeekBar;

public class AsirSeekBar extends SeekBar {

    private Drawable mThumb;


    private OnSeekBarChangeListener mOnSeekBarChangeListener;

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

    public AsirSeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.seekBarStyle);
    }

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

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

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

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

    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();
        available -= thumbWidth;
        // The extra space for the thumb to move on the track
        available += getThumbOffset() * 2;
        int thumbPos = (int) (scale * available);
        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);
    }

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

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }

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

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                setPressed(true);
                onStartTrackingTouch();
                trackTouchEvent(event);
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;

            case MotionEvent.ACTION_MOVE:
                trackTouchEvent(event);
                attemptClaimDrag();
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;

            case MotionEvent.ACTION_UP:
                trackTouchEvent(event);
                onStopTrackingTouch();
                setPressed(false);
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;

            case MotionEvent.ACTION_CANCEL:
                onStopTrackingTouch();
                setPressed(false);
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
        }
        return true;
    }

    private void trackTouchEvent(MotionEvent event) {
        final int Height = getHeight();
        final int available = Height - getPaddingBottom() - getPaddingTop();
        int Y = (int) event.getY();
        float scale;
        float progress = 0;
        if (Y > Height - getPaddingBottom()) {
            scale = 0.0f;
        } else if (Y < getPaddingTop()) {
            scale = 1.0f;
        } else {
            scale = (float) (Height - getPaddingBottom() - Y) / (float) available;
        }

        final int max = getMax();
        progress = scale * max;

        setProgress((int) progress);
    }

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

xml文件布局代码，使用部分如下：

 <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="200dp" >

        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dip"
            android:textColor="#ffffff"
            android:textSize="25dp" />

        <com.asir.seekbar.view.AsirSeekBar
            android:id="@+id/seekbar"
            android:layout_width="28dp"
            android:layout_height="350dp"
            android:layout_below="@id/tv_progress"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:gravity="center"
            android:progressDrawable="@drawable/progress"
            android:thumb="@drawable/thumb"
            android:thumbOffset="0dip" />
    </RelativeLayout>

资源XML文件代码如下，progress.xml：

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

    <item>
        <shape>
            <corners android:radius="5dip" />

            <gradient
                android:angle="90"
                android:centerColor="#F6F6F6"
                android:endColor="#C0C0C0"
                android:startColor="@android:color/white"
                android:type="linear" />
        </shape>
    </item>
    <item>
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="90"
                    android:centerColor="#F37533"
                    android:endColor="#F9B693"
                    android:startColor="#F37837"
                    android:type="linear" />
            </shape>
        </clip>
    </item>

</layer-list>

thumb.xml

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

    <item android:drawable="@drawable/volumecontrol" android:state_focused="false" android:state_pressed="false"/>
    <item android:drawable="@drawable/volumecontrolover" android:state_focused="false" android:state_pressed="true"/>

</selector>

最后一种横向的精度条seekbar也是最常使用的：
xml文件布局代码，使用部分如下：

 <SeekBar
        android:id="@+id/seekbar_play"
        android:layout_width="500dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="100dp"
        android:maxHeight="6.0px"
        android:minHeight="6.0px"
        android:progressDrawable="@drawable/seekbar_style"
        android:thumb="@drawable/spd_cardescription_play_point"
        android:thumbOffset="12.0px" />

其中 android:thumb=”@drawable/spd_cardescription_play_point”引用的是一张png图片

资源XML文件代码如下，seekbar_style.xml：

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/spd_cardescription_progress_bg"/>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/spd_cardescription_play_bar_light"
            android:scaleGravity="left"
            android:scaleWidth="100%" />
    </item>

</layer-list>

源码点击下载