Android入门教程 | SeekBar 自定义thumb

简介

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

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

示例

dimens.xml

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

6dp
2dp
20dp
4dp

drawable

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

shape_thumb_round_1.xml # 静态 thumb
layers_seek_bar_progress_1.xml
layers_thumb_ring_sweep_1.xml
rotate_thumb_1.xml

shape_thumb_round_1.xml

用solid和stroke做出的圆环效果

layers_thumb_ring_sweep_1.xml

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

rotate_thumb_1.xml

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

旋转参数 android:toDegrees 可以根据需求定义。

layers_seek_bar_progress_1.xml

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

layout

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

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

Activity中调用

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

private RotateDrawable mRotateThumbDrawable; //  加载中的thumb，由Activity来持有这个drawable
private 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();

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

离开页面时记得关闭动画

@Override
protected void onDestroy() {
    if (null != mThumbAnimator) {
        mThumbAnimator.cancel();
    }
    super.onDestroy();
}

小结

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

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

Android零基础入门教程视频参考