Android 自定义SeekBar (一)

一、前言

巩固自定义view基础用，本次尝试构建一个拖动条组件。代码参考于 https://github.com/woxingxiao/BubbleSeekBar ，精简其中高度可重用的部分，仅保留基本的拖拽功能，由于代码很巧妙，以后可以再深入探究学习。

本文在前面自定义view的基础上，增加了测量(onMeasure) 以及 触碰屏幕事件(onTouchEvent)。相信可以一步步踏实巩固，学会自定义view的知识。由于本拖动条仍是一个view，不需要涉及到布局(onLayout) 。以后学习自定义viewGroup时再另行探究。老规矩第一章先放效果图和全部代码。

二、效果图

三、代码

values/attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MySeekBar">

        <attr name="progress_max" format="float|reference"/> <!-- 进度条最大值 -->
        <attr name="progress_min" format="float|reference"/> <!-- 进度条最小值 -->
        <attr name="progress_default" format="float|reference"/> <!-- 进度条默认值 -->

        <attr name="track_left_height" format="dimension|reference"/> <!-- 进度条左边高度 -->
        <attr name="track_right_height" format="dimension|reference"/> <!-- 进度条右边高度 -->

        <attr name="track_left_color" format="color|reference"/> <!-- 进度条左边颜色 -->
        <attr name="track_right_color" format="color|reference"/> <!-- 进度条右边颜色 -->

        <attr name="thumb_color_default" format="color|reference"/> <!-- 拖动滑块默认颜色 -->
        <attr name="thumb_radius_default" format="dimension|reference"/> <!-- 拖动滑块半径 -->

        <attr name="thumb_color_on_dragging" format="color|reference"/> <!-- 拖动滑块拖动中颜色 -->
        <attr name="thumb_radius_on_dragging" format="dimension|reference"/> <!-- 拖动滑块拖动中半径 -->

    </declare-styleable>
</resources>

MySeekBar.java

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;

import com.kms.myseekbar.util.DimensionUtil;

import androidx.annotation.Nullable;

public class MySeekBar extends View {

    /********************** 参数 **********************/

    private float progress_max; // 进度条最大值
    private float progress_min; // 进度条最小值
    private float progress_default; // 进度条默认值

    private int track_left_height; // 进度条左边高度
    private int track_right_height; // 进度条右边高度

    private int track_left_color; // 进度条左边颜色
    private int track_right_color; // 进度条右边颜色

    private int thumb_color_default; // 拖动滑块默认颜色
    private int thumb_radius_default; // 拖动滑块半径

    private int thumb_color_on_dragging; // 拖动滑块拖动中颜色
    private int thumb_radius_on_dragging; // 拖动滑块拖动中半径

    /********************** 绘制相关 **********************/

    private Paint paint; // 画笔
    private int xLeft; // 实际的绘图区域按距离父布局左边 padding 算起
    private int xRight; // 到距离父布局右边的的 padding 结束
    private int yCenter; // 确定绘制进度条Y轴意义上的中点

    private int thumb_radius; // 滑动滑块半径

    /********************** 构造函数 **********************/

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

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

    public MySeekBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MySeekBar, defStyleAttr, 0);

        this.progress_max = typedArray.getFloat(R.styleable.MySeekBar_progress_max, 100);
        this.progress_min = typedArray.getFloat(R.styleable.MySeekBar_progress_min, 0);
        this.progress_default = typedArray.getFloat(R.styleable.MySeekBar_progress_default, progress_min);

        this.track_left_height = typedArray.getDimensionPixelSize(R.styleable.MySeekBar_track_left_height, DimensionUtil.dp2px(8));
        this.track_right_height = typedArray.getDimensionPixelSize(R.styleable.MySeekBar_track_right_height, track_left_height - DimensionUtil.dp2px(2));

        this.track_left_color = typedArray.getColor(R.styleable.MySeekBar_track_left_color, Color.BLUE);
        this.track_right_color = typedArray.getColor(R.styleable.MySeekBar_track_right_color, Color.LTGRAY);

        this.thumb_color_default = typedArray.getColor(R.styleable.MySeekBar_thumb_color_default, track_left_color);
        this.thumb_radius_default = typedArray.getDimensionPixelSize(R.styleable.MySeekBar_thumb_radius_default, track_left_height + DimensionUtil.dp2px(2));

        this.thumb_color_on_dragging = typedArray.getColor(R.styleable.MySeekBar_thumb_color_on_dragging, thumb_color_default);
        this.thumb_radius_on_dragging = typedArray.getDimensionPixelSize(R.styleable.MySeekBar_thumb_radius_on_dragging, thumb_radius_default + DimensionUtil.dp2px(2));

        typedArray.recycle();

        thumb_radius = thumb_radius_default;

        initPaint(); // 初始化画笔
    }

    /********************** Getter and Setter **********************/

    public float getProgressMax() {
        return progress_max;
    }

    public MySeekBar setProgressMax(float progressMax) {
        this.progress_max = progressMax;
        return this;
    }

    public float getProgressMin() {
        return progress_min;
    }

    public MySeekBar setProgressMin(float progressMin) {
        this.progress_min = progressMin;
        return this;
    }

    public float getProgressDefault() {
        return progress_default;
    }

    public MySeekBar setProgressDefault(float progressDefault) {
        this.progress_default = progressDefault;
        return this;
    }

    public int getTrackLeftHeight() {
        return track_left_height;
    }

    public MySeekBar setTrackLeftHeight(int trackLeftHeight) {
        this.track_left_height = trackLeftHeight;
        return this;
    }

    public int getTrackRightHeight() {
        return track_right_height;
    }

    public MySeekBar setTrackRightHeight(int trackRightHeight) {
        this.track_right_height = trackRightHeight;
        return this;
    }

    public int getTrackLeftColor() {
        return track_left_color;
    }

    public MySeekBar setTrackLeftColor(int trackLeftColor) {
        this.track_left_color = trackLeftColor;
        return this;
    }

    public int getTrackRightColor() {
        return track_right_color;
    }

    public MySeekBar setTrackRightColor(int trackRightColor) {
        this.track_right_color = trackRightColor;
        return this;
    }

    public int getThumbColorDefault() {
        return thumb_color_default;
    }

    public MySeekBar setThumbColorDefault(int thumbColorDefault) {
        this.thumb_color_default = thumbColorDefault;
        return this;
    }

    public int getThumbRadiusDefault() {
        return thumb_radius_default;
    }

    public MySeekBar setThumbRadiusDefault(int thumbRadiusDefault) {
        this.thumb_radius_default = thumbRadiusDefault;
        return this;
    }

    public int getThumbColorOnDragging() {
        return thumb_color_on_dragging;
    }

    public MySeekBar setThumbColorOnDragging(int thumbColorOnDragging) {
        this.thumb_color_on_dragging = thumbColorOnDragging;
        return this;
    }

    public int getThumbRadiusOnDragging() {
        return thumb_radius_on_dragging;
    }

    public MySeekBar setThumbRadiusOnDragging(int thumbRadiusOnDragging) {
        this.thumb_radius_on_dragging = thumbRadiusOnDragging;
        return this;
    }

    /********************** 绘制相关 **********************/

    private void initPaint(){
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 仅当 android_layout_width = wrap_content 或未指定时生效，若测出来的size大于你所指定的size (譬如这里是180dp)，则使用所指定的size
        int width = resolveSize(DimensionUtil.dp2px(180), widthMeasureSpec);
        int height = thumb_radius_on_dragging * 2; // 控件高度按拖动时的滑块直径
        setMeasuredDimension(width, height); // 强制指定控件大小

        xLeft = getPaddingLeft() + thumb_radius_on_dragging; // 实际的绘图区域按距离父布局左边 padding 算起
        xRight = getMeasuredWidth() - getPaddingRight() - thumb_radius_on_dragging; // 到距离父布局右边的的 padding 结束
        yCenter = getPaddingTop() + thumb_radius_on_dragging; // 确定绘制进度条Y轴意义上的中点
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int currentProgress = (int) (progress_default / progress_max * (xRight-xLeft));
        drawRightTrack(canvas, currentProgress);
        drawLeftTrack(canvas, currentProgress);
        drawThumb(canvas, currentProgress);
    }

    /**
     * 绘制进度条左边
     */
    private void drawLeftTrack(Canvas canvas, int currentProgress){
        paint.setColor(track_left_color);
        paint.setStrokeWidth(track_left_height);
        canvas.drawLine(xLeft, yCenter, xLeft + currentProgress, yCenter, paint);
    }

    /**
     * 绘制拖动滑块
     */
    private void drawThumb(Canvas canvas, int currentProgress){
        paint.setColor(thumb_color_default);
        canvas.drawCircle(xLeft + currentProgress, yCenter, thumb_radius, paint);
    }

    /**
     * 绘制进度条右边
     */
    private void drawRightTrack(Canvas canvas, int currentProgress){
        paint.setColor(track_right_color);
        paint.setStrokeWidth(track_right_height);
        canvas.drawLine(xLeft + currentProgress, yCenter, xRight, yCenter, paint);
    }

    public void startAnim(){
        final ValueAnimator animator = ValueAnimator.ofInt(0,100);
        animator.setDuration(100*500);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                progress_default = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                performClick(); // 若 SeekBar设置了 OnClickListener，可以在此处唤醒监听器
                getParent().requestDisallowInterceptTouchEvent(true); // 不允许父组件拦截触摸事件
                thumb_radius = thumb_radius_on_dragging;
                progress_default = calculateDraggingX(event.getX());
                break;
            default:
                thumb_radius = thumb_radius_default;
        }
        invalidate();
        return true;
    }

    /**
     * 计算拖动值
     *
     * @param x 屏幕上的event.getX()
     * @return 经转换后对应拖动条的进度值
     */
    private float calculateDraggingX(float x){
        if(x < xLeft){
            return progress_min;
        }
        if(x > xRight){
            return progress_max;
        }
        return x / getMeasuredWidth() * progress_max;
    }
}

util/DimensionUtil.java

import android.content.res.Resources;
import android.util.TypedValue;

public class DimensionUtil {

    public static int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
                Resources.getSystem().getDisplayMetrics());
    }

    public static int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
                Resources.getSystem().getDisplayMetrics());
    }

}

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="10dp">

    <com.kms.myseekbar.MySeekBar
        android:id="@+id/my_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    MySeekBar mySeekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mySeekBar = findViewById(R.id.my_seek_bar);
        mySeekBar.setThumbColorDefault(Color.BLUE).setProgressDefault(50);
        // mySeekBar.startAnim();
    }
}

完！下一节将讲解下基本思路