效果如图:
点击录音进度条开始,再次点击暂停,会在暂停的地方有一个白色的断点。
先说说大概的思路,进度条的xml文件是ProgressBar和RecyclerView的叠加,RecyclerView是水平布局的,我们先自定义item的宽度,并且每个item的默认是invisible的,点击暂停的时候我们会记录相应的position,只有当item的position和记录暂停的position相等时,item才会显示就会出现白色的断点。
布局文件
这里是布局文件中最重要的部分。
代码逻辑
先获得屏幕的宽度,然后根据我们自己设定的每个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 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 {
List datas;
List positions;
public SeekAdapter(List datas,List 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的布局文件:
整体来说难度不大,但是一般很少能想到用RecyclerView来做断点,要感谢田老师提供的解决思路。这个案例精妙的地方在于根据录制时长和总时长的比率来得到item在adapter中的position,然后通过position来显示断点。
源码下载:https://git.oschina.net/robin_mvc_coder/RecyclerProgressbar.git