侧滑菜单（二）NavigationView的简单使用

上一次我们使用了DrawerLayout来实现侧滑，http://blog.csdn.net/sinat_35159441/article/details/77249450，现在我们在上次的基础上，使用DrawerLayout结合NavigationView来实现侧滑菜单。

先看效果：

步骤如下：

一：在gradle中进行配置

因为NavigationView是design包下的，所有我们要在gradle中引入这个包。

dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {        exclude group: 'com.android.support', module: 'support-annotations'    })    compile 'com.android.support:appcompat-v7:24.2.1'    compile 'com.android.support:design:24.2.1'    testCompile 'junit:junit:4.12'    compile 'de.hdodenhof:circleimageview:2.1.0'}

二：在布局文件中引入NavigationView

布局文件如下:

<?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: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="50dp"        android:background="?attr/colorPrimary"        app:title="侧滑菜单" />    <android.support.v4.widget.DrawerLayout        android:id="@+id/drawlayout"        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.NavigationView            android:id="@+id/navi"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_gravity="start"            app:menu="@menu/navi_menu"            app:headerLayout="@layout/head_layout"            >        </android.support.design.widget.NavigationView>        <TextView            android:background="@color/colorPrimary"            android:gravity="center"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="这是主界面"/>    </android.support.v4.widget.DrawerLayout></LinearLayout>

可以看到NavigationView的根标签下有两个属性 app:menu=”@menu/navi_menu”
app:headerLayout=”@layout/head_layout”

意思是指定侧滑菜单中的头和菜单和下方的菜单，我们从上面的效果图可以看到侧滑菜单分为了两部分，上面的头和下面的菜单。分别指定其资源文件即可。

2.1、head的布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="30dp">    <de.hdodenhof.circleimageview.CircleImageView        android:id="@+id/image"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_centerVertical="true"        android:src="@drawable/photo" />    <TextView        android:id="@+id/name"        android:layout_centerVertical="true"        android:layout_toRightOf="@+id/image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="UserName:hmc" />    <TextView        android:layout_toRightOf="@+id/image"        android:layout_centerHorizontal="true"        android:layout_below="@+id/name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Mail:121.com" /></RelativeLayout>

2.2、menu的布局文件

创建文件res–>menu–>navi_menu.xml

<?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/call"            android:icon="@drawable/nav_call"            android:title="Call" />        <item            android:id="@+id/friends"            android:icon="@drawable/nav_friends"            android:title="Friends" />        <item            android:id="@+id/location"            android:icon="@drawable/nav_call"            android:title="Call" />        <item            android:id="@+id/Mail"            android:icon="@drawable/nav_mail"            android:title="Call" />        <item android:title="其他">            <menu>                <item                    android:id="@+id/setting"                    android:icon="@drawable/ic_dashboard"                    android:title="设置" />                <item                    android:id="@+id/about"                    android:icon="@drawable/ic_event"                    android:title="关于我们" />            </menu>        </item>    </group></menu>

可以看到item里面还可以嵌套menu，实现的效果可见上面的效果图，以一条横线来区分一般的item和嵌套menu的item。

三：代码实现、

public class MainActivity extends AppCompatActivity {    Toolbar toolbar;    ActionBarDrawerToggle toggle;    DrawerLayout drawerLayout;    NavigationView navi;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        drawerLayout = (DrawerLayout) findViewById(R.id.drawlayout);        navi = (NavigationView) findViewById(R.id.navi);        //固定写法，让侧滑的开关与侧滑状态进行绑定        toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);        toggle.syncState();        drawerLayout.addDrawerListener(toggle);        //修改默认显示的icon        ActionBar ab = getSupportActionBar();        ab.setHomeAsUpIndicator(R.drawable.nav_mail);        ab.setDisplayHomeAsUpEnabled(true);//修改默认选中的条目//navi.setCheckedItem(R.id.friends);//子条目的点击事件        navi.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()) {                    case R.id.location:                        break;                }                drawerLayout.closeDrawers();                return true;            }        });    }}

需要注意的有两点：默认显示的三条横杠是可以自定义的，可以设置自条目的点击事件。