android自定义view实现进度条动画、按钮渐变及录制状态控制

不得不说自定义view绘制各种图形及它们的动画是令人有成就感的事情。该篇来分享之前项目中写的一个视频录制按钮的自定义view，该view有录制、暂停（结束）等状态的控制，各种状态转变的动画，以及录制进度展示。先看效果（圆圈的小白色段是最小录制时长的标记点）： 代码的内容其实主要就是绘制进度条、录制按钮的切换动画（圆角正方形—>圆—>圆角正方形）。还是那句话，计算好每个组件的坐标（半径）事情就完成了一半，所以关键在于计算，这里的图形都简单计算并不复杂，只是要稍微细心点。注释都写得比较详细，就不一一解释了，具体看代码：

import android.content.Context; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import android.util.AttributeSet; import android.view.View; import androidx.annotation.Nullable; import com.robot.common.frame.BaseApp; import com.robot.common.utils.PixelUtil; /** * 视频录制控制、进度 * * @author ly * date 2020/3/3 11:02 */ public class RecordProgressView extends View implements View.OnClickListener { private static final float changeRatio = 5f; //最小录制时长标记的弧长 private static final int minPAngle = 2; private OnRecordStatusListener onRecordStatusListener; private Paint paint; //内圈录制、暂停按钮颜色 private int circleInsideColor; //进度圈颜色 private int circleOutsideColor; //进度颜色 private int circleProgressColor; private float progressW; //进度条圆圈半径 private float circleProgressR; //内实心圆圈半径 private float circleInsideR; //录制按钮宽高 private float pauseRectW; //动态变量内圈半径（逐渐变小或变大） private float curCircleInsideR; private State state = State.READY; //暂停按钮rect private RectF pauseRect; private int pauseRadius; private RectF progressRect; private float progress; private float minProgress = 90; private float minCircleR; private LinearGradient linearGradientCircle; private LinearGradient linearGradientRect; public enum State { READY, RECORDING, PAUSE, FINISH } public RecordProgressView(Context context) { super(context); init(); } public RecordProgressView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public RecordProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { circleInsideColor = 0xffE9B763; circleOutsideColor = 0x55ffffff; circleProgressColor = 0xffffffff; paint = new Paint(); paint.setAntiAlias(true);//抗锯齿 pauseRadius = PixelUtil.dp2px(5); setOnClickListener(); } public float getProgress() { return progress; } /** * @param progress 已录制时长/最大时长 * @author ly on 2020/3/3 16:41 */ public void setProgress(float progress) { this.progress = progress * 360; if (this.progress >= 360) {//表示录制达到最大时长，自动结束 this.progress = 360; state = State.FINISH; if (onRecordStatusListener != null) onRecordStatusListener.onFinish(); } invalidate(); } /** * @param minProgress 最小录制时长/最大时长 * @author ly on 2020/3/3 16:41 */ public void setMinProgress(float minProgress) { this.minProgress = minProgress * 360; } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (circleProgressR == 0) { int w = getWidth(); progressW = w * 0.061f; circleProgressR = (w - progressW) / 2f; circleInsideR = (w * 0.83f) / 2; pauseRectW = w * 0.37f; curCircleInsideR = circleInsideR; //矩形对角线的一半 // minCircleR = (float) (Math.sqrt(Math.pow(pauseRectW, 2) * 2) / 2f); minCircleR = pauseRectW / 2; pauseRect = new RectF(w / 2f - pauseRectW / 2 , w / 2f - pauseRectW / 2 , w / 2f + pauseRectW / 2 , w / 2f + pauseRectW / 2); progressRect = new RectF(0 + progressW / 2, 0 + progressW / 2, w - progressW / 2, w - progressW / 2); float offsetX = (float) Math.sqrt(Math.pow(curCircleInsideR, 2) / 2); //圆的左上到右下方向渐变 linearGradientCircle = new LinearGradient( curCircleInsideR - offsetX, curCircleInsideR - offsetX, w - offsetX, w - offsetX, 0xff7360FF, 0xff9663F3, Shader.TileMode.MIRROR); linearGradientRect = new LinearGradient( pauseRect.left, pauseRect.top, pauseRect.right, pauseRect.bottom, 0xff7360FF, 0xff9663F3, Shader.TileMode.MIRROR); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画外圈进度圈、进度 paint.setShader(null); paint.setStyle(Paint.Style.STROKE); paint.setColor(circleOutsideColor); paint.setStrokeWidth(progressW);//设置画笔粗细 canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, circleProgressR, paint); if (minProgress - minPAngle > 0 && BaseApp.get().isDebug()) { paint.setColor(circleProgressColor); canvas.drawArc(progressRect, minProgress - 90, minPAngle, false, paint); } if (state != State.READY) { //进度就是圆弧 //时钟3点的方向为0度，顺时钟方向为正，-90是圆弧的开始点，即12点位置开始， //sweepAngle扫过的角度，调整该值即可实现进度顺时针加载(0-360) paint.setColor(circleProgressColor); canvas.drawArc(progressRect, -90, progress, false, paint); } //画内部圆/暂停按钮 paint.setColor(circleInsideColor); paint.setStyle(Paint.Style.FILL); paint.setShader(linearGradientCircle); if (state == State.RECORDING) {//录制中画矩形和进度 if (curCircleInsideR > minCircleR) { canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, curCircleInsideR, paint); changeCircleR(false); } else { paint.setShader(linearGradientRect); canvas.drawRoundRect(pauseRect, pauseRadius, pauseRadius, paint); } } else { canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, curCircleInsideR, paint); if (curCircleInsideR < circleInsideR) changeCircleR(true); } } public void resetState() { state = State.READY; progress = 0; invalidate(); } public void setState(State state) { this.state = state; invalidate(); } public void setOnClickListener() { setOnClickListener(this); } @Override public void onClick(View v) { switch (state) { //由开始状态变为录制状态，点击后由圆变为矩形 case READY: case PAUSE: state = State.RECORDING; if (onRecordStatusListener != null) onRecordStatusListener.onRecording(); invalidate(); break; //录制中，点击后由矩形变为圆 case RECORDING: if (progress < minProgress) { state = State.PAUSE; if (onRecordStatusListener != null) onRecordStatusListener.onPause(); } else { state = State.FINISH; if (onRecordStatusListener != null) onRecordStatusListener.onFinish(); } invalidate(); break; default: break; } } private void changeCircleR(boolean is2Big) { if (is2Big) {//变大 curCircleInsideR += changeRatio; if (curCircleInsideR >= circleInsideR) curCircleInsideR = circleInsideR; } else {//变小 curCircleInsideR -= changeRatio; if (curCircleInsideR <= minCircleR) curCircleInsideR = minCircleR; } invalidate(); } public void setOnRecordStatusListener(OnRecordStatusListener onRecordStatusListener) { this.onRecordStatusListener = onRecordStatusListener; } public interface OnRecordStatusListener { void onRecording(); void onPause(); void onFinish(); } }

如果对大家有帮助，请点个赞以鼓励我前进~