Android--NavigationView+DrawerLayout实现侧滑(仿QQ)

简介: 版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/79271880 1、首先导包[java] view plain copy print?compile 'com.
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/79271880

1、首先导包

[java]  view plain  copy
 print ?
  1. 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);

目录
相关文章
|
4月前
|
Android开发
Android使用DrawerLayout仿qq6.6版本侧滑效果
Android使用DrawerLayout仿qq6.6版本侧滑效果
36 0
|
5月前
|
API Android开发 容器
36. 【Android教程】侧滑菜单:DrawerLayout
36. 【Android教程】侧滑菜单:DrawerLayout
86 1
|
6月前
|
Android开发
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
45 0
|
6月前
|
Android开发
[Android]DrawerLayout滑动菜单+NavigationView
[Android]DrawerLayout滑动菜单+NavigationView
76 0
|
6月前
|
XML Java Android开发
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
477 0
|
前端开发 API Android开发
Android侧滑踩坑记(仿IOS侧滑finish页面基于Slidr库)
Android侧滑踩坑记(仿IOS侧滑finish页面基于Slidr库)
281 0
|
XML Android开发 数据格式
【Android】DrawerLayout抽屉布局的写法
抽屉布局就类似那种侧拉出来的界面。 一个页面想要实现抽屉布局很简单! 这个XML文件包含抽屉布局的代码。
137 0
|
XML JSON Java
Android 侧滑抽屉菜单
Android 侧滑抽屉菜单
465 1
Android 侧滑抽屉菜单
|
XML Android开发 数据格式
Android Support Design Library之NavigationView(一)
Android Support Design Library之NavigationView(一)
128 0
Android Support Design Library之NavigationView(一)
|
Android开发
Android Support Design Library之NavigationView(二)
Android Support Design Library之NavigationView(二)
90 0