侧滑-导航栏设计风格NavigationDrawer的使用
我们做抽屉菜单的时候，左边滑出来的那一部分的布局都是由我们自己来定义的，自己写的话，花点时间也能做出来好看的侧拉菜单，但总是要耗费时间，于是Google在5.0之后推出了NavitationView，就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu，这样的效果如果我们要自己写肯定也能写出来，但是没有必要，既然Google提供了这个控件，那我们就来看看这个控件要怎么用吧。
使用之前还需要添加依赖，还需要隐藏原本的actionBar,使用toolbar替换掉：
compile 'com.android.support:design:24.2.0'
MainActivity.java
import android.os.Bundle; import android.support.design.widget.NavigationView; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.MenuItem; import android.view.View; import android.view.Window; import android.widget.Toast; /** * 用android.support.v7.widget.Toolbar替换ActionBar,所以需要隐藏原有的标题头: 方法1.设置App主题为:Theme.AppCompat.Light.NoActionBar 方法2. supportRequestWindowFeature(Window.FEATURE_NO_TITLE)去掉了默认的导航栏（如果是继承了AppCompatActivity的， 如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) ） */ public class MainActivity extends AppCompatActivity { /** * 导航栏布局对象,包括布局头与菜单项,左侧侧滑的内容 */ private NavigationView navigationView; /** * 抽屉布局 */ private DrawerLayout drawerLayout; /** * 替代活动条的toolBar */ private Toolbar toolBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去掉默认的导航栏,因为要显示ToolBar supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); navigationView = (NavigationView) findViewById(R.id.navigation); toolBar = (Toolbar) findViewById(R.id.toolbar); //让图片显示他本身的颜色,不然图片都会为灰色(没选中的情况下,菜单布局中有说明) navigationView.setItemIconTintList(null); //获取头布局文件,为头布局中的控件设置单击事件 View headerView = navigationView.getHeaderView(0); headerView.findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "点击了头布局(图片)", Toast.LENGTH_SHORT).show(); } }); //导航页里菜单项的单击事件 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { switch (menuItem.getItemId()){ case R.id.menu1: Toast.makeText(MainActivity.this, "点击了选项1", Toast.LENGTH_SHORT).show(); break; default: break; } drawerLayout.closeDrawers(); // 关闭导航菜单 return true; } }); //实现Toolbar与DrawLayout动画的联动 toolBar.setTitle("toolbar的title"); setSupportActionBar(toolBar);//替换默认的活动条 getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示返回键 getSupportActionBar().setHomeButtonEnabled(true); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolBar,0,0); drawerLayout.addDrawerListener(toggle);//为抽屉滑出的监听添加触发器 toggle.syncState();//加上同步 } }
布局文件activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffcccc" android:id="@+id/toolbar"> </android.support.v7.widget.Toolbar> <!-- 侧滑菜单的布局 打个id就会自动出现xmlns属性 注意事项： 1.主内容视图一定要是DrawerLayoout的第一个子视图 2.主内容视图宽度和高度匹配父视图，即 match_parent 3.必须显示指定抽屉视图(如ListView)的layout_gravity属性 1)、属性设为"start"时，从左向右滑出菜单 2)、属性设为"end"时，从右向左滑出菜单 3)、不推荐使用"left"和"right" 4.抽屉视图的宽度以dp为单位，请不要超过320dp(为了总能看到一些主内容)--> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 主视图 --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="主视图" android:textSize="40sp" android:gravity="center"/> </FrameLayout> <!-- 左侧的侧滑菜单 layout_gravity="start"代表侧滑在左边 android:choiceMode="singleChoice" 单选模式 注意其中NavigationView的两个属性 app:headerLayout接收一个layout，作为导航菜单顶部的头布局，可选项。 app:menu接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。 但也可以在运行时动态改变menu属性。 1.app:itemBackground="@color/colorAccent"设置每一个item的背景颜色 2.app:itemTextColor=""设置每个item的文字颜色(所有的菜单项颜色都会变)--> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/main_menu" app:itemTextColor="#000000"/> </android.support.v4.widget.DrawerLayout> </LinearLayout>
侧滑菜单中的头布局drawer_header.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:id="@+id/imageView" android:gravity="center" android:background="@drawable/title_bg" android:scaleType="centerCrop" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
侧滑菜单中的菜单布局,main_menu.xml
<!--checked="true"的item将会高亮显示，这可以确保用户知道当前选中的菜单项是哪个。 item的选中状态可以在代码中设置 checkableBehavior代表选择的行为,这里为单选--> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <!--有group就会有分割线了 android:checked="true" 在菜单项中图片就会显示为蓝色 false就会为灰色 所以会导致图片全部为灰色,解决办法: 方法1.在布局文件中添加app:itemIconTint="@color/blue"属性，表示设置图片的颜色全都为蓝色 方法2.在java代码中:NavigationView navigationView = (NavigationView)findViewById(R.id.navigation_view); navigationView.setItemIconTintList(null); --> <group android:id="@+id/group1"> <item android:id="@+id/menu1" android:icon="@drawable/f000" android:title="选项1"/> <item android:id="@+id/menu2" android:icon="@drawable/f001" android:title="选项2"/> </group> <item android:id="@+id/menu3" android:icon="@drawable/f002" android:title="选项3"/> <item android:id="@+id/menu4" android:icon="@drawable/f003" android:title="选项4"/> <!--有group就会有分割线了--> <group android:id="@+id/group2"> <item android:id="@+id/menu5" android:icon="@drawable/f004" android:title="选项5"/> <item android:id="@+id/menu6" android:icon="@drawable/f006" android:title="选项6"/> </group> <item android:title="作为文本显示1"> <menu> <item android:id="@+id/subitem_01" android:icon="@mipmap/ic_launcher" android:title="SubItem01" /> <item android:id="@+id/subitem_02" android:icon="@mipmap/ic_launcher" android:title="SubItem02" /> </menu> </item> <item android:title="作为分割显示2"> <menu> <item android:id="@+id/subitem_04" android:icon="@mipmap/ic_launcher" android:title="SubItem04" /> <item android:id="@+id/subitem_05" android:icon="@mipmap/ic_launcher" android:title="SubItem05" /> </menu> </item> </menu>
效果图
