需求效果：

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

效果预览

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

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

实现方案：

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

2. 趟坑：

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

      i. AppCompat系列主题

      
      
      

      correct_01
      

      correct_02

      ii. android:Theme系列主题

      
      
      

      error_01
      

      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 <secondProgress ) {
                   return;
               }
               int left = sbRecordProgress.getPaddingLeft();
               float percent = progress / (float) sbRecordProgress.getMax();
               int width = sbRecordProgress.getWidth();
               int boundsWidth = sbRecordProgress.getProgressDrawable().getBounds().width();
               float percentX = boundsWidth * percent;
               float translationX = left - ivThumb.getWidth() / 2 + percentX;
               ivThumb.setTranslationX(translationX);
               System.out.println("updateThumb,left=" + left + ",timeNeedle,width=" + ivThumb.getWidth() + ",progressWidth=" + width + "，boundsWidth= " + boundsWidth + ",percentX=" + percentX + "percent=" + percent);
           }
      

   3. 在页面加载的时候需要将各个UI组件移动到起始位置，但是获取不到进度条宽度(宽度=0)

      1. 这是由于在onCreate的时候View的测量工作还没有完成，导致拿不到宽度。解决方案：把取值放到view的一个线程中

          sbRecordProgress.post(new Runnable() {
              @Override
              public void run() {
                  int boundsWidth = sbRecordProgress.getProgressDrawable().getBounds().width();
                  int top = sbRecordProgress.getTop();
                  int left = sbRecordProgress.getLeft();
                  System.out.println("top=" + top + ",left=" + left);
              }
          });