随记12——我的简单自定义View值之简单色彩斑斓的进度条和简单的SeekBar

女神镇楼

上一篇文章是关于圆形进度条和长形进度条的，链接在此：我的简单的自定义View之进度条

这篇是关于色彩斑斓的进度条的和简单的SeekBar的。效果如下：

色彩斑斓的进度条

各种自定义View

这个ColorLoadingView是之前看到SwipeRefreshLayout的刷新动画（某一版），感觉很不错，就想实现一下，经过测试，可以放在项目中使用。

本文主要介绍ColorLoadingView，自定义的SeekBar很简单，跟普通的用法一样就不做介绍了。

1.有几个自定义属性的自定义属性：

    <!--颜色loading-->
    <declare-styleable name="colorLoadingView">

        <attr name="firstColor" format="color"/>
        <attr name="secondColor" format="color"/>
        <attr name="thirdColor" format="color"/>

    </declare-styleable>

顾名思义，上面三个属性就是进度的三种颜色。

2.用法：

    <com.bjl.loadingview.widget.ColorLoadingView
        android:id="@+id/colorLoadingView"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekBarView" />

3.View代码

/**
 * Created by Administrator on 2017/12/21.
 * 色彩斑斓的loading
 */

public class ColorLoadingView extends View {

    Paint mPaint;
    Paint mBgPaint;
    List<Integer> listColors;
    int position;
    int mProgress = 0;
    boolean isStopDraw = false;//是否停止绘制
    Thread mThread;


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

    public ColorLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);

        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setDither(true);

        listColors = new ArrayList<>();
        if (attrs != null) {
            TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.colorLoadingView);
            int firstColor = array.getColor(R.styleable.colorLoadingView_firstColor, Color.RED);
            int secondColor = array.getColor(R.styleable.colorLoadingView_firstColor, Color.YELLOW);
            int thirdColor = array.getColor(R.styleable.colorLoadingView_firstColor, Color.BLUE);
            listColors.add(firstColor);
            listColors.add(secondColor);
            listColors.add(thirdColor);
            array.recycle();
        }

        mPaint.setColor(listColors.get(position));
        mBgPaint.setColor(listColors.get(listColors.size() - 1));

        mThread = new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i = 0; i <= 50; i++) {
                    mProgress = i;
                    postInvalidate();
                    try {
                        Thread.sleep(20);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    if (i == 50) {
                        i = 0;
                        position++;
                        position = position % 3;
                        restPaint();
                    }
                    if (isStopDraw) {
                        break;
                    }
                }
            }
        });
    }

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

        setMeasuredDimension(getDefaultSize(MeasureSpec.getSize(widthMeasureSpec), widthMeasureSpec), getDefaultSize(CommonUtil.dip2px(getContext(), 2f), heightMeasureSpec));
        mPaint.setStrokeWidth(getMeasuredHeight());
        mBgPaint.setStrokeWidth(getMeasuredHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制背景
        canvas.drawLine(0, getHeight() / 2, getWidth(), getHeight() / 2, mBgPaint);
        //绘制变化的进度条
        canvas.drawLine(getWidth() / 2 - getWidth() * mProgress / 100, getHeight() / 2, getWidth() / 2 + getWidth() * mProgress / 100, getHeight() / 2, mPaint);

    }

    private void restPaint() {
        mPaint.setColor(listColors.get(position));
        mBgPaint.setColor(listColors.get((position + 2) % 3));
    }

    private void beginColorDraw() {
        stopColorDraw();
        isStopDraw = false;
        if (mThread !=null) {
            mThread.start();
        }
    }

    private void stopColorDraw() {
        if (mThread !=null) {
            mThread.interrupt();
        }
        isStopDraw = true;
    }

    @Override
    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
        super.onVisibilityChanged(changedView, visibility);
        if (visibility == VISIBLE) {
            beginColorDraw();
        } else {
            stopColorDraw();
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopColorDraw();
    }
}

以上就是ColorLoadingView的用法，我写了一个demo，模仿在项目中的使用。包含下拉刷新，自动加载更多等。

SeekBar的自定义属性如下：

    <!--seekbar-->
    <declare-styleable name="seekBarView">

        <attr name="topDrawable" format="reference"/>
        <attr name="isCanTouchMove" format="boolean"/>

    </declare-styleable>

topDrawable是SeekBar上的滑动图片（默认无），isCanTouchMove进度是否可以随手势滑动（默认可以）。具体代码见demo。

这是Demo下载链接