自定义垂直的SeekBar并用图片做滑块和背景

谷歌原生并没有提供垂直的SeekBar 所以需要对横向的SeekBar进行旋转和移动的操作

我们可以通过一些旋转、平移等操作让它竖起来

自定义View

public class VerticalSeekBar extends SeekBar {
    private ProgressChangedListener progressChangedListener;
    public VerticalSeekBar(Context context) {
        super(context);
    }
    public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public VerticalSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
    }
    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }
    protected void onDraw(Canvas c) {
        //将SeekBar转转90度
        c.rotate(-90);
        //将旋转后的视图移动回来
        c.translate(-getHeight(), 0);
        super.onDraw(c);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                int i = 0;
                //获取滑动的距离
                i = getMax() - (int) (getMax() * event.getY() / getHeight());
                //设置进度
                setProgress(i);
                if (progressChangedListener != null) {
                    progressChangedListener.onProgressChanged(getProgress());
                }
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return true;
    }
    public void setOnProgressChanged(ProgressChangedListener progressChangedListener) {
        this.progressChangedListener = progressChangedListener;
    }
    public interface ProgressChangedListener {
        void onProgressChanged(int progress);
    }
}

布局文件中使用

    <com.robosea.robofish.view.VerticalSeekBar
        android:id="@+id/mDeep"
        android:layout_width="wrap_content"
        android:layout_height="548px"
        android:max="100"
        android:maxWidth="36px"
        android:minWidth="36px"
        android:progress="55"
        android:progressDrawable="@drawable/progress_holo_light"
        android:thumb="@drawable/free_slider_control_btn" />

progress_holo_light.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">
        <shape>
            <corners android:radius="10dip" />
            <solid
                android:color="#8000145e"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
                <solid
                    android:color="#0078FF"/>
            </shape>
        </clip>
    </item>
</layer-list>

还有一点，如果你使用SeekBar设置进度条（progressDrawable）和滑块（thumb）换成图片的话，有可能会遇到progressDrawable被撑大，撑到图片那么宽/高，解决的办法就是设置maxHeight或者maxWidth（根据不同情况）属性来限制。