實現tablayout切換時顏色隨之漸變的效果
阿新 • • 發佈：2018-11-01
先放效果圖：
原理很簡單，監聽viewpager的onPagerScroll事件
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}利用裡面的引數position的值判斷viewpager滑動時的具體位置，並不斷設定toolbar和tablayout的背景顏色
利用int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue));算出兩種顏色之間的過渡值，並利用這個過渡值顏色不斷設定背景色
核心程式碼如下：
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { ArgbEvaluator evaluator = new ArgbEvaluator(); if (position == 0) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue)); //先設定第0頁時還沒有滑動時tablayout的顏色 toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue)); //先設定第0頁時還沒有滑動時toolbar的顏色 int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue)); mTabLayout.setBackgroundColor(evaluate);//設定背景顏色為算出的兩種顏色之間的過渡色 toolbar.setBackgroundColor(evaluate); } if (0 < position && position < 1) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_green)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (position == 1) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_purple)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (1 < position && position < 2) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_blue)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (position == 2) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_pink)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (2 < position && position < 3) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_purple)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (position == 3) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_brown)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } if (3 < position && position < 4) { mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown)); toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown)); int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_brown), getResources().getColor(R.color.tab_pink)); mTabLayout.setBackgroundColor(evaluate); toolbar.setBackgroundColor(evaluate); } } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } });
1.在Android裡新建一個專案，選擇BlankActivity(1.這樣做生成專案時會自動匯入 android.support.design.widget.AppBarLayout所在的包com.android:design:22.2.1並且會自動為我們建立和應用Toolbar，這省去了我們不少的功夫)
2.在colors.xml裡增加幾種顏色
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="tab_pink">#ff80ab</color> <color name="tab_purple">#9575cd</color> <color name="tab_blue">#10B5DE</color> <color name="tab_green">#009688</color> <color name="tab_brown">#795548</color> </resources>
3.activity_main裡的程式碼
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.colorfultablayout.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#ffffff"
app:tabSelectedTextColor="#FFFFFFFF"
app:tabTextColor="#FFE0E0E0" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
4.mainActivity裡的程式碼
package com.example.administrator.colorfultablayout;
import android.animation.ArgbEvaluator;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private Toolbar toolbar;
private ViewPager viewPager;
private FragAdapter mAdapter;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
initViewPager();
InitTabLayout();
}
private void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
ArgbEvaluator evaluator = new ArgbEvaluator();
if (position == 0) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (0 < position && position < 1) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_green));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (position == 1) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_purple));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (1 < position && position < 2) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_blue));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (position == 2) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_pink));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (2 < position && position < 3) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_purple));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (position == 3) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_brown));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
if (3 < position && position < 4) {
mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_brown), getResources().getColor(R.color.tab_pink));
mTabLayout.setBackgroundColor(evaluate);
toolbar.setBackgroundColor(evaluate);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
fragments = new ArrayList<Fragment>();//viewpager裡每一頁
fragments.add(new fragment1());
fragments.add(new fragment1());
fragments.add(new fragment1());
fragments.add(new fragment1());
mAdapter = new FragAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(mAdapter);
}
private void InitTabLayout() {
mTabLayout = (TabLayout) findViewById(R.id.tl);
mTabLayout.setTabsFromPagerAdapter(mAdapter);
mTabLayout.setupWithViewPager(viewPager);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
/**
* viewpager的Adapter，負責渲染檢視
*/
class FragAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public FragAdapter(FragmentManager fm) {
super(fm);
}
public FragAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
if (position == 0) return "標題1";
else if (position == 1) return "標題2";
else if (position == 2) return "標題3";
else if (position == 3) return "標題4";
else return "其它";
}
}