自定义 长形进度条左边细右边粗
无意间看到这个需求,自己实现了一波,技术很菜仅作记录。
上图
直接自定义View,下面贴代码
package com.wavewave.myapplication.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.Nullable;
import com.wavewave.myapplication.R;
/**
* @author wavewave
* @CreateDate: 2022/7/12 6:31 下午
* @Description:
* @Version: 1.0
*/
public class GradientWidthAndColorLine extends View {
private Paint mPaint;
private Paint mPaintCircle;
private Paint mPaintNew;
private float mStartSize = 50f;
private float mEndSize = 10f;
private int mStartColor = Color.BLACK;
private int mEndColor = Color.RED;
private int defaultHeight = 30;
//创建point对象 参数为x坐标和y坐标
private PointF point = new PointF(100, 100);
private int circleRaid = 50;
public GradientWidthAndColorLine(Context context) {
this(context, null);
}
public GradientWidthAndColorLine(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public GradientWidthAndColorLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
// TypedArray obtainStyledAttributes = getContext().obtainStyledAttributes(R.styleable.GradientWidthAndColorLine);
// mStartColor = obtainStyledAttributes.getColor(R.styleable.GradientWidthAndColorLine_gradient_start_color, Color.BLACK);
// mEndColor = obtainStyledAttributes.getColor(R.styleable.GradientWidthAndColorLine_gradient_end_color, Color.RED);
// mStartSize = obtainStyledAttributes.getDimension(R.styleable.GradientWidthAndColorLine_gradient_start_size, 50f);
// mEndSize = obtainStyledAttributes.getDimension(R.styleable.GradientWidthAndColorLine_gradient_end_size, 10f);
// obtainStyledAttributes.recycle();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mStartColor);
mPaintCircle = new Paint();
mPaintCircle.setColor(Color.BLUE);
mPaintNew = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintNew.setStyle(Paint.Style.FILL);
mPaintNew.setColor(Color.GRAY);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
LinearGradient linearGradient = new LinearGradient(
0f, 0f, getMeasuredWidth(), getMeasuredHeight(), new int[]{Color.parseColor("#FFFEB2C5"), Color.parseColor("#FFFF678C")
}, new float[]{0.0f, 1.0f}, Shader.TileMode.CLAMP);
mPaint.setShader(linearGradient);
Path path = new Path();
int startY = 50;
path.moveTo(20, 0 + startY);
path.quadTo(0, 20 + startY, 20, 40 + startY);
canvas.drawPath(path, mPaintNew);
path.moveTo(20, 0 + startY);
path.lineTo(20, 40 + startY);
path.lineTo(getMeasuredWidth() - 25, 50 + startY);
path.lineTo(getMeasuredWidth() - 25, 0f + startY);
path.lineTo(20, 0 + startY);
path.close();
canvas.drawPath(path, mPaintNew);
path.moveTo(getMeasuredWidth() - 25, 0 + startY);
path.quadTo(getMeasuredWidth(), 25 + startY, getMeasuredWidth() - 25, 50 + startY);
canvas.drawPath(path, mPaintNew);
Path newPath = new Path();
newPath.moveTo(20, 0 + startY);
newPath.quadTo(0, 20 + startY, 20, 40 + startY);
canvas.drawPath(newPath, mPaint);
newPath.moveTo(20, 0 + startY);
newPath.lineTo(20, 40 + startY);
newPath.lineTo(point.x - 25, 50 + startY);
newPath.lineTo(point.x - 25, 0f + startY);
newPath.lineTo(20, 0 + startY);
newPath.close();
canvas.drawPath(newPath, mPaint);
canvas.drawCircle(point.x, startY + 25, circleRaid, mPaintCircle);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//获得触摸事件
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
//ACTION_MOVE不要设置break,否则圆形不会跟随手指活动 只会手指松开屏幕的时候圆形直接到了屏幕停止的位置
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
//获取手指触摸位置的x坐标
point.x = event.getX();
//获取手指触摸位置的y坐标
point.y = event.getY();
if (point.x < circleRaid) {
point.x = circleRaid;
}
if (point.x >= getMeasuredWidth() - 25) {
point.x = getMeasuredWidth() - circleRaid;
}
//启动
postInvalidate();
break;
}
return true;
}
}