seekbar填坑记

需求效果:

项目中要求做一个带有音乐倒计时播放功能的拖动条,设计稿效果图如下:

seekbar填坑记_第1张图片
效果预览

图中白条位置代表音乐播放起始点,红条位置代表音乐播放暂停点,深黄色区域表示不能播放区域。要求音乐播放起始点和暂停点之间的距离满足以下关系:

  1. 浅黄色区域为白条和红条可移动区域
  2. 当白条和红条间距离大于4秒,白条距离红条4秒处开始移动,经过4秒与红条重合。
  3. 当白条和红条间距离小于4秒,白条距离红条开始移动,经过两者间距等值换算的秒数后重合。

实现方案:

  1. 初步方案: 采用系统自带Seekbar作为基本组件,SecondProgress填充深黄色区域,progress填充浅黄色区域,thumb作为红条,外加绘制白条。

  2. 趟坑:

    1. 系统自带seekbar在使用AppCompat系列主题时能准确展示效果,使用android:Theme系列主题会出现效果偏差,效果偏差体现为。效果如图所示:

      i. AppCompat系列主题


      seekbar填坑记_第2张图片
      correct_01
      seekbar填坑记_第3张图片
      correct_02

      ii. android:Theme系列主题


      seekbar填坑记_第4张图片
      error_01
      seekbar填坑记_第5张图片
      error_02

      (ps:不要问我为什么不用AppCompat系列主题,该应用暂时没接入,不能因为自己的原因随便引入其他库)

    2. 系统自带Seekbar不支持设置thumb位置,图中效果是找UI美工做过修改位置弥补的。这里就不上图了。

    3. style="?android:attr/seekBarStyle" 风格自带16dip paddingLeft和16dip paddingRight

  3. 解决方案:(放弃自带Thumb)

    1. 将白条,自定义红条,seekbar放在RelativeLayout容器中,存在问题是三者起始坐标不对齐。(坑3)
      i. 计算seekbar的左边距与当前控件之间的距离,然后移动到起始点

       private void moveTimeNeedle(int progress) {
           int left = sbRecordProgress.getPaddingLeft();
           float percent = progress / (float) sbRecordProgress.getMax();
           int width = sbRecordProgress.getWidth();
           int boundsWidth = sbRecordProgress.getProgressDrawable().getBounds().width();
           float percentX = boundsWidth * percent;
           timeNeedle.setTranslationX(left - timeNeedle.getWidth() / 2 + percentX);
           System.out.println("moveTimeNeedle,left=" + left + ",timeNeedle,width=" + timeNeedle.getWidth() + ",progressWidth=" + width + ",boundsWidth= " + boundsWidth + ",percentX=" + percentX + "percent=" + percent);
       }
      
    2. 红条同步seek进度,确定seek进度位置,并且移动

       sbRecordProgress.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
           @Override
           public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               updateThumb(seekBar.getProgress(),seekBar.getSecondaryProgress());
           }
      
       });
      

        private void updateThumb(int progress,int secondProgress) {
               if (progress 

你可能感兴趣的:(seekbar填坑记)