Android SeekBar 自定义thumb，thumb旋转动画效果

概述简介 某些音乐播放或者视频播放的界面上，资源还在加载时，进度条的原点（thumb）会显示一个转圈的效果。 资源加载完成后，又切换回静态效果。这个效果增强了用户体验。 一般来说有美术人员负责设计和切图。 简介

某些音乐播放或者视频播放的界面上，资源还在加载时，进度条的原点（thumb）会显示一个转圈的效果。
资源加载完成后，又切换回静态效果。这个效果增强了用户体验。

一般来说有美术人员负责设计和切图。尝试实现时，我们可以使用使用drawable，来模拟实现这个转圈的效果。

示例dimens.xml

为方便管理，可以添加一些尺寸设置

<dimen name="audio_course_item_seek_bar_progress_height">6dp</dimen><dimen name="audio_course_item_seek_bar_radius">2dp</dimen><dimen name="audio_seek_bar_thumb_size">20dp</dimen><dimen name="audio_seek_bar_thumb_ring_wIDth">4dp</dimen>

drawable

我们一共要添加4个drawable文件。分别是2种thumb，1个动画，1个进度条“底座”。

shape_thumb_round_1.xml # 静态thumblayers_seek_bar_progress_1.xmllayers_thumb_ring_sweep_1.xmlrotate_thumb_1.xml

shape_thumb_round_1.xml

用solID和stroke做出的圆环效果

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID"    androID:shape="oval">    <solID androID:color="#ffffff" />    <stroke        androID:wIDth="@dimen/audio_seek_bar_thumb_ring_wIDth"        androID:color="#7095fc" />    <size        androID:wIDth="@dimen/audio_seek_bar_thumb_size"        androID:height="@dimen/audio_seek_bar_thumb_size" /></shape>

layers_thumb_ring_sweep_1.xml

这是准备拿来转圈的thumb。使用@R_989_3419@，叠加多层效果。
底部是一个半白色的圆（androID:shape="oval"）。
再叠加上一层圆环（androID:shape="ring"），使用了渐变色，增加动感。

<?xml version="1.0" enCoding="utf-8"?><@R_989_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item>        <shape androID:shape="oval">            <size                androID:wIDth="@dimen/audio_seek_bar_thumb_size"                androID:height="@dimen/audio_seek_bar_thumb_size" />            <solID androID:color="#ffffff" />        </shape>    </item>    <item>        <shape            androID:innerRadius="4dp"            androID:thicknessRatio="6"            androID:shape="ring"            androID:useLevel="false">            <gradIEnt                androID:endcolor="#ffffff"                androID:startcolor="#7095fc"                androID:type="sweep" />            <size                androID:wIDth="@dimen/audio_seek_bar_thumb_size"                androID:height="@dimen/audio_seek_bar_thumb_size" />        </shape>    </item></@R_989_3419@>

rotate_thumb_1.xml

定义旋转效果。注意它的drawable使用了上面定义的layers_thumb_ring_sweep_1.xml。

<?xml version="1.0" enCoding="utf-8"?><rotate xmlns:androID="http://schemas.androID.com/apk/res/androID"    androID:drawable="@drawable/layers_thumb_ring_sweep_1"    androID:duration="100"    androID:fromdegrees="0"    androID:pivotX="50%"    androID:pivotY="50%"    androID:todegrees="-360" />

旋转参数androID:todegrees可以根据需求定义。

layers_seek_bar_progress_1.xml

定义进度条的样式。这个是“底座”。颜色要和上面的匹配，看起来好看一点。

<?xml version="1.0" enCoding="utf-8"?><@R_989_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item androID:ID="@androID:ID/background">        <shape>            <size                androID:wIDth="5dp"                androID:height="@dimen/audio_course_item_seek_bar_progress_height" />            <solID androID:color="#e1e5e8" />        </shape>    </item>    <item androID:ID="@androID:ID/secondaryProgress">        <clip>            <shape>                <solID androID:color="#b7bdc8" />            </shape>        </clip>    </item>    <item androID:ID="@androID:ID/progress">        <clip>            <shape>                <gradIEnt                    androID:angle="0"                    androID:centercolor="#b8cafd"                    androID:endcolor="#86a4fd"                    androID:startcolor="#eef2ff" />            </shape>        </clip>    </item></@R_989_3419@>

layout

上面的资源文件准备完毕后。在我们的布局中添加一个Seekbar

androID:maxHeight和androID:minHeight需要设置androID:progressDrawable 用前面定义好的“底座”androID:thumb 先使用静态的样式

<Seekbar    androID:ID="@+ID/play_sb"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:layout_margintop="16dp"    androID:background="@null"    androID:maxHeight="@dimen/audio_course_item_seek_bar_progress_height"    androID:minHeight="@dimen/audio_course_item_seek_bar_progress_height"    androID:progress="40"    androID:progressDrawable="@drawable/layers_seek_bar_progress_1"    androID:thumb="@drawable/shape_thumb_round_1"    app:layout_constrainttop_totopOf="parent" />

Activity中调用

由Activity来持有Drawable变量和动画。例子中使用了dataBinding。

private RotateDrawable mRotateThumbDrawable; //  加载中的thumb，由Activity来持有这个drawableprivate Drawable mSolIDThumb;private ObjectAnimator mThumbAnimator; // 控制动画// ...    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mBinding = DataBindingUtil.setContentVIEw(this,R.layout.act_seekbar_1);// ...        mRotateThumbDrawable = (RotateDrawable) AppCompatResources.getDrawable(getApplicationContext(),R.drawable.rotate_thumb_1);        mSolIDThumb = AppCompatResources.getDrawable(getApplicationContext(),R.drawable.shape_thumb_round_1);    }

Drawable对象由activity直接持有， *** 作起来比较方便。

改变seekbar的thumb，使用方法setThumb(Drawable thumb)

使用静态的thumb

mBinding.playSb.setThumb(mSolIDThumb);

使用转圈圈的效果，先setThumb，并且需要启动动画

mBinding.playSb.setThumb(mRotateThumbDrawable);mThumbAnimator = ObjectAnimator.ofInt(mRotateThumbDrawable,"level",10000);mThumbAnimator.setDuration(1000);mThumbAnimator.setRepeatCount(ValueAnimator.INFINITE);mThumbAnimator.setInterpolator(new linearInterpolator());mThumbAnimator.start();

效果如下图

可以在静态和动态之间相互切换。

离开页面时记得关闭动画

@OverrIDeprotected voID onDestroy() {    if (null != mThumbAnimator) {        mThumbAnimator.cancel();    }    super.onDestroy();}

小结

要实现转圈的效果。主要还是直接 *** 作drawable对象，把动画加进去。
setThumb(Drawable thumb)方法接受的是Drawable对象，那么我们的思路就是从控制Drawable这点下手。

全部使用drawable可以达到文中的效果。有条件的也可以使用图片资源。做出更丰富的效果。

参考：

使用@R_989_3419@的环形drawable https://stackoverflow.com/questions/30676208/how-to-create-ring-shape-drawable-in-android/30677289https://stackoverflow.com/questions/15083811/programmatically-rotate-drawable-or-viewhttps://stackoverflow.com/questions/5872257/how-do-i-use-rotatedrawable/17123794

更多AndroID文章可参考 https://an.rustfisher.com/

总结

以上是内存溢出为你收集整理的Android SeekBar 自定义thumb，thumb旋转动画效果全部内容，希望文章能够帮你解决Android SeekBar 自定义thumb，thumb旋转动画效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。