实战 Demo 教你用 Tablayout & ViewPager自定义优雅速滑页面

微信截图_20170809170529.png

前言

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

触电新闻：

image

虎扑体育：

image

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

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

image

Tablayout 介绍

image

 <android.support.design.widget.TabLayout
     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">
</android.support.design.widget.TabLayout>

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

介绍几个常用属性：

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

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

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

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

代码实现过程：

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

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private List<FragmentInfo> mFragments;

    public ViewPagerAdapter(FragmentManager fm,List<FragmentInfo> 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<FragmentInfo>  initFragments(){
        List<FragmentInfo> 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 的关联，不要忘了，不然可实现不了这么优雅的效果哈。