1. 程式人生 > >Toolbar, TabLayout, FloatingActionButton以及狀態列的同步變色

Toolbar, TabLayout, FloatingActionButton以及狀態列的同步變色

這裡是我期望的結果:


我的基本想法就是在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