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.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<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中，本人没有使用以上被注释调的方法。