仿QQ侧滑菜单（二）

最新推荐文章于 2021-09-10 11:46:14 发布

原创最新推荐文章于 2021-09-10 11:46:14 发布 · 307 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android studio #app #移动开发 #android

Android 专栏收录该内容

12 篇文章

订阅专栏

接着上一篇博客进行补充
先看上一篇博客，再看这一篇，比较容易理解https://blog.youkuaiyun.com/z_open/article/details/104198731

https://blog.youkuaiyun.com/z_open/article/details/104198731

Drawerlayout是一个布局，它允许放入两个直接子控件。
第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。

谷歌提供了一种更好的方法——Navgation View，它是design support库中提供的一个控件

第一步，添加依赖
在app/build.gradle文件中的dependencise闭包中添加一下代码

    //design support库依赖，用于左侧滑动菜单
    implementation 'com.google.android.material:material:1.0.0-rc01'
    //开源项目 实现图片圆形化功能
    implementation 'de.hdodenhof:circleimageview:2.2.0'

第二步，准备menu和headerLayout两个文件
menu是用来在Navgation View中显示具体的菜单项
headerLayout是用来在Navgation View中显示头部布局的

在menu文件夹下新建nav_menu.xml文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks" />
    </group>
</menu>

在< menu>标签中套嵌了< group>标签，group表示一个组；然后将group的checkableBehavio属性指定为single，表示组中的菜单项只能单选。
android：icon设置的是菜单项的图标，我已将图片放在drawable-xxhdpi目录下。

在layout目录下建nav_header.xml文件

<?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="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/logo"
        android:layout_centerInParent="true">
    </de.hdodenhof.circleimageview.CircleImageView>

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="1985647762@qq.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="blue"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

CircleImageView是一个将图片圆形化的控件，用法简单，和imageview完全一样。

第三步，完成activity_main.xml中代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

通过app:menu 和app:headerLayout将刚才设置的布局文件设置进去了。
这样就完成了布局了。

最后，设置点击事件。

NavigationView navigationView = findViewById(R.id.nav_view);

navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

活动代码块：
（如果有问题就自己修改下，或者留言给我。因为是在整个项目中拿出来的，没有再进行测试）

package com.example.yaya;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;

import com.example.yaya.auto_hide.login;
import com.example.yaya.auto_hide.register;
import com.google.android.material.navigation.NavigationView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import cn.bmob.v3.Bmob;

public class MainActivity extends AppCompatActivity {

    private Button button;
    private DrawerLayout mDrawerLayout;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        NavigationView navigationView = findViewById(R.id.nav_view);
        mDrawerLayout = findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.left_menu);
        }
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }
}