Toolbar, TabLayout, FloatingActionButton以及狀態列的同步變色
阿新 • • 發佈:2018-12-27
這裡是我期望的結果:
我的基本想法就是在TabLayout.OnTabSelectedListener的onTabSelected方法中,讓當前顏色動畫過渡到新tab所對應的顏色,同時確保動畫是漸進的。
為此,我使用ValueAnimator,它可以讓你在一段時間內遍歷兩個值之間的區別。我還使用了ArgbEvaluator作為ValueAnimator的估值器,用來處理動畫中每一步對兩個ARGB顏色值所做的計算。
這裡是程式碼:int colorFrom = ((ColorDrawable) toolbar.getBackground()).getColor(); int colorTo = getColorForTab(selectedTab.getPosition); ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
這裡要注意一點,你必須使用顏色的實際值,而不是顏色的資源ID!
我們把toolbar的當前背景顏色作為動畫的起始顏色,而要過渡到的顏色是基於新選中的tab項。
現在可以用ValueAnimator來告訴我們動畫過程中每一步是什麼顏色:
colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animator) { int color = (int) animator.getAnimatedValue(); toolbar.setBackgroundColor(color); tabLayout.setBackgroundColor(color); floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(color)); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(color); } } }); colorAnimation.start();
在呼叫start之前,我們添加了一個AnimatorUpdateListener,,它會在動畫期間被不斷的呼叫,我們可以獲取到此時顏色按照動畫變化後的值,把它轉換成int,然後在View上設定這個顏色。
Toolbar和TabLayout比較簡單,我們只需呼叫View的setBackgroundColor方法。
FloatingActionButton可能要稍微麻煩點,因為它沒有setBackgroundColor方法,因此我們無法使用。不過我們可以使用setBackgroundTintList方法。
最後,因為StatusBar顏色只在SDK version 21及以上才被支援,所以我們首先在呼叫Window的setStatusBarColor之前檢查裝置的SDK 版本。
ValueAnimator是Animation的子類,因此我們可以做標準動畫的一些事情,比如設定持續時間:
colorAnimation.setDuration(250);
...
colorAnimation.start();
這就是實現這個效果的所有東西了。我個人覺得這個效果看起來不錯,值得為之花上一點時間。原文連結:https://kylewbanks.com/blog/animating-toolbar-tablayout-floatingactionbutton-and-statusbar-background-color-on-android