TabLayout和ViewPager结合使用

TabLayout是android design包内的控件；

一般情况下，它总是喜欢和ViewPager成对出现；

典型的像如下的布局：

<!-- 如果你屏幕上显示只有少数 tab 的时候，可以设置tabMode="fixed",若很多需要拖动，则设置tabMode="scroll" -->
<!-- 如果 tabMode 设置成 scrollable 的，则tabGravity属性将会被忽略 -->
<!-- 其他可设置属性
app:tabIndicatorColor="#FF00FF00"
app:tabSelectedTextColor="#FF00FF00"
app:tabTextColor="#FF000000"
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

然后就是结合了，由于我们通常在ViewPager中放置的是若干个Fragment，所以还得先实现几个Fragment，典型的像下面这个：

public class MoveFragment extends Fragment implements OnClickListener {

private String curFlag;
public static MoveFragment newInstance(String flag){
MoveFragment fragment = new MoveFragment();
Bundle bundle = new Bundle();
bundle.putString("Flag", flag);
fragment.setArguments(bundle);
return fragment;
}

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle args = getArguments();
if (args != null) {
curFlag = args.getString("Flag");
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.fragment_move, container,false);
initViews(view);
return view;
}

public void initViews(View view){
TextView tv=(TextView)view.findViewById(R.id.tv);
tv.setText(curFlag);
}
@Override
public void onClick(View v) {

}

}

接下去就可以使用了：

首先new 几个Fragment出来：

private static final String[] titles = new String[]{"Tab 1", "Tab 2","Tab 3", "Tab 4"};

.....

Fragment[] fragments = new Fragment[titles.length];

fragments[0]=MoveFragment.newInstance(titles[0]);

fragments[1]=XFragment.newInstance(titles[1]);

fragments[2]=YFragment.newInstance(titles[2]);

fragments[3]=ZFragment.newInstance(titles[3]);

然后实现一个FragmentPagerAdapter，注意，一定要重写getPageTitle方法，这样TabLayout就可以从中取到要显示的标题了：

FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return fragments.length;
}

@Override
public Fragment getItem(int position) {
return fragments[position];
}

@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
};

剩下就是绑定了：

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);

然而偶尔也会没有ViewPager，TabLayout也会单独使用

那么这个时候需要使用addTab方法为TabLayout添加title了：

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));

////////////////////////////////////////////////////////////////////

//下面的内容与Tablayout无关，可以无视

///////////////////////////////////////////////////////////////////

接下去要实现一个ViewPager滑动的时候背景颜色过渡变化的效果

在网上找到一个背景颜色可以过渡变化的View，和ViewPager结合使用：

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(pagerAdapter);

ColorAnimationView colorAnimationView = (ColorAnimationView) findViewById(R.id.colorAnimationView);
colorAnimationView.setViewPager(viewPager,titles.length,0xffFF8080,0xff8080FF,0xffffffff,0xff80ff80);
//you can call this method like this:
//		colorAnimationView.setViewPager(viewPager, titles.length);//use default color
colorAnimationView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageSelected(int position) {
}

@Override
public void onPageScrollStateChanged(int state) {
}
});

布局的时候需要把这个View和ViewPager重叠（FrameLayout）在一起使用，这样就能看出效果了：

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>

<com.widget.view.ColorAnimationView
android:id="@+id/colorAnimationView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>

注意ViewPager中的Fragment不要设置backgroundColor（用屁股想想也知道为什么！）

该类的源码如下：

package com.widget.view;

import android.animation.Animator;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
/**
*
* @author Administrator
* @see https://github.com/TaurusXi/GuideBackgroundColorAnimation */
public class ColorAnimationView extends View implements ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {
private static final int WHITE = 0xFFFFFFFF;
private static final int RED = 0xffFF8080;
private static final int BLUE = 0xff8080FF;
private static final int GREEN = 0xff80ff80;
private static final int DURATION = 3000;
ValueAnimator colorAnim = null;

private PageChangeListener mPageChangeListener;

ViewPager.OnPageChangeListener onPageChangeListener;

public void setOnPageChangeListener(ViewPager.OnPageChangeListener onPageChangeListener) {
this.onPageChangeListener = onPageChangeListener;
}

/**
* 这是你唯一需要关心的方法
* @param mViewPager  你必须在设置 Viewpager 的 Adapter 这后，才能调用这个方法。
* @param obj ,这个obj实现了 ColorAnimationView.OnPageChangeListener ，实现回调
* @param count   ,viewpager孩子的数量
* @param colors int... colors ，你需要设置的颜色变化值~~ 如何你传人 空，那么触发默认设置的颜色动画
* */
/**
* This is the only method you need care about.
* @param mViewPager  ,you need set the adpater before you call this.
* @param count   ,this param set the count of the viewpaper's child
* @param colors ,this param set the change color use (int... colors),
*               so,you could set any length if you want.And by default.
*               if you set nothing , don't worry i have already creat
*               a default good change color!
* */
public void setViewPager(ViewPager mViewPager, int count, int... colors) {
//		this.mViewPager = mViewPager;
if (mViewPager.getAdapter() == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mPageChangeListener.setViewPagerChildCount(count);

mViewPager.setOnPageChangeListener(mPageChangeListener);
if (colors.length == 0) {
createDefaultAnimation();
} else {
createAnimation(colors);
}

}

public ColorAnimationView(Context context) {
this(context, null, 0);

}

public ColorAnimationView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public ColorAnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPageChangeListener = new PageChangeListener();
}

private void seek(long seekTime) {
if (colorAnim == null) {
createDefaultAnimation();
}
colorAnim.setCurrentPlayTime(seekTime);
}

private void createAnimation(int... colors) {
if (colorAnim == null) {
colorAnim = ObjectAnimator.ofInt(this,"backgroundColor", colors);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setDuration(DURATION);
colorAnim.addUpdateListener(this);
}
}

private void createDefaultAnimation() {
colorAnim = ObjectAnimator.ofInt(this,"backgroundColor", WHITE, RED, BLUE, GREEN);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setDuration(DURATION);
colorAnim.addUpdateListener(this);
}

@Override public void onAnimationStart(Animator animation) {

}

@Override public void onAnimationEnd(Animator animation) {
}

@Override public void onAnimationCancel(Animator animation) {

}

@Override public void onAnimationRepeat(Animator animation) {

}

@Override public void onAnimationUpdate(ValueAnimator animation) {
invalidate();
//		long playtime = colorAnim.getCurrentPlayTime();
}

private class PageChangeListener implements ViewPager.OnPageChangeListener {

private int viewPagerChildCount;

public void setViewPagerChildCount(int viewPagerChildCount) {
this.viewPagerChildCount = viewPagerChildCount;
}

public int getViewPagerChildCount() {
return viewPagerChildCount;
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

int count = getViewPagerChildCount() - 1;
if (count != 0) {
float length = (position + positionOffset) / count;
int progress = (int) (length * DURATION);
ColorAnimationView.this.seek(progress);
}
// call the method by default
if (onPageChangeListener!=null){
onPageChangeListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
}

}

@Override
public void onPageSelected(int position) {
if (onPageChangeListener!=null) {
onPageChangeListener.onPageSelected(position);
}
}

@Override
public void onPageScrollStateChanged(int state) {
if (onPageChangeListener!=null) {
onPageChangeListener.onPageScrollStateChanged(state);
}
}
}
}

Android TabLayout 库：FlycoTabLayout

http://www.open-open.com/lib/view/open1447294190257.html

https://github.com/hugeterry/CoordinatorTabLayout