自定义控件-音波进度条实现心得
2019-06-24 本文已影响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();
}
