android关于TabLayout+ViewPager结合使用的小Demo

目前我们经常可以看到许多app都是fragment+viewpager+Tablayout的形式组合滑动，网上也已经有好多的小案例描述了该如何去实现。今天我也按照自己的编码习惯，结合网上类似的文章，做了一些总结，希望对大家能有所帮助。另外也间接的使用到了Toolbar，需要详细了解其使用的，或者需要在该demo基础之上补充的，大家自行去找度娘，关于Toolbar的使用已经有数不胜数的文章了！！！

先看一下效果图：





1.1用到的布局activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.administrator.tablayouttest.MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >

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

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabIndicatorColor="@android:color/black"
app:tabTextColor="@android:color/holo_blue_bright">

</android.support.design.widget.TabLayout>

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

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

1.2 用到的需要滑动的fragment（这里只贴一个，其他类似）

public class NewsFragment extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.news_layout,container,false);
}
}

1.3 用到的adapter：

public class TabAdapter extends FragmentPagerAdapter {

private List<Fragment> list_fragment = new ArrayList<>();
private List<String> list_title = new ArrayList<>();
public TabAdapter(FragmentManager fm) {
super(fm);
}

public void setData(List<Fragment> list){
if (!list_fragment.containsAll(list) && list != null && list.size() != 0){
list_fragment.addAll(list);
}
notifyDataSetChanged();
}
public void setList_title(List<String> list){
if (!list_title.conta
c8bf
insAll(list) && list != null && list.size() != 0){
list_title.addAll(list);
}
notifyDataSetChanged();
}

@Override
public Fragment getItem(int position) {
return list_fragment.get(position);
}

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

//此方法用来显示tab上的名字，不加此方法，运行后显示不了tab标签上面的内容
@Override
public CharSequence getPageTitle(int position) {

return list_title.get(position % list_title.size());
}
}

1.4 最后再上用到的activity：

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private ViewPager viewPager;
private TabLayout tabLayout;
private NewsFragment newsFragment;
private VideoFragment videoFragment;
private PictureFragment pictureFragment;
private Fragment mCurrentFragment;
private List<Fragment> list_fragment;//定义要装fragment的列表
private List<String> list_title;//tab名称列表
private TabAdapter tabAdapter;
private FrameLayout content;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//        initFragment();
initData();
bindDataToUI();
if (toolbar == null) return;
toolbar.setTitle(R.string.app_name);
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);//如果需要给toolbar设置事件监听，需要将toolbar设置支持actionbar
}

private void bindDataToUI() {
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(0)));
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(2)));

tabAdapter = new TabAdapter(getSupportFragmentManager());
viewPager.setAdapter(tabAdapter);
tabAdapter.setList_title(list_title);
tabAdapter.setData(list_fragment);
tabLayout.setupWithViewPager(viewPager);
//TabLayout绑定标题栏点击适配器
tabLayout.setTabsFromPagerAdapter(tabAdapter);

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
}

private void initData() {
list_title = new ArrayList<>();
list_title.add("新闻");
list_title.add("视频");
list_title.add("图片");

list_fragment = new ArrayList<Fragment>();
list_fragment.add(new NewsFragment());
list_fragment.add(new VideoFragment());
list_fragment.add(new PictureFragment());

}

private void initView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
content = (FrameLayout) findViewById(R.id.content);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.toolbarmenu, menu);//加载menu文件到布局

return true;
}
/*private void initFragment() {
newsFragment = new NewsFragment();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.add(R.id.content,newsFragment);
transaction.show(newsFragment).commit();
this.mCurrentFragment = newsFragment;
}
public void switchContent(Fragment from, Fragment to) {
if (mCurrentFragment != to) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
if (!to.isAdded()) {    // 先判断是否被add过
transaction.hide(from).add(R.id.content, to).commit(); // 隐藏当前的fragment，add下一个到Activity中
} else {
transaction.hide(from).show(to).commit(); // 隐藏当前的fragment，显示下一个
}
mCurrentFragment = to;
}
}*/
}

注：最后面被注释调的方法，个人觉得适用的场景是：点击不同的rudiobutton，选择对应的fragment，将其它不用的fragment给hide掉，当然，嵌套viewpager使用的场景也可以加，只需要在viewpager布局中加个空布局就可以(见wenzhang标红部分)，但是在次demo中，本人没有使用以上被注释调的方法。