Android 自定义控件仿MX 播放器的SeekBar效果

最新推荐文章于 2022-06-09 10:40:41 发布

原创

最新推荐文章于 2022-06-09 10:40:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #自定义 #Seekbar #拖动条

本文介绍了如何在Android中自定义SeekBar，以实现类似MX播放器的外观和功能。通过分析MX播放器的SeekBar效果，作者在现有SeekBar基础上进行修改，增加了边框、颜色自定义，并实现了水平和垂直方向的摆放。文章详细讲解了自定义属性、计算尺寸、绘制边框和进度条的过程，以及解决了垂直SeekBar的点击和滑动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、分析

最近下载了个MX 播放器来看视频，发现他的SeekBar做的挺有趣的，先看看MX 播放器的SeekBar效果：

外面多了个框框，没有了进度的那个小圆点，还可以以水平方向的摆放和竖直方向的摆放，也可以改颜色。这种效果可以通过自己实现onDraw()方法然后画个方框里面再画一条线。

根据以上特征我们可以在SeekBar基础上进行修改，毕竟SeekBar已经有了很多属性以及实现了拖动效果，就没必要重头造轮子了。

看看实现的效果吧，所谓No picture you say shen ma。

二、实现

（一）自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--外框线的大小-->
    <attr name="rect_line_width" format="dimension" />
    <!--外框线的颜色-->
    <attr name="rect_color" format="color" />
    <!--进度条与外框的间距-->
    <attr name="padding_rect" format="dimension" />
    <!--进度条的粗细-->
    <attr name="progress_stroke_width" format="dimension" />
    <!--进度条的颜色-->
    <attr name="progress_color" format="color" />
    <!--缓冲进度条的颜色-->
    <attr name="secondary_progress_color" format="color" />
    <!--进度条的方向-->
    <attr name="orientation" format="enum">
        <enum name="horizontal" value="0" />
        <enum name="vartical" value="1"/>
    </attr>
    <declare-styleable name="CustomSeekBar">
        <attr name="rect_line_width" />
        <attr name="rect_color" />
        <attr name="padding_rect" />
        <attr name="progress_stroke_width" />
        <attr name="progress_color" />
        <attr name="secondary_progress_color" />
        <attr name="orientation" />
    </declare-styleable>
</resources>

（二）解析属性

private final static int DEFAULT_RECT_LINE_WIDTH=0;
    private final static int DEFAULT_RECT_COLOR=ColorStateList.valueOf(0x66000000).getDefaultColor();
    private final static int DEFAULT_PADDING_RECT=2;
    private final static int DEFAULT_PROGRESS_HEIGHT=30;
    private final static int DEFAULT_PROGRESS_COLOR=ColorStateList.valueOf(0xFF58ccff).getDefaultColor();
    private final static int DEFAULT_SECONDARY_PROGRESS_COLOR=ColorStateList.valueOf(0x22000000).getDefaultColor();

    /**
     * Seek bar的方向
     */
    public enum Orientation {
        HORIZONTAL, VARTICAL
    }
    private Context mContext;
    /**
     * 外边框线的大小
     */
    private int mRectLineWidth=DEFAULT_RECT_LINE_WIDTH;
    /**
     * 外边框线的颜色
     */
    private int mRectColor=DEFAULT_RECT_COLOR;
    /**
     * 里面的进度条与外边框的距离
     */
    private int mPaddingRect=dp2px(DEFAULT_PADDING_RECT);
    /**
     * 进度条的粗细
     */
    private int mProgressStrokeWidth=dp2px(DEFAULT_PROGRESS_HEIGHT);
    /**
     * 进度条的颜色
     */
    private int mProgressColor=DEFAULT_PROGRESS_COLOR;
    /**
     * 缓冲进度条的颜色
     */
    private int mSecondaryProgressColor=DEFAULT_SECONDARY_PROGRESS_COLOR;
    /**
     * Seek bar的方向 默认为水平方向
     */
    private Orientation mOrientation=Orientation.HORIZONTAL;
    /**
     * Seek bar真实的宽度
     */
    private int mRealWidth;
    /**
     * Seek bar真实的高度
     */
    private int mRealHeight;
    /**
     * 画笔
     */
    private Paint mPaint;


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

    public CustomSeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext=context;
        parseAttr(attrs, defStyleAttr);
        mPaint=new Paint();
        mPaint.setAntiAlias(true);
    }

    /**
     * 解析属性
     *
     * @param attrs        AttributeSet
     * @param defStyleAttr defStyleAttr
     */
    private void parseAttr(AttributeSet attrs, int defStyleAttr) {
        TypedArray _TypedArray=mContext.obtainStyledAttributes(attrs, R.styleable.CustomSeekBar, defStyleAttr, 0);
        int _Count=_TypedArray.getIndexCount();
        for (int i=0; i < _Count; i++) {
            int _Index=_TypedArray.getIndex(i);
            switch (_Index) {
                case R.styleable.CustomSeekBar_rect_line_width:
                    mRectLineWidth=_TypedArray.getDimensionPixelSize(_Index, DEFAULT_RECT_LINE_WIDTH);
                    break;
                case R.styleable.CustomSeekBar_rect_color:
                    mRectColor=_TypedArray.getColor(_Index, DEFAULT_RECT_COLOR);
                    break;
                case R.styleable.CustomSeekBar_padding_rect:
                    mPaddingRect=_TypedArray.getDimensionPixelSize(_Index, dp2px(DEFAULT_PADDING_RECT));
                    break;
                case R.styleable.CustomSeekBar_progress_stroke_width:
                    mProgressStrokeWidth=_TypedArray.getDimensionPixelSize(_Index, dp2px(DEFAULT_PROGRESS_HEIGHT));
                    break;
                case R.styleable.CustomSeekBar_progress_color:
                    mProgressColor=_TypedArray.getColor(_Index, DEFAULT_PROGRESS_COLOR);
                    break;
                case R.styleable.CustomSeekBar_secondary_progress_color:
                    mSecondaryProgressColor=_TypedArray.getColor(_Index, DEFAULT_SECONDARY_PROGRESS_COLOR);
                    break;
                case R.styleable.CustomSeekBar_orientation:
                    int _Orientation