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

目录
  • 简介
  • 示例
    • dimens.xml
    • drawable
      • shape_thumb_round_1.xml
      • layers_thumb_ring_sweep_1.xml
      • rotate_thumb_1.xml
      • layers_seek_bar_progress_1.xml
    • layout
    • Activity中调用
  • 小结

简介

某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(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 # 静态thumb
layers_seek_bar_progress_1.xml
layers_thumb_ring_sweep_1.xml
rotate_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。使用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:maxHeightandroid: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来持有这个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文章可参考 https://an.rustfisher.com/

到此这篇关于Android SeekBar 自定义thumb旋转动画效果的文章就介绍到这了,更多相关Android SeekBar 自定义thumb内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-16

Android SeekBar实现禁止滑动

本文实例为大家分享了Android SeekBar实现禁止滑动的具体代码,供大家参考,具体内容如下 由于项目需要,在关闭开关的时候需要将顶部的调温栏禁用,变为灰色且不可点击滑动,而开的时候要启用,变为黄色且可点击滑动 为防止抓不住重点,仅展示相关代码 public class DeviceControlActivity extends Activity implements View.OnClickListener,SeekBar.OnSeekBarChangeListener{ private

Android SeekBar实现平滑滚动

本文实例为大家分享了Android SeekBar实现平滑滚动的具体代码,供大家参考,具体内容如下 由于项目需要,SeekBar只需要三个档,但是如果只设置三个档会很难滑,看着也不好看,于是我将其设置为100,然后自动滑到0,50,100的位置 大部分代码还是跟之前一样,只是把max改为100,progress改为50 <SeekBar android:layout_width="match_parent" android:layout_height="wrap_con

Android双向选择控件DoubleSeekBar使用详解

本文实例为大家分享了Android双向选择控件DoubleSeekBar的使用方法,供大家参考,具体内容如下 先看效果图 1.DoubleSlideSeekBar public class DoubleSlideSeekBar extends View { /** * 线条(进度条)的宽度 */ private int lineWidth; /** * 线条(进度条)的长度 */ private int lineLength = 400; /** * 字所在的高度 100$ */ private

Android开发之SeekBar基本使用及各种美观样式示例

本文实例讲述了Android开发之SeekBar基本使用及各种美观样式.分享给大家供大家参考,具体如下: 改变控件透明度只需通过 .setAlpha()方法实现 有多种改变思路: 1.改变图片透明度 2.改变背景透明度地点 setBackground() 等等 这里举个例子: 思路拓展:只要将透明度的动态修改跟手势向结合 就能实现toolbar等洞见在拖动是隐藏 以下是更SeekBar相结合的实现代码 seekbar的position属性设置在 0~255 之间 正好与0~255 的透明度相对应

Android自定义SeekBar实现滑动验证且不可点击

最近公司因为短信接口被盗刷的比较严重,需要做一个类似于淘宝的滑动验证,用于特定环境,以增加一层保障.拿到需求首先想到的是自定义ViewGroup来实现,里面放一个seekbar和TextView即可.但是有更简单的方法,直接在布局中放入seekbar和TextView,不就ok了?用最简单快捷的方法实现需求,才是硬道理. 值得一提的是,seekbar默认情况下是支持点击事件的,也就是说,用户可以直接点击进度条以实现滑动验证这是不允许的,因此,自定义seekbar,屏蔽点击事件.下面我们先从see

Android seekbar实现可拖动进度条

本文实例为大家分享了Android seekbar实现可拖动进度条的具体代码,供大家参考,具体内容如下 SeekBar通过滑块的位置来标识数值 允许用户通过拖动滑块来改变进度值的大小 控件:SeekBar            两个TextView 显示状态 实现SeekBar.OnSeekBarChangeListener接口 对事件进行监听 xml文件: <?xml version="1.0" encoding="utf-8"?> <Linea

react-native 圆弧拖动进度条实现的示例代码

本文介绍了react-native 圆弧拖动进度条实现的示例代码,分享给大家,具体如下: 先上效果图 因为需求需要实现这个效果图 非原生实现, 难点1:绘制 使用svg 难点2:点击事件的处理 难点3:封装 由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块 render() { return ( <View pointerEvents={'box-only'} //事件处理 {...this._panResponder.panHandlers}> //实际圆环 {

android实现音乐播放器进度条效果

本文实例为大家分享了android实现音乐播放器进度条效果的具体代码,供大家参考,具体内容如下 效果图 依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. main.xml样式文件 <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android

Android编程实现WebView添加进度条的方法

本文实例讲述了Android编程实现WebView添加进度条的方法.分享给大家供大家参考,具体如下: 标准的XML界面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

Android view自定义实现动态进度条

Android  自定义view实现动态进度条 效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画

Android编程开发实现带进度条和百分比的多线程下载

本文实例讲述了Android编程开发实现带进度条和百分比的多线程下载.分享给大家供大家参考,具体如下: 继上一篇<java多线程下载实例详解>之后,可以将它移植到我们的安卓中来,下面是具体实现源码: DownActivity.java: package com.example.downloads; import java.io.File; import java.io.IOException; import java.io.RandomAccessFile; import java.net.H

Android自定义带水滴的进度条样式(带渐变色效果)

一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

jQuery实现可拖动进度条实例代码

html <div class="progress"> <div class="progress_bg"> <div class="progress_bar"></div> </div> <div class="progress_btn"></div> <div class="text">0%</div&g

Android编程实现对话框形式进度条功能示例

本文实例讲述了Android编程实现对话框形式进度条功能.分享给大家供大家参考,具体如下: MainActivity代码如下: package com.example.myapplication; import android.app.ProgressDialog; import android.content.DialogInterface; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; i

android多线程断点下载-带进度条和百分比进度显示效果

android多线程断点下载,带进度条和百分比显示,断点下载的临时数据保存到SD卡的文本文档中,建议可以保存到本地数据库中,这样可以提高存取效率,从而提高系统性能. 效果: 打开软件: 下载中: 下载完毕: 附代码如下: package com.yy.multiDownloadOfBreakPoint; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.io.R

Android 下载文件通知栏显示进度条功能的实例代码

1.使用AsyncTask异步任务实现,调用publishProgress()方法刷新进度来实现(已优化) public class MyAsyncTask extends AsyncTask<String,Integer,Integer> { private Context context; private NotificationManager notificationManager; private NotificationCompat.Builder builder; public M