Android--NavigationView+DrawerLayout实现侧滑（仿QQ）-阿里云开发者社区

Android--NavigationView+DrawerLayout实现侧滑（仿QQ）

2018-02-06 1782

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

1、首先导包

[java]view plain copy
 print?
compile 'com.android.support:design:26.1.0'  

2、使用NavigationView

首先在主布局文件中使用DrawerLayout作为外包装，里面包含一个主页面和侧滑的菜单页面，而侧滑菜单页面用NavigationView实现，drawerLayout中包含了主页面和侧滑的菜单页面：

<?xml version="1.0" encoding="utf-8"?>  
<android.support.v4.widget.DrawerLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/activity_na"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.app.ui.MainActivity">  
    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:orientation="vertical">  
        <LinearLayout  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:background="@color/blue"  
            android:gravity="center_vertical"  
            android:orientation="horizontal">  
            <ImageView  
                android:id="@+id/main_menu"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:src="@mipmap/mm"  
                android:background="@color/blue"  
  
                android:layout_margin="20dp"/>  
            <TextView  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_weight="1"  
                android:text="Demo"  
                android:textColor="#ffffff"  
                android:textSize="20sp"  
                android:layout_marginLeft="16dp"/>  
            <ImageView  
                android:id="@+id/search"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:src="@mipmap/three"  
                android:background="@color/blue"  
                android:layout_margin="20dp"/>  
        </LinearLayout>  
        <TextView  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:text="主页"  
            android:textSize="22sp"  
            android:gravity="center"/>  
    </LinearLayout>  
    <android.support.design.widget.NavigationView  
        android:id="@+id/nav"  
        android:layout_gravity="left"  
        android:layout_width="wrap_content"  
        android:layout_height="match_parent"  
        android:fitsSystemWindows="true"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        app:headerLayout="@layout/head"  
        app:menu="@menu/new_menu"  
  
        >  
  
    </android.support.design.widget.NavigationView>  
</android.support.v4.widget.DrawerLayout>

head.xml

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    android:gravity="center"  
    android:background="@color/blue"  
    >  
    <ImageView  
        android:id="@+id/person"  
        android:layout_width="72dp"  
        android:layout_height="72dp"  
        android:layout_marginTop="42dp"  
        android:src="@drawable/touxiang"/>  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:textSize="20sp"  
        android:layout_marginTop="24dp"  
        android:textColor="#ffffff"  
        android:text="超宇"/>  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:textSize="16sp"  
        android:layout_marginTop="12dp"  
        android:textColor="#ffffff"  
        android:layout_marginBottom="18dp"  
        android:text="不忘初心，方得始终."/>  
</LinearLayout>

<?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/favorite"  
            android:icon="@drawable/huiyuan"  
            android:checkable="true"  
            android:title="    会员"/>  
  
    </group>  
    <item  
        android:id="@+id/wallet"  
        android:icon="@drawable/money"  
        android:title="    钱包"/>  
    <item  
        android:id="@+id/photo"  
        android:icon="@drawable/xiangce"  
        android:title="    相册"/>  
    <item  
        android:id="@+id/dress"  
        android:icon="@drawable/zhuangban"  
        android:title="    装扮"/>  
    <item  
        android:id="@+id/file"  
        android:icon="@drawable/wenjian"  
        android:title="    文件"/>  
  
</menu>

import android.os.Bundle;  
import android.support.annotation.NonNull;  
import android.support.design.widget.NavigationView;  
import android.support.v4.widget.DrawerLayout;  
import android.support.v7.app.AppCompatActivity;  
import android.view.MenuItem;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.Toast;  
  
public class MainActivity extends AppCompatActivity implements View.OnClickListener {  
  
    private DrawerLayout drawerLayout;  
    private NavigationView navigationView;  
    ImageView menu;  
    LinearLayout contentView ;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
  
        drawerLayout = (DrawerLayout) findViewById(R.id.activity_na);  
        navigationView = (NavigationView) findViewById(R.id.nav);  
        menu= (ImageView) findViewById(R.id.main_menu);  
        View headerView = navigationView.getHeaderView(0);//获取头布局  
        menu.setOnClickListener(this);  
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {  
            @Override  
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
                //item.setChecked(true);  
                Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();  
                drawerLayout.closeDrawer(navigationView);  
                return true;  
            }  
        });  
        //为DrawerLayout控件添加监听器  
        drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {  
            //当侧滑菜单正在滑动时触发的方法  
            /** 
             第一个参数：正在滑动的侧滑菜单 
             第二个参数：菜单滑动的宽度的百分比 
             **/  
            @Override  
            public void onDrawerSlide(View drawerView, float slideOffset) {  
                super.onDrawerSlide(drawerView, slideOffset);  
                //获得侧滑菜单的宽度  
                int drawerViewWidth = drawerView.getMeasuredWidth();  
                //根据滑动百分比计算内容部分应该向右边移动的距离  
                int marginLeft = (int)(drawerViewWidth * slideOffset) ;  
                //获得内容部分的View对象（内容View对象是第一个，所以是0）  
                contentView = (LinearLayout) drawerLayout.getChildAt(0);  
                //修改内容部分的左边距  
                contentView.setLeft(marginLeft);  
				//解决DrawerLayout不能全屏滑动的问题,displayWidthPercentage传 1，即可实现全屏滑动。
                // 如果你想让右侧菜单也是全屏，只要将对应的 "mLeftDragger" 改为 "mRightDragger"
                setDrawerLeftEdgeSize(MainActivity.this,drawerLayout,1);
            }  
        });  
    }  
  
  
    @Override  
    public void onClick(View v) {  
        switch (v.getId()){  
            case R.id.main_menu://点击菜单，跳出侧滑菜单  
                if (drawerLayout.isDrawerOpen(navigationView)){  
                    drawerLayout.closeDrawer(navigationView);  
                }else{  
                    drawerLayout.openDrawer(navigationView);  
                }  
                break;  
        }  
    }  
  
  
    @Override  
    public void onPointerCaptureChanged(boolean hasCapture) {  
  
    }  
	
	private void setDrawerLeftEdgeSize (Activity activity, DrawerLayout drawerLayout, float displayWidthPercentage) {
        if (activity == null || drawerLayout == null) return;
        try {
            // 找到 ViewDragHelper 并设置 Accessible 为true
            Field leftDraggerField =
                    drawerLayout.getClass().getDeclaredField("mLeftDragger");//Right
            leftDraggerField.setAccessible(true);
            ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout);

            // 找到 edgeSizeField 并设置 Accessible 为true
            Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");
            edgeSizeField.setAccessible(true);
            int edgeSize = edgeSizeField.getInt(leftDragger);

            // 设置新的边缘大小
            Point displaySize = new Point();
            activity.getWindowManager().getDefaultDisplay().getSize(displaySize);
            edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (displaySize.x *
                    displayWidthPercentage)));
        } catch (NoSuchFieldException e) {
        } catch (IllegalArgumentException e) {
        } catch (IllegalAccessException e) {
        }
    }
  
}

以上的此外，侧滑菜单头布局也可以设置点击事件，通过View head = navigtionview .getHeaderView实现，这里的点击事件我没有写，这里我还将状态栏的颜色改成了标题栏的颜色，达到整体的界面协调。具体实现方法可以参考文章http://blog.csdn.net/s1674521/article/details/59480114

思考如何关闭手势滑动？NavigationView的确没有相关关闭侧滑手势的属性，但是别忘了，drawerLayout却可以，通过以下属性可以关闭滑动手势操作：
在android抽屉开发中，需要关闭手势滑动，来滑出弹出框

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)//关闭手势滑动

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);//打开手势滑动

NavigationView Item图标不显示原始颜色解决办法：

navigationView.setItemIconTintList(null);

Android--NavigationView+DrawerLayout实现侧滑（仿QQ）

热门文章

最新文章

相关课程

相关电子书