简介
某些音乐播放或者视频播放的界面上，资源还在加载时，进度条的原点（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.xmlshape_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。应用layer-list，叠加多层成果。 底部是一个半红色的圆（android:shape="oval"）。 再叠加上一层圆环（android:shape="ring"），应用了渐变色，减少动感。
<?xml version="1.0" encoding="utf-8"?><layer-list 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></layer-list>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"?><layer-list 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></layer-list>layout
下面的资源文件筹备结束后。在咱们的布局中增加一个SeekBar
android:maxHeight和android:minHeight须要设置android:progressDrawable用后面定义好的“底座”android:thumb先应用动态的款式<SeekBarandroid: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", 0, 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 能够达到文中的成果。有条件的也能够应用图片资源。做出更丰盛的成果。
Android零根底入门教程视频参考