美文网首页
seekbar填坑记

seekbar填坑记

作者: NewSalton | 来源:发表于2017-10-12 18:08 被阅读88次

需求效果:

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

效果预览

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

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

实现方案:

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

  2. 趟坑:

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

      i. AppCompat系列主题


      correct_01correct_01 correct_02correct_02

      ii. android:Theme系列主题


      error_01error_01 error_02error_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);
             }
         });

相关文章

  • seekbar填坑记

    需求效果: 项目中要求做一个带有音乐倒计时播放功能的拖动条,设计稿效果图如下: 图中白条位置代表音乐播放起始点,红...

  • UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记

  • 填坑记

    后台像前台传值时遇到一个问题: 坑1 使用console.log打印后台传来的json值时只显示[object O...

  • 填坑记

    btng_upload_IDcard id 如果控件不冲突,就是控件所在的layout文件冲突了,多module下...

  • 记安装pyspectator填坑记

    原文链接:一只电工的博客 记安装pyspectator填坑记: Environment INFO: windows...

  • android seekbar 踩坑之路

    最近项目中有用到seekbar,之前对这东西不太了解,趁机来踩坑。 seekbar样式 按我觉得Material ...

  • activeMQ 填坑记

    前言 MQ是现在大型系统架构中必不可少的一个重要中间件,之前有偏文章《MQ(消息队列)常见的应用场景解析》介绍过M...

  • 填坑记(UI)

    1. tableView刷新闪屏 场景:类似于聊天界面,快速多次发送消息,刷新界面并且滚动到最后一条问题:scro...

  • 填坑记(逻辑)

    1. 在https页面去请求http的资源 问题:https页面内的资源加载不出来,为空白原因:浏览器有安全设置,...

  • webdriverAgent填坑记

    未能载入软件包“WebDriverAgentRunner”,因为它已损坏或丢失必要的资源。 请尝试重新安装软件包。...

网友评论

      本文标题:seekbar填坑记

      本文链接:https://www.haomeiwen.com/subject/onuoyxtx.html