动画修改Toolbar、TabLayout和StatusBar背
2018-01-10 本文已影响184人
Kotyo
在使用别的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>
好了,到这里就结束了,具体步骤就这么多。