TabLayout、ViewPager、fragment实现可滑动的顶部菜单

首先看下效果





第一步：主布局

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/AppTheme.ToolBar"
app:title="@string/app_name">

</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed" />

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

</android.support.v4.view.ViewPager>
</LinearLayout>

第二步:定义四个Fragment，每个Fragment中都有个TextView，举其中一个布局代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="推荐"/>

</LinearLayout>

第三步：自定义一个ViewPagerAdapter继承于FragmentStatePagerAdpater

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private List<FragmentInfo> fragmentInfos;

public ViewPagerAdapter(FragmentManager fm) {
super(fm);
initFragment();
}

/**
* 初始化fragment
*/
private void initFragment() {
fragmentInfos = new ArrayList<>();
fragmentInfos.add(new FragmentInfo("推荐", RecommendFragment.class));
fragmentInfos.add(new FragmentInfo("排行", RankingFragment.class));
fragmentInfos.add(new FragmentInfo("游戏", GamesFragment.class));
fragmentInfos.add(new FragmentInfo("分类", CategoryFragment.class));
}

/**
* 获得fragment
* @param position
* @return
*/
@Override
public Fragment getItem(int position) {
try {
return (Fragment) fragmentInfos.get(position).getFragment().newInstance();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}

@Override
public int getCount() {
return fragmentInfos.size();
}

/**
* 获取tableLayout上面的标题
*/
@Override
public CharSequence getPageTitle(int position) {
return fragmentInfos.get(position).getTitle();
}
}

第四步：定义一个常量类

public class FragmentInfo {
public String title;
public 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;
}
}

第五步：主布局中将三者进行绑定

ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
//viewpager设置适配器
viewPager.setAdapter(pagerAdapter);
//TableLayout和ViewPager进行绑定
tabLayout.setupWithViewPager(viewPager);