美文网首页Android开发Android开发经验谈Android技术知识
动画修改Toolbar、TabLayout和StatusBar背

动画修改Toolbar、TabLayout和StatusBar背

作者: Kotyo | 来源:发表于2018-01-10 10:51 被阅读184次
    在使用别的APP时,TabLayout、Toolbar和StatusBar颜色会随着动画更改,就像下面这样:

    实现方式也很简单,为了使当前颜色改变,并使用动画,我们需要在TabLayout.OnTabSelectedListener的监听中实现onTabSelected(TabLayout.Tab tab)方法。

    为了使颜色改变有动画效果,这里我使用了ValueAnimator,设置动画时间和ArgbEvaluator来处理两个ARGB颜色之间的动画步骤。

    具体方式:

    public class UpdateToolbarColorActivity extends AppCompatActivity {
        private TabLayout tabLayout;
        private Toolbar toolbar;
        private String[] colors = {"红", "绿", "蓝", "紫", "灰"};
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_update_toolbar_color_layout);
            tabLayout = (TabLayout) findViewById(R.id.id_tab_layout);
            toolbar = (Toolbar) findViewById(R.id.toolbar);
    
            for (String color : colors) {
                tabLayout.addTab(tabLayout.newTab().setText(color));
            }
    
            tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
            tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    //获取每次颜色的初始值
                    int colorFrom = ((ColorDrawable) toolbar.getBackground()).getColor();
                    int colorTo = getColorForTab(tab.getPosition());
                    //使颜色改变有动画效果
                    ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
                    //动画执行时间
                    colorAnimation.setDuration(1000);
                    //动画监听器
                    colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator animator) {
                            int color = (int) animator.getAnimatedValue();
                            //修改toolbar背景颜色
                            toolbar.setBackgroundColor(color);
                            //修改tablayout背景颜色
                            tabLayout.setBackgroundColor(color);
                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                //修改状态栏背景颜色
                                getWindow().setStatusBarColor(color);
                            }
                        }
                    });
                    //执行动画
                    colorAnimation.start();
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
        }
    
        /**
         * 每个tab所对应的颜色值
         */
        public int getColorForTab(int position) {
            if (position == 0) return ContextCompat.getColor(this, R.color.red);
            else if (position == 1) return ContextCompat.getColor(this, android.R.color.holo_green_light);
            else if (position == 2) return ContextCompat.getColor(this, R.color.blue_color);
            else if (position == 3) return ContextCompat.getColor(this, android.R.color.holo_purple);
            else return ContextCompat.getColor(this, android.R.color.darker_gray);
        }
    }
    

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                 xmlns:app="http://schemas.android.com/apk/res-auto"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/d_56"
            android:background="@color/white"
            ></android.support.v7.widget.Toolbar>
    
        <android.support.design.widget.TabLayout
            android:id="@+id/id_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="#fff"
            android:fillViewport="false"
            app:tabMode="fixed"
            app:layout_scrollFlags="scroll"
            app:tabIndicatorColor="#d7e3"
            app:tabIndicatorHeight="2dp"
            app:tabSelectedTextColor="#d713"
            app:tabTextColor="#ced0d3"
            app:tabTextAppearance="@style/MyCustomTextAppearance"
            >
    
        </android.support.design.widget.TabLayout>
    
    </android.support.design.widget.CoordinatorLayout>
    

    好了,到这里就结束了,具体步骤就这么多。

    相关文章

      网友评论

        本文标题:动画修改Toolbar、TabLayout和StatusBar背

        本文链接:https://www.haomeiwen.com/subject/imvmnxtx.html