先上一个效果图
可以看到 这是一个类似于QQ的侧滑菜单,这种效果有好多实现方式,但是今天来探讨一下V4包下的NavigationView。
需要指出的是NavigationView常常与DrawerLayout一起使用,想要使用这两个空间首先需要导入最新的V4包。
指定
compile 'com.android.support:design:22.2.0'
接下来看下布局
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/dl_drawer" xmlns:app="http://schemas.android.com/apk/res-auto"> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:clipToPadding="true"> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
DrawerLayout作为父布局,它的第一个view(FrameLayout)是指的中间的内容区域,而NavigationView则是侧拉出来的菜单。
需要着重介绍这三个属性android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"第一个是指侧拉菜单的显示位置,start代表在左边,end代表在右边。还有其他一些,大家可以试试。
第二个是指头布局,就是显示头像那块的布局。
第三个是菜单的选项。
下面给出app:menu="@menu/drawer"的布局
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_subheader" android:title="第一组"> <menu> <item android:id="@+id/navigation_sub_item_1" android:icon="@mipmap/ic_launcher" android:title="第一组——1" /> <item android:id="@+id/navigation_sub_item_2" android:icon="@mipmap/ic_launcher" android:title="第一组——2"/> </menu> </item> <item android:id="@+id/navigation_subheader2" android:title="第二组"> <menu> <item android:id="@+id/navigation_sub_item_3" android:icon="@mipmap/ic_launcher" android:title="第二组——1"/> <item android:id="@+id/navigation_sub_item_4" android:icon="@mipmap/ic_launcher" android:title="第二组——2"/> </menu> </item> </group> </menu>
最后就剩下在代码里调用NavigationView来实现它的点击事件了给出代码
mNavigationView.setItemIconTintList(null);//设置菜单图标恢复本来的颜色
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { switch (menuItem.getItemId()){ case R.id.navigation_sub_item_1: FragmentManager fm1 = getSupportFragmentManager(); FragmentTransaction ft1 = fm1.beginTransaction(); ft1.replace(R.id.fl_content,new OneFragment(mDrawerLayout));ft1.addToBackStack(null)
ft1.commit();
menuItem.setChecked(true); // 改变item选中状态 // setTitle(menuItem.getTitle()); Toast.makeText(MainActivity.this,"这是第1个item",Toast.LENGTH_SHORT).show(); mDrawerLayout.closeDrawers(); return true; case R.id.navigation_sub_item_2: FragmentManager fm2 = getSupportFragmentManager(); FragmentTransaction ft2 = fm2.beginTransaction(); ft2.replace(R.id.fl_content,new TwoFragment()); ft2.addToBackStack(null); ft2.commit(); menuItem.setChecked(true); // 改变item选中状态 // setTitle(menuItem.getTitle()); Toast.makeText(MainActivity.this,"这是第2个item",Toast.LENGTH_SHORT).show(); mDrawerLayout.closeDrawers(); return true; case R.id.navigation_sub_item_3: FragmentManager fm3 = getSupportFragmentManager(); FragmentTransaction ft3 = fm3.beginTransaction(); ft3.replace(R.id.fl_content,new ThreeFragment()); ft3.addToBackStack(null); ft3.commit(); menuItem.setChecked(true); // 改变item选中状态 // setTitle(menuItem.getTitle()); Toast.makeText(MainActivity.this,"这是第3个item",Toast.LENGTH_SHORT).show(); mDrawerLayout.closeDrawers(); return true; case R.id.navigation_sub_item_4: FragmentManager fm = getSupportFragmentManager(); FragmentTransaction ft = fm.beginTransaction(); ft.replace(R.id.fl_content,new FourFragment()); ft.addToBackStack(null); ft.commit(); menuItem.setChecked(true); // 改变item选中状态 // setTitle(menuItem.getTitle()); Toast.makeText(MainActivity.this,"这是第4个item",Toast.LENGTH_SHORT).show(); mDrawerLayout.closeDrawers(); return true; } return true; } });
命名空间加上xmlns:app="http://schemas.android.com/apk/res-auto"
好了最后给出源码http://download.csdn.net/detail/md_beijing/9543628