滑动菜单DrawerLayout+NavigationView

本文主要是介绍滑动菜单DrawerLayout+NavigationView，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

滑动菜单DrawerLayout+NavigationView

首先展示一下最终实现的效果：

实现第一步

关于自定义标题的实现请看上一篇 自定义标题Toolbar的实现.
首先在Moudle中的build.gradle中添加两行依赖：

implementation 'com.android.support:design:28.0.0'
implementation 'de.hdodenhof:circleimageview:2.1.0'

因为我的v7包版本为28.0.0，所以我的design也为28.0.0。

implementation 'com.android.support:appcompat-v7:28.0.0'

第二行依赖用来实现图片圆形化功能，它的第三方库地址为：https://github.com/hdodenhof/CircleImageView 。

实现第二步

1. 修改activity_main.xml布局
2. 新建布局文件nav_header.xml
3. 新建nav_menu.xml菜单

第一步修改activity_main.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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/mDrawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_height="?attr/actionBarSize"android:layout_width="match_parent"android:background="@color/colorPrimary"app:titleTextColor="@color/colorRed"/><!--其中的 app:titleTextColor="@color/colorRed"是我自己在color中设置了颜色属性值为#F00--><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></LinearLayout>//从这里开始为DrawerLayout第二部分，第一部分里的内容显示在activity_main.xml的主界面上
<android.support.design.widget.NavigationViewandroid:id="@+id/nav_design"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

代码中的NavigationView就是我们准备实现菜单项与头部所需要的控件，其中如下代码

app:headerLayout="@layout/nav_header"

表示这个控件所使用的头布局文件为nav_header.xml。
而菜单项的实现与各个菜单项按钮的控件都在nav_menu.xml这个文件中。

app:menu="@menu/nav_menu"

其中用的背景颜色代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources><color name="colorPrimary">#008577</color><color name="colorPrimaryDark">#00574B</color><color name="colorAccent">#D81B60</color><color name="colorRed">#F00</color><color name="colorBlack">#000</color>
</resources>

第二步在Layout中新建头布局文件nav_header.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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="180dp"android:padding="10dp"android:orientation="horizontal"android:background="#80FFFF">
<de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/image_header"android:layout_width="70dp"android:layout_height="70dp"android:src="@drawable/newsicon"android:layout_centerVertical="true"/>//图片来源里可以放置自己喜欢的图片<LinearLayoutandroid:layout_width="wrap_content"android:orientation="vertical"android:layout_height="wrap_content"><TextViewandroid:id="@+id/text_header"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="可以自己设置东西"android:textStyle="bold"android:textColor="@color/colorBlack"/><TextViewandroid:id="@+id/text_vis"android:layout_marginTop="10dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="个人博客地址：https://blog.csdn.net/Tobey_r1"android:textStyle="bold"android:textColor="@color/colorBlack"/></LinearLayout>
</LinearLayout>

头部文件效果图如下：

第三步新建菜单项文件nav_menu.xml

在res/中新建一个menu文件夹，里面添加我们要实现的菜单项menu。代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><item android:id="@+id/nav_one"android:icon="@drawable/ic_nav_one"android:title="激活会员"/>//icon中的图标drawable图片是我右键new一个vector Asset选择的图片。<item android:id="@+id/nav_two"android:title="QQ钱包"/><item android:id="@+id/nav_three"android:title="个性装扮"/><item android:id="@+id/nav_four"android:title="我的文件"/></group>
</menu>

其中的设置group的checkable值为single，表示单此选中一个，待会在java代码中也会有体现。

    <group android:checkableBehavior="single"></group>

效果图如下：

实现第三步

修改MainActivity代码，代码如下：

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {private android.support.v7.widget.Toolbar toolbar;private DrawerLayout mDrawerLayout;private NavigationView navigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar =  findViewById(R.id.toolbar);mDrawerLayout = (DrawerLayout) findViewById(R.id.mDrawerLayout); //获取抽屉布局navigationView = (NavigationView) findViewById(R.id.nav_design);//获取菜单控件实例}@Overrideprotected void onStart() {super.onStart();toolbar.setLogo(R.drawable.icon);//设置图片logo,你可以添加自己的图片toolbar.setTitle("主标题");toolbar.setSubtitle("副标题");setSupportActionBar(toolbar);ActionBar actionBar = getSupportActionBar();if (actionBar !=null){//通过HomeAsUp来让导航按钮显示出来actionBar.setDisplayHomeAsUpEnabled(true);//设置Indicator来添加一个点击图标    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_home);}navigationView.setCheckedItem(R.id.nav_one); //设置第一个默认选中navigationView.setNavigationItemSelectedListener(new  NavigationView.OnNavigationItemSelectedListener() {//设置菜单项的监听事件@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {mDrawerLayout.closeDrawers();switch (menuItem.getItemId()) {case R.id.nav_one://每个菜单项的点击事件，通过Intent实现点击item简单实现活动页面的跳转。Intent intent = new Intent(MainActivity.this, Main2Activity.class);//第二个Main2Activity.class需要你自己new一个 Activity来做出其他功能页面   startActivity(intent);break;case R.id.nav_two:Toast.makeText(MainActivity.this, "你点击了钱包", Toast.LENGTH_SHORT).show();break;case R.id.nav_three:Toast.makeText(MainActivity.this, "你点击了装扮", Toast.LENGTH_SHORT).show();break;case R.id.nav_four:Toast.makeText(MainActivity.this, "你点击了设置", Toast.LENGTH_SHORT).show();break;default:}return true;}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){//R.id.home修改导航按钮的点击事件为打开侧滑栏case android.R.id.home:mDrawerLayout.openDrawer(GravityCompat.START);  //打开侧滑栏break;default:}return true;}
}

到此，本篇关于滑动侧滑栏菜单的实现已经基本实现。

个人GitHub链接地址: https://github.com/ziruiliu1.

这篇关于滑动菜单DrawerLayout+NavigationView的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---