Android中DrawerLayout实现侧滑菜单效果

众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效果了。
话不多说,先来发图以表我滴诚意:

开始写代码

DrawerLayout 是v4包里面的,所以项目里面需要添加v4包,具体怎么添加就不多说了,
NavigationView需要在build.gradle里面添加compile ‘com.android.support:design:25.1.0'

activity_main.xml

<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/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:openDrawer="start">

 <!-- 右边视图 -->
 <include
 layout="@layout/app_bar_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <!-- 左边菜单 -->
 <android.support.design.widget.NavigationView
 android:id="@+id/nav_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true"
 app:headerLayout="@layout/nav_header_main"
 app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

然后在res文件夹里面添加一个menu菜单文件夹,已经添加的就不用添加了

上面的代码里面NavigationView里面有个 app:menu=”@menu/activity_main_drawer”对应如下:
添加一个菜单文件,名字随意,我的是activity_main_drawer.xml

activity_main_drawer.xml

<?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/nav_camera"
  android:icon="@drawable/ic_menu_camera"
  android:title="第一行" />
 <item
  android:id="@+id/nav_gallery"
  android:icon="@drawable/ic_menu_gallery"
  android:title="第二行" />
 <item
  android:id="@+id/nav_slideshow"
  android:icon="@drawable/ic_menu_slideshow"
  android:title="第三行" />
 <item
  android:id="@+id/nav_manage"
  android:icon="@drawable/ic_menu_manage"
  android:title="第四行" />
 </group>

 <item android:title="Communicate">
 <menu>
  <item
  android:id="@+id/nav_share"
  android:icon="@drawable/ic_menu_share"
  android:title="第五行" />
  <item
  android:id="@+id/nav_send"
  android:icon="@drawable/ic_menu_send"
  android:title="第六行" />
 </menu>
 </item>

</menu>

再添加一个布局

上面的代码里面app:headerLayout=”@layout/nav_header_main”对应如下:
添加一个布局,名字是nav_header_main.xml

nav_header_main.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:layout_width="match_parent"
 android:layout_height="@dimen/nav_header_height"
 android:background="@drawable/side_nav_bar"
 android:gravity="bottom"
 android:orientation="vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:theme="@style/ThemeOverlay.AppCompat.Dark">

 <ImageView
 android:id="@+id/imageView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingTop="@dimen/nav_header_vertical_spacing"
 app:srcCompat="@android:drawable/sym_def_app_icon" />

 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingTop="@dimen/nav_header_vertical_spacing"
 android:text="哈哈哈"
 android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="123456789@qq.com" />

</LinearLayout>

MainActivity:

public class MainActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener {

 private LinearLayout right;
 private NavigationView left;
 private boolean isDrawer=false;
 private DrawerLayout drawer;

 @Override
 public int getLayoutId() {
 return R.layout.activity_main;
 }

 @Override
 public void initPresenter() {

 }

 @Override
 public void initView() {
 drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

 right = (LinearLayout) findViewById(R.id.right);
 left = (NavigationView) findViewById(R.id.nav_view);

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

 right.setOnTouchListener(new View.OnTouchListener() {
  @Override
  public boolean onTouch(View view, MotionEvent motionEvent) {
  if(isDrawer){
   return left.dispatchTouchEvent(motionEvent);
  }else{
   return false;
  }
  }
 });
 drawer.setDrawerListener(new DrawerLayout.DrawerListener() {
  @Override
  public void onDrawerSlide(View drawerView, float slideOffset) {
  isDrawer=true;
  //获取屏幕的宽高
  WindowManager manager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
  Display display = manager.getDefaultDisplay();
  //设置右面的布局位置 根据左面菜单的right作为右面布局的left 左面的right+屏幕的宽度(或者right的宽度这里是相等的)为右面布局的right
  right.layout(left.getRight(), 0, left.getRight() + display.getWidth(), display.getHeight());
  }
  @Override
  public void onDrawerOpened(View drawerView) {}
  @Override
  public void onDrawerClosed(View drawerView) {
  isDrawer=false;
  }
  @Override
  public void onDrawerStateChanged(int newState) {}
 });

 }

 @Override
 public void onBackPressed() {
 if (drawer.isDrawerOpen(GravityCompat.START)) {
  drawer.closeDrawer(GravityCompat.START);
 } else {
  super.onBackPressed();
 }
 }

 @SuppressWarnings("StatementWithEmptyBody")
 @Override
 public boolean onNavigationItemSelected(MenuItem item) {
 // Handle navigation view item clicks here.
 int id = item.getItemId();

 if (id == R.id.nav_camera) {
  // Handle the camera action
 } else if (id == R.id.nav_gallery) {

 } else if (id == R.id.nav_slideshow) {

 } else if (id == R.id.nav_manage) {

 } else if (id == R.id.nav_share) {

 } else if (id == R.id.nav_send) {

 }

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawer.closeDrawer(GravityCompat.START);
 return true;
 }

drawer.openDrawer(GravityCompat.START);//打开滑动菜单

drawer.closeDrawer(GravityCompat.START);//关闭滑动菜单

drawer.isDrawerOpen(GravityCompat.START);//判断滑动菜单是否打开

具体源码demo下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用DrawerLayout实现仿QQ双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家. 首先看看效果图: DrawerLayout用起来真的很方便,下面一起看看用法~ 2.DrawerLayout的使用 直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧

  • Android组件DrawerLayout仿网易新闻v4.4侧滑菜单

    概述 今天这篇博客将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下.那么,DrawerLayout是一个怎么的组件呢?我们知道,当我们使用Android上各类App的时候,是不是注意过App主页上通常有一个"侧滑菜单"?关于侧滑菜单的实现,我在前面博客里有一些介绍,想多些

  • 学习使用Material Design控件(二)使用DrawerLayout实现侧滑菜单栏效果

    本文介绍如何使用DrawerLayout和NavigationView实现侧滑菜单栏的效果. 效果如下: Layout布局 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+

  • Android Drawerlayout实现侧滑菜单效果

    本文实例为大家分享了Drawerlayout侧滑菜单的具体代码,供大家参考,具体内容如下 1.Drawerlayout的xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.and

  • Android使用DrawerLayout实现侧滑菜单效果

    一.概述 DrawerLayout是一个可以方便的实现Android侧滑菜单的组件,我最近开发的项目中也有一个侧滑菜单的功能,于是DrawerLayout就派上用场了.如果你从未使用过DrawerLayout,那么本篇博客将使用一个简单的案例带你迅速掌握DrawerLayout的用法. 二.效果图 三.代码实现 主布局activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

  • Android之侧滑菜单DrawerLayout的使用介绍

    在android support.v4 中有一个抽屉视图控件DrawerLayout.使用这个控件,可以生成通过在屏幕上水平滑动打开或者关闭菜单,能给用户一个不错的体验效果. DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏,主内容区的部分可以随着菜单的点击而变化.DrawerLayout其实是一个控件,跟LinearLayout差不多,直接使用即可. DrawerLayout属性 1.drawerPosition:指定 drawer 将从屏幕的一侧滑动. 2

  • Android中DrawerLayout实现侧滑菜单效果

    众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效果了. 话不多说,先来发图以表我滴诚意: 开始写代码 DrawerLayout 是v4包里面的,所以项目里面需要添加v4包,具体怎么添加就不多说了, NavigationView需要在build.gradle里面添加compile 'com.android.support:d

  • Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android UI实现SlidingMenu侧滑菜单效果

    本篇博客给大家分享一个效果比较好的侧滑菜单的Demo,实现点击左边菜单切换Fragment. 效果如下: 主Activity代码: package com.infzm.slidingmenu.demo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.View; import android.view.View.OnClickListener; import android

  • android实现左右侧滑菜单效果

    在android开发中,左右侧滑菜单的开发已成为我们现在开发的必备技术之一,再次之前,我没有做过相类似的demo,但是项目的开发有要求有这样的效果,而且大家都知道,虽然网上由开源的代码,但是不仅种类多,看着一个头两个大,而且代码不好分离.因此我们无法简化成自己的demo,为此,还查阅了很多别人的资料,最后做出了自己想要的效果,具体效果如下所示: 图1 左边菜单 图2 右边菜单 今天要做的是把两个效果结合在一起,左右侧滑菜单 话不多说,直接上代码: activity_main.xml: <Line

  • Android开源组件SlidingMenu侧滑菜单使用介绍

    现在很多android应用都有侧滑菜单,效果很不错. GitHub上有SlidingMenu的开源库,使用起来很方便. SlidingMenu GitHub地址:https://github.com/jfeinstein10/SlidingMenu.GitHub上说,Sliding结合ActionBarSherlock使用功能可以更丰富,ActionBarSherlock GitHub地址:https://github.com/JakeWharton/ActionBarSherlock 附csd

  • Android自定义ViewGroup实现侧滑菜单

    目录 前言 一.常用的几种交互方式 1.1 事件的拦截处理 1.2 自行处理事件的几种方式 1.3 子View的滚动与协调交互 1.4 ViewGroup之间的嵌套与协调效果 二.ViewDragHelper的侧滑菜单实现 三.回调与封装 后记 前言 前文我们理解了ViewGroup的测量与布局,但是并没有涉及到多少的交互逻辑,而 ViewGroup 的交互逻辑说起来范围其实是比较大的.从哪开始说起呢? 我们暂且把 ViewGroup 的交互分为几块知识区, 事件的拦截. 事件的处理(内部又分不

  • iOS中仿QQ侧滑菜单功能

    UITabBarController做QQ侧滑菜单效果: 首先要了解UITabBarController的层级结构: UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层. 所以我的思路是这样的: UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分: 在View1

  • Android_UI 仿QQ侧滑菜单效果的实现

    相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级 2.在布

随机推荐