RecyclerView实现进度条断点

效果如图:

RecyclerView实现进度条断点_第1张图片
GIF.gif

点击录音进度条开始,再次点击暂停,会在暂停的地方有一个白色的断点。
先说说大概的思路,进度条的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

你可能感兴趣的:(RecyclerView实现进度条断点)