滑动菜单DrawerLayout+NavigationView

最新推荐文章于 2023-12-11 06:00:00 发布

雪の星空朝酱

最新推荐文章于 2023-12-11 06:00:00 发布

阅读量1.3k

点赞数 4

文章标签：侧滑栏菜单实现头部简单圆形图片 DrawerLayot+NavigationView

本文链接：https://blog.csdn.net/Tobey_r1/article/details/92405625

版权

MaterialTest实习笔记（二）感谢郭神

滑动菜单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">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android: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-->
    <TextView
        android: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.NavigationView
    android: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.CircleImageView
    android:id="@+id/image_header"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@drawable/newsicon"
    android:layout_centerVertical="true"/>
    //图片来源里可以放置自己喜欢的图片
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">
    <TextView
        android:id="@+id/text_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="可以自己设置东西"
        android:textStyle="bold"
        android:textColor="@color/colorBlack"/>
    <TextView
        android: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;
    @Override
    protected 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);//获取菜单控件实例
    }
    @Override
    protected 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() {
        //设置菜单项的监听事件
            @Override
            public 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;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
        //R.id.home修改导航按钮的点击事件为打开侧滑栏
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);  //打开侧滑栏
                break;
                default:

        }
        return true;
    }
}