需求效果:
项目中要求做一个带有音乐倒计时播放功能的拖动条,设计稿效果图如下:
效果预览图中白条位置代表音乐播放起始点,红条位置代表音乐播放暂停点,深黄色区域表示不能播放区域。要求音乐播放起始点和暂停点之间的距离满足以下关系:
- 浅黄色区域为白条和红条可移动区域
- 当白条和红条间距离大于4秒,白条距离红条4秒处开始移动,经过4秒与红条重合。
- 当白条和红条间距离小于4秒,白条距离红条开始移动,经过两者间距等值换算的秒数后重合。
实现方案:
-
初步方案: 采用系统自带Seekbar作为基本组件,SecondProgress填充深黄色区域,progress填充浅黄色区域,thumb作为红条,外加绘制白条。
-
趟坑:
-
系统自带seekbar在使用AppCompat系列主题时能准确展示效果,使用android:Theme系列主题会出现效果偏差,效果偏差体现为。效果如图所示:
i. AppCompat系列主题
correct_01 correct_02ii. android:Theme系列主题
error_01 error_02(ps:不要问我为什么不用AppCompat系列主题,该应用暂时没接入,不能因为自己的原因随便引入其他库)
-
系统自带Seekbar不支持设置thumb位置,图中效果是找UI美工做过修改位置弥补的。这里就不上图了。
-
style="?android:attr/seekBarStyle" 风格自带16dip paddingLeft和16dip paddingRight
-
-
解决方案:(放弃自带Thumb)
-
将白条,自定义红条,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); }
-
红条同步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); }
-
在页面加载的时候需要将各个UI组件移动到起始位置,但是获取不到进度条宽度(宽度=0)
-
这是由于在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); } });
-
-
网友评论