简单的通过DrawerLayout + NavigationView 实现侧滑效果。

简单的通过DrawerLayout + NavigationView 实现侧滑效果。

在这里插入图片描述

这里的实现实际上有两个问题存在:
1. 只能拖拽边缘才能拖拽出菜单,这个暂时没有解决。
2. 点击菜单item会使主界面回来如下图,这里问题可以通过不使用Menu解决,这里没有提供。
在这里插入图片描述
以下,代码:

MainActivity

package com.example.qxb_810.qqdemohuadong;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.NestedScrollView;
import android.support.v7.app.AppCompatActivity;
import android.view.Display;
import android.view.DragEvent;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.ll_main)
    LinearLayout llMain;
    @BindView(R.id.nv_menu)
    NavigationView nv_menu;
    @BindView(R.id.dl_content)
    DrawerLayout dlContent;
    @BindView(R.id.tv_main)
    TextView tvMain;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
        initEvent();
    }

    private void initView() {
        // 动态添加按钮
        Menu menu = nv_menu.getMenu();
        menu.add(Menu.NONE, Menu.FIRST + 3, 1, "动态添加").setIcon(R.drawable.ic_launcher_background);
    }

    private void initEvent() {

        tvMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (dlContent.isDrawerOpen(Gravity.LEFT)) {
                    dlContent.closeDrawer(Gravity.LEFT);
                } else {
                    dlContent.openDrawer(Gravity.LEFT);
                }
            }
        });

        // 监听滑动的方法,通过此方法时侧边栏滑动出来时主页面跟着滑动而不是覆盖  -- 点击Menu item时会失效
        dlContent.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                // 获取屏幕宽高
                WindowManager windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
                Display display = windowManager.getDefaultDisplay();  //设置右面的布局位置  根据左面菜单的right作为右面布局的left   左面的right+屏幕的宽度(或者right的宽度这里是相等的)为右面布局的right
                DisplayMetrics metrics = new DisplayMetrics();
        		display.getMetrics(metrics);
                llMain.layout(nv_menu.getRight(), 0, nv_menu.getRight() + metrics.widthPixels, metrics.heightPixels);

            }

            @Override
            public void onDrawerOpened(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerClosed(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
        
    }
}

MainActivity对应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.v4.widget.DrawerLayout
        android:id="@+id/dl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/ll_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/main"
            android:gravity="center"
            >
            <TextView
                android:id="@+id/tv_main"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="主界面"
                android:textSize="50dp" />
        </LinearLayout>

        <!--layout_gravity 决定侧滑方向,左侧滑或者右侧滑-->
        <android.support.design.widget.NavigationView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_gravity="left"
            android:id="@+id/nv_menu"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/menu_head"
            app:menu="@menu/menu_content">
        </android.support.design.widget.NavigationView>
        
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

Menu_Content布局

<?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">

    <!--
        orderInCategory 排列序号数值越大,级别越低
        icon 图标
        title 文字内容
        showAsAction 展示方式
    -->

    <item android:id="@+id/menu_one"
        android:orderInCategory="1"
        android:icon="@color/colorAccent"
        android:title="one"
        app:showAsAction="always"></item>

    <item android:id="@+id/menu_two"
        android:orderInCategory="2"
        android:icon="@color/main"
        android:title="two"
        app:showAsAction="always"></item>
</menu>

菜单头布局太简单,就一个TextView就不给出。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫吻鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值