android pageview tab动画,利用 Tablayout+ViewPager+Fragment 实现神奇滑动效果

本文为菜鸟窝作者 吴威龙 的连载

菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程

如需转载，请联系菜鸟窝公众号(cniao5),并注明出处。

[toc]

前言

先来看看两款成熟的应用：

触电新闻：

image

虎扑体育：

image

这两款应用自定义实现了比较不错的效果。实现也是基于 Tablayout + ViewPager + Fragment 自定义而来的。俗话说，不积跬步无以至千里，我们先看看基本的效果是怎么实现的，熟练了之后再去深入研究自定义或者研究大神的开源库。

接下来看看菜鸟手机助手实现的效果：

image

Tablayout 介绍

image

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimary"

app:tabTextColor="@color/md_white_1000"

app:tabSelectedTextColor="@color/md_white_1000"

app:tabMode="fixed">

直接看布局文件是最好的学习方式

介绍几个常用属性：

background: 设置背景图，示例为蓝色

tabTextColor: tab 的字体颜色，示例为白色

tabSelectedTextColor: tab 选中时候的字体颜色，示例为白色

tabMode: tab 的模式，有两种。fixed 为固定模式，scrollable 为可滚动模式，效果参见上面两个应用。

代码实现过程：

滑动页面的适配器：ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

private List mFragments;

public ViewPagerAdapter(FragmentManager fm,List fragments) {

super(fm);

mFragments = fragments;

}

@Override

public Fragment getItem(int position) {

try {

return (Fragment) mFragments.get(position).getFragment().newInstance();

} catch (InstantiationException e) {

e.printStackTrace();

} catch (IllegalAccessException e) {

e.printStackTrace();

}

return null;

}

@Override

public int getCount() {

return mFragments.size();

}

@Override

public CharSequence getPageTitle(int position) {

return mFragments.get(position).getTitle();

}

}

存放 Fragment 信息的 javabean，FragmentInfo.java

public class FragmentInfo {

private String title;

private Class fragment;

public FragmentInfo(String title, Class fragment) {

this.title = title;

this.fragment = fragment;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public Class getFragment() {

return fragment;

}

public void setFragment(Class fragment) {

this.fragment = fragment;

}

}

初始化 fragment 数据

private List initFragments(){

List mFragments = new ArrayList<>(4);

mFragments.add(new FragmentInfo("推荐",RecommendFragment.class));

mFragments.add(new FragmentInfo ("排行", TopListFragment.class));

mFragments.add(new FragmentInfo ("游戏", GamesFragment.class));

mFragments.add(new FragmentInfo ("分类", CategoryFragment.class));

return mFragments;

}

初始化 Tablayout

private void initTablayout() {

PagerAdapter adapter = new

ViewPagerAdapter(getSupportFragmentManager(),initFragments());

mViewPager.setOffscreenPageLimit(adapter.getCount());

mViewPager.setAdapter(adapter);

// Tablayout 关联 viewPager

mTabLayout.setupWithViewPager(mViewPager);

}

分析

通过上述代码，可以很清楚地知道，首先在布局文件是引用 Tablayout 控件并设置相关属性，在布局文件中使用 ViewPager 控件(虽然上述布局代码我没给出，但是你得知道有这个哟)，然后写一个适配器适配 Fragment 和 ViewPager 即可。当然最重要的一步就是 Tablayout 和 ViewPager 的关联，不要忘了，不然可实现不了这么优雅的效果哈。

推荐

这是我之前写的一个 demo，实现方式是基本一样的，有兴趣可以看下这篇文章：

特训营戳>>http://www.cniao5.com/hd/h5/android/fkcxy.html