安卓 垂直SeekBar

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 androidx.appcompat.widget.AppCompatSeekBar;


/**
 * @author zhangwei on 2019/12/11.
 */
public class VerticalSeekBar extends AppCompatSeekBar {

    private Drawable mThumb;
    private 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);
    }

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

    @Override
    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());
    }

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

        super.onDraw(c);
    }

    @Override
    public synchronized void setProgress(int progress) {
        super.setProgress(progress);
        onProgressRefresh(getProgress() / (float) getMax(), true);
    }

    @Override
    public void setProgress(int progress, boolean animate) {
        super.setProgress(progress, animate);
        onProgressRefresh(getProgress() / (float) getMax(), true);
    }

    public 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);
    }

    @Override
    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();
                if (!getThumb().getBounds().contains(getHeight() - (int) event.getY(), (int) event.getX())) {
                    setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                }
                break;

            case MotionEvent.ACTION_MOVE:
                attemptClaimDrag();
                if (!getThumb().getBounds().contains(getHeight() - (int) event.getY(), (int) event.getX())) {
                    setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                onStopTrackingTouch();
                setPressed(false);
                break;
            default:
        }
        return true;
    }
}

 

自定义progress.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:gravity="center_vertical|fill_horizontal">
        <layer-list>
            <item>
                <shape>
                    <corners android:radius="5dp" />
                    <gradient
                        android:centerColor="#3d4C9DE6"
                        android:endColor="#1f000000"
                        android:startColor="#1f000000" />
                </shape>
            </item>
            <item
                android:bottom="1dp"
                android:left="1dp">
                <shape>
                    <corners android:radius="5dp" />
                    <size android:height="10dp" />
                    <gradient
                        android:centerColor="#ffC6D9E6"
                        android:endColor="#ffCCDDE7"
                        android:startColor="#FFE0F3FF" />
                </shape>
            </item>
        </layer-list>

    </item>

    <item
        android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <clip>
            <layer-list>
                <item>
                    <shape>
                        <corners android:radius="5dp" />
                        <gradient
                            android:endColor="#1f000000"
                            android:startColor="#1f000000" />
                    </shape>
                </item>
                <item
                    android:bottom="1dp"
                    android:left="1dp">
                    <shape>
                        <size android:height="10dp" />
                        <corners android:radius="5dp" />
                        <gradient
                            android:centerColor="#FF589EFF"
                            android:endColor="#FF589EFF"
                            android:startColor="#FF589EFF" />
                    </shape>
                </item>
            </layer-list>
        </clip>
    </item>

</layer-list>

 

布局中使用

    <com.boe.mhealth.myview.seekbar.VerticalSeekBar
        android:id="@+id/massager_home_power_seekBar"
        android:layout_width="wrap_content"
        android:layout_height="281dp"
        android:duplicateParentState="true"
        android:max="15"
        android:paddingStart="10dp"
        android:paddingEnd="12dp"
        android:progressDrawable="@drawable/progress_bg"
        android:splitTrack="false"
        android:thumb="@mipmap/icon_thumb"
        app:layout_constraintEnd_toEndOf="@id/massager_home_power_value"
        app:layout_constraintStart_toStartOf="@id/massager_home_power_value"
        app:layout_constraintTop_toBottomOf="@id/massager_home_power_value" />