Android SeekBar 自定義thumb旋轉(zhuǎn)動(dòng)畫效果
簡(jiǎn)介
某些音樂播放或者視頻播放的界面上，資源還在加載時(shí)，進(jìn)度條的原點(diǎn)（thumb）會(huì)顯示一個(gè)轉(zhuǎn)圈的效果。
資源加載完成后，又切換回靜態(tài)效果。這個(gè)效果增強(qiáng)了用戶體驗(yàn)。
一般來說有美術(shù)人員負(fù)責(zé)設(shè)計(jì)和切圖。嘗試實(shí)現(xiàn)時(shí)，我們可以使用使用drawable，來模擬實(shí)現(xiàn)這個(gè)轉(zhuǎn)圈的效果。
示例
dimens.xml
為方便管理，可以添加一些尺寸設(shè)置
<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個(gè)drawable文件。分別是2種thumb，1個(gè)動(dòng)畫，1個(gè)進(jìn)度條“底座”。
shape_thumb_round_1.xml # 靜態(tài)thumb layers_seek_bar_progress_1.xml layers_thumb_ring_sweep_1.xml rotate_thumb_1.xml
shape_thumb_round_1.xml
用solid和stroke做出的圓環(huán)效果
<?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
這是準(zhǔn)備拿來轉(zhuǎn)圈的thumb。使用layer-list，疊加多層效果。
底部是一個(gè)半白色的圓（android:shape="oval"）。
再疊加上一層圓環(huán)（android:shape="ring"），使用了漸變色，增加動(dòng)感。
<?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
定義旋轉(zhuǎn)效果。注意它的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" />
旋轉(zhuǎn)參數(shù)android:toDegrees可以根據(jù)需求定義。
layers_seek_bar_progress_1.xml
定義進(jìn)度條的樣式。這個(gè)是“底座”。顏色要和上面的匹配，看起來好看一點(diǎn)。
<?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
上面的資源文件準(zhǔn)備完畢后。在我們的布局中添加一個(gè)SeekBar
android:maxHeight和android:minHeight需要設(shè)置android:progressDrawable用前面定義好的“底座”android:thumb先使用靜態(tài)的樣式
<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中調(diào)用
由Activity來持有Drawable變量和動(dòng)畫。例子中使用了dataBinding。
private RotateDrawable mRotateThumbDrawable; // 加載中的thumb，由Activity來持有這個(gè)drawable
private Drawable mSolidThumb;
private ObjectAnimator mThumbAnimator; // 控制動(dòng)畫
// ...
@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對(duì)象由activity直接持有，操作起來比較方便。
改變seekbar的thumb，使用方法setThumb(Drawable thumb)
使用靜態(tài)的thumb
mBinding.playSb.setThumb(mSolidThumb);
使用轉(zhuǎn)圈圈的效果，先setThumb，并且需要啟動(dòng)動(dòng)畫
mBinding.playSb.setThumb(mRotateThumbDrawable); mThumbAnimator = ObjectAnimator.ofInt(mRotateThumbDrawable, "level", 0, 10000); mThumbAnimator.setDuration(1000); mThumbAnimator.setRepeatCount(ValueAnimator.INFINITE); mThumbAnimator.setInterpolator(new LinearInterpolator()); mThumbAnimator.start();
效果如下圖
可以在靜態(tài)和動(dòng)態(tài)之間相互切換。
離開頁面時(shí)記得關(guān)閉動(dòng)畫
@Override
protected void onDestroy() {
if (null != mThumbAnimator) {
mThumbAnimator.cancel();
}
super.onDestroy();
}
小結(jié)
要實(shí)現(xiàn)轉(zhuǎn)圈的效果。主要還是直接操作drawable對(duì)象，把動(dòng)畫加進(jìn)去。
setThumb(Drawable thumb)方法接受的是Drawable對(duì)象，那么我們的思路就是從控制Drawable這點(diǎn)下手。
全部使用drawable可以達(dá)到文中的效果。有條件的也可以使用圖片資源。做出更豐富的效果。
參考：
- 使用
layer-list的環(huán)形drawable - https://stackoverflow.com/questions/30676208/how-to-create-ring-shape-drawable-in-android/30677289
- https://stackoverflow.com/questions/15083811/programmatically-rotate-drawable-or-viewhttps://stackoverflow.com/questions/5872257/how-do-i-use-rotatedrawable/17123794
更多Android文章可參考 https://an.rustfisher.com/
到此這篇關(guān)于Android SeekBar 自定義thumb旋轉(zhuǎn)動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Android SeekBar 自定義thumb內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android仿微信清理內(nèi)存圖表動(dòng)畫（解決surfaceView屏幕閃爍問題）demo實(shí)例詳解
本文通過實(shí)例代碼給大家講解android仿微信清理內(nèi)存圖表動(dòng)畫（解決surfaceView屏幕閃爍問題）的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Android 開發(fā)隱藏標(biāo)題欄的方法總結(jié)
這篇文章主要介紹了android 開發(fā)隱藏標(biāo)題欄的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
WebView的介紹與簡(jiǎn)單實(shí)現(xiàn)Android和H5互調(diào)的方法
這篇文章主要給大家介紹了關(guān)于WebView與簡(jiǎn)單實(shí)現(xiàn)Android和H5互調(diào)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
Android中使用Theme來解決啟動(dòng)app時(shí)出現(xiàn)的空白屏問題
相信大多數(shù)人一開始都會(huì)對(duì)啟動(dòng)app的時(shí)候出現(xiàn)先白瓶或者黑屏然后才進(jìn)入第一個(gè)界面，例如：SplashActivity。那這是什么原因造成的呢？下面小編給大家介紹下2016-12-12
在開發(fā)過程中經(jīng)常需要使用文本，有時(shí)候需要對(duì)一段文字中的部分文字進(jìn)行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等。本文將為大家介紹如何實(shí)現(xiàn)這些效果，感興趣的可以學(xué)習(xí)一下2022-01-01
Android UI實(shí)現(xiàn)廣告Banner輪播效果
這篇文章主要為大家詳細(xì)介紹了Android UI實(shí)現(xiàn)廣告Banner輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Android桌面組件App Widget完整案例,較為詳細(xì)的分析了Android桌面組件App Widget的功能、定義及實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
本文給大家介紹Android中的設(shè)置按鈕，長(zhǎng)按或點(diǎn)擊菜單鍵，涉及到menu菜單的基本用法，本文介紹非常詳細(xì)具有參考價(jià)值，特此分享供大家學(xué)習(xí)2016-03-03
Android文本視圖TextView實(shí)現(xiàn)跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了Android文本視圖TextView實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Android Studio和阿里云數(shù)據(jù)庫實(shí)現(xiàn)一個(gè)遠(yuǎn)程聊天程序
本文主要介紹了Android Studio和阿里云數(shù)據(jù)庫實(shí)現(xiàn)一個(gè)遠(yuǎn)程聊天程序，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11