自定义控件-音波进度条实现心得

作者: 草蜢的逆袭 | 来源:发表于2019-06-24 12:29 被阅读2次

效果如下:

[图片上传失败...(image-e0cba5-1561350567235)]

第一种声波进度条，采用自定义view的方式，使用canvas画椭圆的方式实现效果代码如下:

public class VolumeProgressBar extends View {

    private final Context mCtx;
    private Paint mPaint;

    /**
     * 宽高
     */
    private int width, height = 0;

    /**
     * 最大值
     */
    private int max = 100;

    /**
     * 进度
     */
    private int progress = 0;
    private int mSelectColor = 0xffe13152;
    private int mBgColor = 0x80ffffff;

    private int mRectWidth, mRectHeight;
    private int space, mPaddingX;
    private int mTotalGroup;

    private List<Integer> start = new ArrayList<>();
    private List<Integer> end = new ArrayList<>();

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

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

    public VolumeProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mCtx = context;
        init();
    }

    private void init() {
        mRectWidth = Utils.dp2px(mCtx, 14);
        mRectHeight = Utils.dp2px(mCtx, 20);
        space = Utils.dp2px(mCtx, 5);
        mPaddingX = Utils.dp2px(mCtx, 5);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
    }

    int measureCount = 0;

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

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            // 精确的
            width = widthSize;
        } else {
            // 屏幕的宽度-左右各15dp = 整个控件的宽度
            width = Utils.getScreenWH(mCtx)[0] - Utils.dp2px(mCtx, 30);
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            // 精确的
            height = heightSize;
        } else {
            // 默认高度为30dp
            height = Utils.dp2px(mCtx, 30);
        }

        setMeasuredDimension(width, height);

        measureCount++;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();

//        drawBg(canvas);

        drawPb(canvas);

        canvas.restore();
    }

    private void drawPb(Canvas _canvas) {
        for (int i = 1; i <= max; i++) {
            drawRect(i, _canvas);
        }
    }

    private void drawRect(int _i, Canvas _canvas) {
        int color = _i <= progress ? mSelectColor : mBgColor;
        mPaint.setColor(color);

        int startX = getTargetLeft(_i);

        // 方案A 要结合分组使用
//        if (start.contains(_i) || end.contains(_i)) {
//            mRectHeight = (int) Math.ceil(Utils.dp2px(mCtx, 15));
//        } else {
//            mRectHeight = Utils.dp2px(mCtx, 20);
//        }

        /**
         *  原理:
         *     | | | | | |
         *     1 2 3 4 5 6
         *
         *     1%3 = 1
         *     2%3 = 2
         *     3%3 = 0
         *
         *     4%3 = 1
         *     5%3 = 2
         *     6%3 = 0
         *
         *     i % 3 = 2时，中间图形高度会多些，其它会少些
         */
        /*if (_i % 3 == 0 || _i % 3 == 1) {
            mRectHeight = (int) Math.ceil(Utils.dp2px(mCtx, 15));
        } else {
            mRectHeight = Utils.dp2px(mCtx, 20);
        }*/

        if (_i % 3 == 2) {
            mRectHeight = Utils.dp2px(mCtx, 20);
        } else {
            mRectHeight = (int) Math.ceil(Utils.dp2px(mCtx, 15));
        }

        // 矩形
//        _canvas.drawRect(getTargetLeft(_i), height / 2 - mRectHeight / 2, startX + mRectWidth, height / 2 + mRectHeight / 2, mPaint);

        // 圆角矩形
//        _canvas.drawRoundRect(getTargetLeft(_i), height / 2 - mRectHeight / 2, startX + mRectWidth,height / 2 + mRectHeight / 2, Utils.dp2px(mCtx, 2), Utils.dp2px(mCtx, 2), mPaint);
        RectF rectF = new RectF();
        rectF.left = getTargetLeft(_i);
        int top = height / 2 - mRectHeight / 2;
        rectF.top = top;
        int right = startX + mRectWidth;
        rectF.right = right;
        int bottom = height / 2 + mRectHeight / 2;
        rectF.bottom = bottom;
        _canvas.drawRoundRect(rectF, Utils.dp2px(mCtx, 2), Utils.dp2px(mCtx, 2), mPaint);
    }

    private int getTargetLeft(int _i) {
        int left = (_i - 1) * (mRectWidth + space) + mPaddingX;
        return left;
    }

    private void drawBg(Canvas canvas) {
        RectF rectF = new RectF();
        rectF.top = 0;
        rectF.left = 0;
        rectF.right = width;
        rectF.bottom = height;
        mPaint.setColor(mCtx.getResources().getColor(R.color.material_deep_orange_accent_400));
        canvas.drawRoundRect(rectF, Utils.dp2px(mCtx, 10), Utils.dp2px(mCtx, 10), mPaint);
    }

    /**
     * 设置最大值
     * @param _max
     */
    public void setMax(int _max) {
        LogUtil.loge("setMax");
        max = _max;
        // (300 - (10*4)-(10*10)) /10 = 300 - 40 - 100 / 10 = 160 / 10 = 16 每个条目的宽度 = 16
        mRectWidth = (width - (_max * space) - getPaddingLeft() - getPaddingRight() - (_max * mPaddingX)) / _max;

        if (mRectWidth <= 0) {
            mRectWidth = Utils.dp2px(mCtx, 10);
        }

        if (mRectWidth * _max > width * 0.75) {
            mRectWidth = (int) (mRectWidth * 0.75);
        }

//        processGroup();
        invalidate();
    }

    /**
     * 分组，确定两边的元素，在绘制的时候，两边的元素高度稍短，中间的高度会多些
     */
    private void processGroup() {
        mTotalGroup = max % 3 == 0 ? max / 3 : max / 3 + 1;
        // 分组计算
        for (int i = 0; i < mTotalGroup; i++) {
            int startX = i * 3 + 1;
            start.add(startX);
            int endX = (i + 1) * 3;
            end.add(endX);
        }
    }

    /**
     * 设置进度,并重绘
     * @param _progress
     */
    public void setProgress(int _progress) {
        progress = _progress;
        invalidate();
    }
}

难点:

主要是难在获取3分组中的第二个元素，好让其高度和其它两个不一样，思路如下:

/**
 *  原理:
 *     | | | | | |
 *     1 2 3 4 5 6
 *
 *     1%3 = 1
 *     2%3 = 2
 *     3%3 = 0
 *
 *     4%3 = 1
 *     5%3 = 2
 *     6%3 = 0
 *
 *     i % 3 = 2时，中间图形高度会多些，其它会少些
 */

使用如下:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_marginTop="10dp"
        android:background="@drawable/shape_rpb"
        android:layout_height="wrap_content">

    <com.example.sample.basic.pb.VolumeProgressBar
            android:id="@+id/vpb"
            android:layout_width="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/btn_control"
            android:layout_centerVertical="true"
            android:layout_height="30dp"/>

    <TextView
            android:id="@+id/btn_control"
            android:layout_width="wrap_content"
            android:text="暂停"
            android:layout_marginLeft="5dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"
            android:layout_height="wrap_content"/>

</RelativeLayout>

Activity中的使用

int i = 0;
private String[] mPList;

private VolumeProgressBar mProgressBar3;
private boolean isRunTask;
private TextView mTextView;
private ImageView mIvPb;


private Handler mHandler = new Handler(new Handler.Callback() {
    @Override
    public boolean handleMessage(Message msg) {

        /**
         * 进度条更新的核心算法:
         *    // TODO total总长度，current下载长度
         *      double i = current / (double) total * 100;
         *      int progress = (int) Math.ceil(i);
         *      pdu.setTvProgress(progress + "/100%");
         */
        double ii = i / (double) mPList.length * 100;
        int pb = (int) Math.ceil(ii);

        // TODO: 2019/6/23 可以实现复用
        mProgressBar3.setProgress(i);

        if (pb >= 100) {
            isRunTask = false;
            mProgressBar3.setProgress(0);
            mTextView.setText("重新开始");
            mHandler.removeCallbacksAndMessages(null);
            return false;
        } else {
            i++;
            mHandler.sendEmptyMessageDelayed(0, 1500);
        }
        return false;
    }
});


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_sample_pb04);

    mProgressBar3 = findViewById(R.id.vpb);

    mIvPb = findViewById(R.id.iv_pb);

    mPList = getResources().getStringArray(R.array.provinces);

    mProgressBar3.setMax(mPList.length);
    
    isRunTask = true;

    mHandler.sendEmptyMessageDelayed(0, 1500);

    mTextView = findViewById(R.id.btn_control);
    mTextView.setText("暂停");
    mTextView.setOnClickListener(this);
}

@Override
protected void onDestroy() {
    mHandler.removeCallbacksAndMessages(null);
    super.onDestroy();
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.btn_control:
            if (isRunTask) {
                isRunTask = false;
                mTextView.setText("继续");
                mHandler.removeCallbacksAndMessages(null);
            } else {
                isRunTask = true;
                mTextView.setText("暂停");
                mHandler.sendEmptyMessageDelayed(0, 0);
            }

            break;
    }
}

第二个实现效果

原理: 主要是修改ClipDrawable的level来实现，进度的效果

drawable_img_pro.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
      android:clipOrientation="horizontal"
      android:gravity="left"
      android:drawable="@drawable/pro_sel"
        />

使用

<FrameLayout
        android:layout_width="match_parent"
        android:background="@drawable/shape_rpb"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_vertical"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_height="wrap_content">

    <ImageView
            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/pro_nor"
            android:layout_height="30dp"/>

    <ImageView
            android:id="@+id/iv_pb"
            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/drawable_img_pro"
            android:layout_height="30dp"/>

</FrameLayout>

Activity中使用

int i = 0;
private String[] mPList;

private boolean isRunTask;
private TextView mTextView;
private ImageView mIvPb;
private ClipDrawable pbDrawable;


private Handler mHandler = new Handler(new Handler.Callback() {
    @Override
    public boolean handleMessage(Message msg) {

        /**
         * 进度条更新的核心算法:
         *    // TODO total总长度，current下载长度
         *      double i = current / (double) total * 100;
         *      int progress = (int) Math.ceil(i);
         *      pdu.setTvProgress(progress + "/100%");
         */
        double ii = i / (double) mPList.length * 100;
        int pb = (int) Math.ceil(ii);


        // TODO: 2019/6/23 可以实现复用
        mProgressBar3.setProgress(i);

        // TODO: 2019/6/23 drawable ui效果调试看这里。无法做到复用
        int level = pbDrawable.getLevel();
        int cPb = (int) ((level / 10000d) * mPList.length);
        
        if (cPb < mPList.length) {
            pbDrawable.setLevel((int) (pbDrawable.getLevel() + Math.ceil(10000 / mPList.length) - 25));
        } else {
            LogUtil.loge("加载完成");
        }

        if (pb >= 100) {
            isRunTask = false;
            mProgressBar3.setProgress(0);
            mTextView.setText("重新开始");
            mHandler.removeCallbacksAndMessages(null);
            return false;
        } else {
            i++;
            mHandler.sendEmptyMessageDelayed(0, 1500);
        }

        return false;
    }
});

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_sample_pb04);

    mIvPb = findViewById(R.id.iv_pb);

    mPList = getResources().getStringArray(R.array.provinces);

    pbDrawable = (ClipDrawable) mIvPb.getDrawable();

    pbDrawable.setLevel(0);

    isRunTask = true;

    mHandler.sendEmptyMessageDelayed(0, 1500);
}

@Override
protected void onDestroy() {
    mHandler.removeCallbacksAndMessages(null);
    super.onDestroy();
}

参考资料:

https://www.jianshu.com/p/791b4caa6d81

https://blog.csdn.net/lv_fq/article/details/77851958

自定义控件-音波进度条实现心得

效果如下:

第一种声波进度条，采用自定义view的方式，使用canvas画椭圆的方式实现效果代码如下:

使用如下:

Activity中的使用

第二个实现效果

drawable_img_pro.xml

使用

Activity中使用

参考资料:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

智阳android