效果如图：
点击录音进度条开始，再次点击暂停，会在暂停的地方有一个白色的断点。
先说说大概的思路，进度条的xml文件是ProgressBar和RecyclerView的叠加，RecyclerView是水平布局的，我们先自定义item的宽度，并且每个item的默认是invisible的，点击暂停的时候我们会记录相应的position，只有当item的position和记录暂停的position相等时，item才会显示就会出现白色的断点。
布局文件
<ProgressBar
android:id="@+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="6dp"
android:max="300"
android:layout_centerVertical="true"
android:progress="0"
android:progressDrawable="@drawable/progressbar_bg"
/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="6dp"
android:id="@+id/recy"
android:layout_centerVertical="true"
>
这里是布局文件中最重要的部分。
代码逻辑
先获得屏幕的宽度，然后根据我们自己设定的每个item（白色的断点）的宽度来计算出有多少个item。
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
// 获取到屏幕的像素宽度
dwidth = metrics.widthPixels;
// yinzi是暂停的那个点的长度
// partCount就是设备宽度下断点的个数
partCount = dwidth / blockWidth;
接下来就是设置RecyclerView的其他参数
LinearLayoutManager manager = new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false);
mRecyclerView.setLayoutManager(manager);
List<String> datas = new ArrayList<>();
for (int i = 0; i < partCount; i++) {
datas.add("");
}
seekAdapter = new SeekAdapter(datas, positions);
mRecyclerView.setAdapter(seekAdapter);
我们的逻辑都是从点击开始录音按钮开始的。
switch (view.getId()) {
// 点击开始录音，进度条开始启动；再次点击打暂停断点
case R.id.record:
// 点击开始录音按钮显示其他按钮
showImgs();
// 点击后退录音状态取反
if (!mIsRecording) {
// 正在录音状态
mStartTime = System.currentTimeMillis();
startProgress();
mIsRecording = true;
mRecord.setSelected(true);
Toast.makeText(this, "开始录音", Toast.LENGTH_SHORT).show();
} else {
mRecord.setSelected(false);
recodeStop();
mIsRecording = false;
timer.cancel();
Toast.makeText(this, "暂停录音", Toast.LENGTH_SHORT).show();
}
break;
startProgress()进度条开始显示进度，逻辑都比较简单，直接看代码就可以了。
private void startProgress() {
TimerTask timerTask = new TimerTask() {
@Override
public void run() {
totalTime++;
second++;
if (second >= 60) {
second = 0;
minute++;
}
handler.sendEmptyMessage(1);
}
};
timer = new Timer();
timer.schedule(timerTask, 1000, 1000);
}
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
setTime();
mRecordTimer.setText("0" + minute + ":" + setTime());
// 点击开始进度条开始走
mProgressBar.setProgress(totalTime);
}
};
private String setTime() {
String time = "";
if (second < 10) {
time = "0" + second;
} else {
time = second + "";
}
return time;
}
再次点击录制按钮就会暂停录制，显示白色的断点，主要就是下面两个方法，在点击暂停按钮后刷新adapter的数据还要注意一下播放的状态。
private void recodeStop() {
// 将暂停的位置添加进集合，可以用来显示断点
positions.add(trans(totalTime));
if (seekAdapter != null)
seekAdapter.notifyDataSetChanged();
// 停止录音
mEndTime = System.currentTimeMillis();
timer.cancel();
}
// 将录制的时间时长转化为断点位置
private int trans(int totalTime) {
// 先计算出录制时间占最大录制时间的百分比，然后通过这个百分比求出暂停断点在所有在暂停断点的位置
float v = totalTime / maxRecordTime;
float v1 = v * partCount;
int p = (int) v1;
return p;
}
positions集合是用来存储断点位置的，但是我们是用totalTime即录制的总时长来更新进度的，所以使用trans（）方法转化为item在adapter中的position。先计算出totalTime（目前录制时长）占总时长（我这里是300秒）的百分比v，然后通过这个v计算出目前暂停断点item在adapter中的position，因为我们已经确定了总的item的个数。一定要注意点击暂停的时候我们一定要timer.cancel（），要不然下次再次点击录制按钮时间就会加快一倍（每次暂停后再次恢复录制都会比前一次快一倍，有兴趣的同学可以去找一下Timer相关的资料）。
接下来就是RecyclerView的Adapter中的逻辑判断了。
public class SeekAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
List<String> datas;
List<Integer> positions;
public SeekAdapter(List<String> datas,List<Integer> positions) {
this.datas = datas;
this.positions = positions;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.record_point_item, parent, false);
return new VIewH(view);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
VIewH holder = (VIewH) viewHolder;
for (int i = 0; i < positions.size(); i++) {
int a = positions.get(i);
if (position == a) {
holder.mImageView.setVisibility(View.VISIBLE);
}
}
}
@Override
public int getItemCount() {
return datas.size();
}
public static class VIewH extends RecyclerView.ViewHolder {
ImageView mImageView;
public VIewH(View itemView) {
super(itemView);
mImageView = (ImageView)itemView.findViewById(R.id.record_point_iv);
}
}
}
最主要的就是当position == a的时候将item设置为VISIBLE即可。
item的布局文件：
<ImageView
android:id="@+id/record_point_iv"
android:layout_width="8px"
android:layout_height="6dp"
android:background="@color/white"
android:visibility="invisible"/>
整体来说难度不大，但是一般很少能想到用RecyclerView来做断点，要感谢田老师提供的解决思路。这个案例精妙的地方在于根据录制时长和总时长的比率来得到item在adapter中的position，然后通过position来显示断点。
源码下载：https://git.oschina.net/robin_mvc_coder/RecyclerProgressbar.git
