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

自适应Tab宽度可以滑动文字逐渐变色的TabLayout
http://www.see-source.com/blog/300000023/1624.html

评论

1 楼 纯洁的坏蛋 2015-10-17  

来个截图吧