Combining Navigation Drawer with ViewPager and TabLayout in one screen

本文重点描述主页的内容显示布局，采用ViewPager+TabLayout联合使用，实现在Naviagtion Drawer中主页多页侧滑效果，不足之处还望各位指点！

1.xml布局如下：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context=".navigationview.NavigationViewActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/toolbar_padding_top"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:background="@color/pink_500"/>

        <!--内容显示布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/blue"
                app:tabIndicatorColor="@color/tabIndicatorColor"
                app:tabSelectedTextColor="#ffffff"
                app:tabTextColor="@color/darkGray">

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


            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                >
            </android.support.v4.view.ViewPager>
        </LinearLayout>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

其中：

app:tabIndicatorColor:设置指示器颜色

app:tabSelectedTextColor设置当前选中的标签文字颜色

app:tabTextColor 设置标签文字颜色

2.NavigationDrawerActivity中的核心代码如下:

mViewPagerAdapter = new NaViewPagerAdapter(getSupportFragmentManager());
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        //跟listview一样摄者适配器
        viewPager.setAdapter(mViewPagerAdapter);
        //给viewPager设置监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        //将tabLayout跟viewPager绑定
        tabLayout.setupWithViewPager(viewPager);

tabLayout的其他方法:

给tablayout添加监听

tabLayout.setOnTabSelectedListener ();

设置选中标签指示器的高度

tabLayout.setSelectedTabIndicatorHeight (100);

设置选中标签指示器的颜色

tabLayout.setSelectedTabIndicatorColor ();

设置标签的位置

tabLayout.setTabGravity ();

3.NaViewPagerAdapter代码如下:

public class NaViewPagerAdapter extends FragmentStatePagerAdapter {




    public NaViewPagerAdapter(FragmentManager fm) {
        super(fm);

    }

    /* 重写与TabLayout配合 */

    @Override
    public int getCount() {
        return 2;
    }
    //在给ViewPager设置适配的时候，在你的自定义适配器里重写getPageTitle()方法:
    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "要闻";
            case 1:
                return "英雄联盟";
        }
        return null;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new NewsFragment();
            case 1:
                return new GameFragment();
        }
        return null;
    }
}

4.其余的两个Fragment自行填充内容。

注意(保证Navigation Drawer跟TabLayout使用的前提)：

1)添加依赖:

使用:(AndroidStudio为例)

//build.gradle添加dependencies依赖
    compile 'com.android.support:design:22.2.0'

//要根据自己工程的编译版本选择依赖哪个版本的design库
   // 例如工程compile sdk 为23，则依赖
    compile 'com.android.support:design:23.2.0'
//Eclipse的同学就要自行下载Design包了

2)android:theme=”@style/AppTheme.NoActionBar”

5.大功告成，主页的显示效果如下：

Combining Navigation Drawer with ViewPager and TabLayout in one screen_文字颜色