Combining Navigation Drawer with ViewPager and TabLayout in one screen

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.大功告成，主页的显示效果如下：

6.参考链接：http://gold.xitu.io/entry/57512cf4207703006ce302e1(本文跟参考链接有不一样的地方，不懂的请留言！)