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

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

先看一下效果图：

1.1用到的布局activity_main.xml:

xml version="1.0" encoding="utf-8"?>
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: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: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:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

                    android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        
    

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 list_fragment = new ArrayList<>();
    private List list_title = new ArrayList<>();
    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    public void setData(List list){
        if (!list_fragment.containsAll(list) && list != null && list.size() != 0){
            list_fragment.addAll(list);
        }
        notifyDataSetChanged();
    }
    public void setList_title(List list){
        if (!list_title.containsAll(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 list_fragment;//定义要装fragment的列表
    private List 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();
        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中，本人没有使用以上被注释调的方法。