Android Material Design之TabLayout + NavigationView联合使用
这是写的第二篇关于Android Material Design的文章，第一篇着重讲了CoordinatorLayout （协调容器）和CollapsingToolbarLayout （可折叠式布局）的基本应用。这一篇我们来看一看如何用TabLayout + NavigationView来仿照网易新闻等的导航栏。
先看看实现效果：
侧边导航的效果是：
嘿嘿，大爱琅琊榜。
项目涉及到的基本知识：
- TabLayout的基本使用
- NavigationView的基本使用和监听
- DrawerLayout抽屉布局
- ViewPager+Fragment滑动页面
- CircleImageView圆形图片
项目实战分析
项目结构如下：
布局文件R.layout.activity_main：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout //DrawerLayout是一个DrawerLayout，其中重要的角色有ViewDragHelper，ViewDragCallback，以它作为根布局； xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" >
<FrameLayout android:id="@+id/container" //填放MainFragment android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" />
<android.support.design.widget.NavigationView //今天的主角 android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header"//NavigationView 的一个属性，给Menu添加头部布局 android:fitsSystemWindows="true" app:menu="@menu/drawer"/>//NavigationView 的属性，设置Menu的选项
</android.support.v4.widget.DrawerLayout>
重要代码MainActivity.java：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//initView
this.mDrawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);
this.mNavigationview = (NavigationView) findViewById(R.id.navigation_view);
rl=(RelativeLayout)(this.mNavigationview).getHeaderView(0);//得先获取ImageView的父布局；
image=(CircleImageView)rl.findViewById(R.id.profile_image);
mNavigationview.setNavigationItemSelectedListener(this); //设置菜单点击监听
//initFragment
//添加MainFragment到MainActivity中
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.container, new MainFragment(), "Main")
.commit();
mCurrentMenuItem = R.id.menu_item_1;
image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerlayout.closeDrawers(); //关闭侧滑菜单
startActivity(new Intent(MainActivity.this,ImageActivity.class));//查看图片
}
});
}
....省略部分...
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
@IdRes int id = menuItem.getItemId();
if (id == mCurrentMenuItem) {//点击了当前的Tab则直接关闭
mDrawerlayout.closeDrawers();
return false;
}
//切换Tab
switch (id) {
case R.id.menu_item_1:
setTab(0);
break;
case R.id.menu_item_2:
setTab(1);
break;
case R.id.menu_item_3:
setTab(2);
break;
case R.id.menu_item_4:
setTab(3);
break;
case R.id.menu_item_5:
setTab(4);
break;
default:
break;
}
mCurrentMenuItem = id;
menuItem.setChecked(true);
mDrawerlayout.closeDrawers(); //关闭侧滑菜单
return true;
}
/** * 设置Tab * @param currentItem 要设置的Tab序号 index 0 */
private void setTab(int currentItem) {
Fragment fragment = getSupportFragmentManager().findFragmentByTag("Main");
if(fragment instanceof MainFragment){
// ((MainFragment)fragment).setPagerItem(currentItem);//这样写会有bug
((MainFragment)fragment).setTabSelect(currentItem);
}
}
/** * set menu item check * @param position index 0 */
public void setMenuItem(int position){
@IdRes int id = 0;
switch (position){
case 0:
id = R.id.menu_item_1;
break;
case 1:
id = R.id.menu_item_2;
break;
case 2:
id = R.id.menu_item_3;
break;
case 3:
id = R.id.menu_item_4;
break;
case 4:
id = R.id.menu_item_5;
break;
default:
break;
}
if(id!=0){
mNavigationview.setCheckedItem(id);
mCurrentMenuItem = id;
}
}
public void setToolBar(Toolbar toolBar){
if (toolBar != null) {
//ActionBarDrawerToggle是一个开关，用于打开/关闭DrawerLayout抽屉
final ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,mDrawerlayout,toolBar,R.string.app_name,R.string.app_name2);
mDrawerlayout.setDrawerListener(drawerToggle);//设置Drawerlayout的开关监听
drawerToggle.syncState();//该方法会自动和toolBar关联；
}
}布局文件R.layout.fragment_main：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"//设置滑动到顶部时，Toolbar会消失；
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:title="琅琊榜"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.TabLayout//TabLayout今天的主角；
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar_tabbar"
android:background="?attr/colorPrimary"//设置TabLayout的背景
android:scrollbars="horizontal"
app:tabTextColor="@android:color/black"//设置TabLayout的tab的字体颜色
app:tabSelectedTextColor="?attr/colorAccent"//设置TabLayout的tab被选中后的字体的颜色
app:tabBackground="@android:color/white"//设置TabLayout的tab的背景色
app:tabIndicatorColor="?attr/colorAccent"//设置TabLayout的指示器的颜色
app:tabPaddingStart="12dp"
app:tabPaddingEnd="12dp"//设置TabLayout的tab的内间距
app:tabMode="scrollable"//设置TabLayout是固定还是可以滚动
app:tabGravity="center"//设置TabLayout的tab在中心
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>重要的代码MainFragment.java:
public class MainFragment extends Fragment {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private Toolbar mToolbar;
private PagerAdapter pagerAdapter;
private List<String> titles=new ArrayList<>();
public MainFragment(){
}
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_main, container, false);
this.mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
this.mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
mToolbar = (Toolbar) view.findViewById(R.id.toolbar_tabbar);
mToolbar.setTitle("琅琊榜");
((MainActivity)getActivity()).setToolBar(mToolbar);//将ToolBar的点击事件和DrawLayout关联起来
setupViewPager();
return view;
}
private void setupViewPager() {
titles.add(getResources().getString(R.string.item1));
titles.add(getResources().getString(R.string.item2));
titles.add(getResources().getString(R.string.item3));
titles.add(getResources().getString(R.string.item4));
titles.add(getResources().getString(R.string.item5));
pagerAdapter = new PagerAdapter(getChildFragmentManager(), getActivity(),titles);
mViewPager.setAdapter(pagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);//这一行代码很重要，将tablayout与viewpager关联起来，调用TabLayoutOnPageChangeListener。
//设置ViewPager滚动监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//更改页面后，通知Activity更改菜单选中项
((MainActivity)getActivity()).setMenuItem(position);
//mTabLayout.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void setPagerItem(int item){
mViewPager.setCurrentItem(item);
}
public void setTabSelect(int position){//选中侧滑菜单的item后，修改Fragment中tab和页面；
mTabLayout.getTabAt(position).select();
}
}