Combining Navigation Drawer with ViewPager and TabLayout in one screen
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);
viewPager.setAdapter(mViewPagerAdapter);
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.setupWithViewPager(viewPager);
tabLayout的其他方法:
给tablayout添加监听
tabLayout.setOnTabSelectedListener ();
设置选中标签指示器的高度
tabLayout.setSelectedTabIndicatorHeight (100);
设置选中标签指示器的颜色
tabLayout.setSelectedTabIndicatorColor ();
设置标签的位置
tabLayout.setTabGravity ();
public class NaViewPagerAdapter extends FragmentStatePagerAdapter {
public NaViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return 2;
}
@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为例)
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:design:23.2.0'
2)android:theme=”@style/AppTheme.NoActionBar”
5.大功告成,主页的显示效果如下: