Android实现步进式录像进度条

现在的APP对用户的体验要求越来越高，操作简单、样式新颖的交互能够提高用户的黏性。今天来实现一下步进式录像进度条，秒拍中用到这样的进度条，如下图：



下面来简单实现一下：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<RelativeLayout
android:id="@+id/progress_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<com.jackie.steppingprogressbar.SteppingProgressBar
android:id="@+id/stepping_progressbar"
android:layout_width="match_parent"
android:layout_height="50dp" />
</RelativeLayout>

<LinearLayout
android:id="@+id/button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/progress_layout"
android:layout_marginTop="30dp" >

<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:onClick="onStartClick"
android:text="开始" />

<Button
android:id="@+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="onStopClick"
android:text="停止" />

<Button
android:id="@+id/btn_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="onResetClick"
android:text="重置" />

<Button
android:id="@+id/btn_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="onDeleteClick"
android:text="删除" />
</LinearLayout>

</RelativeLayout>

SteppingProgressBar.java

package com.jackie.steppingprogressbar;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

public class SteppingProgressBar extends View {
private Paint mPaint;
private int mMaxWidth;
private float mPercent = 0;

private boolean mIsProgressPause;
private boolean mAddTimeStamp;

private List<Rect> mTimeStampPosition = new ArrayList<Rect>();
private List<Float> mTimeStampPercent = new ArrayList<Float>();

private final int STATE_NORMAL = 1;
private final int STATE_DELETE_PREPARE = 2;
private final int STATE_DELETE_DONE = 3;
private int mState = STATE_NORMAL;

private int MAX_PERCENT = 100;
private final static int PROGRESS_TEXT_SIZE = 56;
private final static int PROGRESS_SCALE = 1000;
private final static int PROGRESS_BACKGROUND_COLOR = Color.parseColor("#66030e18");
private final static int PROGRESS_PASSED_COLOR = Color.parseColor("#7cb855");
private final static int PROGRESS_STAMP_COLOR = Color.parseColor("#4a7b17");
private final static int PROGRESS_TEXT_COLOR = Color.parseColor("#ff0000");
private final static int PROGRESS_DELETING_COLOR = Color.parseColor("#3c6e57");

private SteppingProgressBarCallbackListener mSteppingProgressBarCallbackListener = null;

public void setOnDeleteCallbackListener(SteppingProgressBarCallbackListener listener) {
this.mSteppingProgressBarCallbackListener = listener;
}

public interface SteppingProgressBarCallbackListener {
/* 删除完成的回调 */
public void deleteDone(float percent);
}

public SteppingProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
initData();
}

private void initData() {
mPaint = new Paint();

mPaint.setAlpha(255);
mPaint.setStyle(Style.FILL);
mPaint.setDither(true);  //防抖动
mPaint.setAntiAlias(true); //放锯齿
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取尺寸
int size = MeasureSpec.getSize(heightMeasureSpec);
size = (int)(size + PROGRESS_TEXT_SIZE + 10);
heightMeasureSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

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

//绘制底色
mPaint.setColor(PROGRESS_BACKGROUND_COLOR);
float width = mMaxWidth = getWidth();
float height = getHeight() - PROGRESS_TEXT_SIZE - 10;
canvas.drawRect(0, 0, width, height, mPaint);

//绘制进度色
mPaint.setColor(PROGRESS_PASSED_COLOR);
width = (float) mPercent / (float) MAX_PERCENT * width;
canvas.drawRect(0, 0, width, height, mPaint);

//在下次进度条重新开始时，计算上次的分隔条
if (mAddTimeStamp && mState == STATE_NORMAL && !mIsProgressPause) {
mAddTimeStamp = false;
Rect mRect = new Rect();
mRect.left = (int) (width - 4);
mRect.top = 0;
mRect.right = (int) width;
mRect.bottom = (int) height;
mTimeStampPosition.add(mRect);
mTimeStampPercent.add(mPercent);
}

//绘制所有分隔条
for (Rect mRect : mTimeStampPosition) {
mPaint.setColor(PROGRESS_STAMP_COLOR);
canvas.drawRect(mRect, mPaint);
}

//绘制进度值文本
mPaint.setStrokeWidth(0);
mPaint.setColor(PROGRESS_TEXT_COLOR);
mPaint.setTextSize(PROGRESS_TEXT_SIZE);
mPaint.setTypeface(Typeface.DEFAULT);
float textWidth = mPaint.measureText(mPercent / PROGRESS_SCALE + "s");
if (mPercent != 0) {
if (width + textWidth > mMaxWidth) {
canvas.drawText(mPercent / PROGRESS_SCALE + "s", (width - textWidth), height + PROGRESS_TEXT_SIZE, mPaint);
} else {
canvas.drawText(mPercent / PROGRESS_SCALE + "s", width, height + PROGRESS_TEXT_SIZE, mPaint);
}
}

if (mState == STATE_DELETE_DONE) {
mState = STATE_NORMAL;
//当删除完成时，准备绘制本次分隔条，当percent为0的时候不绘制
if (mPercent != 0) {
this.mAddTimeStamp = true;
}
} else if (mState == STATE_DELETE_PREPARE) {
//当准备删除时，将上段时间内的进度条变色
mPaint.setColor(PROGRESS_DELETING_COLOR);
int left;
if (mTimeStampPosition != null && mTimeStampPosition.size() > 0) {
left = mTimeStampPosition.get(mTimeStampPosition.size() -1).right;
} else {
left = 0;
}

canvas.drawRect(left, 0, width, height, mPaint);
}
}

/**
* 进度条的最大值
* @param maxPercent
*/
public void setMax(int maxPercent) {
this.MAX_PERCENT = maxPercent;
}

/**
* 当前进度
* @return
*/
public float getProgress() {
return mPercent;
}

/**
* 设置当前进度
* @param percent
*/
public void setProgress(float percent) {
if (percent < 0) {
return;
}

if (percent >= MAX_PERCENT) {
percent = MAX_PERCENT;
}

this.mPercent = percent;
this.mState = STATE_NORMAL;
this.mIsProgressPause = false;

invalidate();
}

/**
* 设置视频录制中间的断点时间戳
* @param timeStamp
*/
public void setTimeStamp(boolean timeStamp) {
this.mIsProgressPause = true;
this.mAddTimeStamp = timeStamp;
}

/**
* 准备删除前一段进度
*/
public void deleteLastStepPrepare() {
if (mState == STATE_DELETE_PREPARE) {
return;
}

mState = STATE_DELETE_PREPARE;
invalidate();
}

/**
* 确认删除前一段进度
*/
public void deleteLastStep() {
if (mState != STATE_DELETE_PREPARE) {
deleteLastStepPrepare();
return;
}

if (mTimeStampPercent != null && mTimeStampPercent.size() > 0) {
this.mPercent = mTimeStampPercent.remove(mTimeStampPercent.size() - 1);
} else {
this.mPercent = 0;
}
this.mAddTimeStamp = false;
mState = STATE_DELETE_DONE;

//操作断点
if (mTimeStampPosition != null && mTimeStampPosition.size() > 0) {
mTimeStampPosition.remove(mTimeStampPosition.size() - 1);
}

if (mSteppingProgressBarCallbackListener != null) {
mSteppingProgressBarCallbackListener.deleteDone(this.mPercent);
}

invalidate();
}

/**
* 取消删除前一段进度
*/
public void deleteLastStepCancel() {
if (mState == STATE_NORMAL) {
return;
}
mState = STATE_DELETE_DONE;
invalidate();
}

/**
* 重置进度条
*/
public void reset() {
this.mPercent = 0;
this.mAddTimeStamp = false;
mTimeStampPosition.clear();
mTimeStampPercent.clear();

invalidate();
}
}

MainActivity.java

package com.jackie.steppingprogressbar;

import com.jackie.steppingprogressbar.SteppingProgressBar.SteppingProgressBarCallbackListener;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {
SteppingProgressBar mProgressBar;

private boolean mIsStopped = true;
private int mProgress;

private Handler mHandler = new Handler() {

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);

setProgress();
}
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mProgressBar = (SteppingProgressBar) findViewById(R.id.stepping_progressbar);
mProgressBar.setMax(10000);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.main, menu);
return true;
}

public void onStartClick(View view) {
if (!mIsStopped) {
return;
}

mIsStopped = false;
mHandler.removeMessages(0);
mHandler.sendEmptyMessage(0);
}

private void setProgress() {
if (mProgress > 10000) {
mHandler.removeMessages(0);
} else if (!mIsStopped) {
mProgress += 100;
mProgressBar.setProgress(mProgress);
mHandler.sendEmptyMessageDelayed(0, 100);
}
}

public void onStopClick(View view) {
mIsStopped = true;
mProgressBar.setTimeStamp(true);
}

public void onResetClick(View view) {
mProgressBar.reset();
mProgress = 0;
}

public void onDeleteClick(View view) {
if (!mIsStopped) {
return;
}

mProgressBar.deleteLastStep();
mProgressBar.setOnDeleteCallbackListener(new SteppingProgressBarCallbackListener() {

@Override
public void deleteDone(float percent) {
mProgress = (int) percent;
}
});
}
}

效果图如下：