使用DrawerLayout完成滑动菜单的示例代码

用Toolbar编写自定义导航栏,在AndroidManifest.xml中你要编滑动菜单的界面处加入如下代码

<activity android:name=".DrawerLayoutActivity"
      android:theme="@style/NoTitle"></activity>

在values下的styles.xml中加入

<style name="NoTitle" parent="Theme.AppCompat.Light.NoActionBar">//隐藏原有导航栏
    //以下两条均为颜色的设置
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  </style>

新建两个布局文件(用于主布局文件的调用)
important.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">
  <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" />
  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/b" />
</LinearLayout>

left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/colorPrimary"
  android:padding="40dp">
  <de.hdodenhof.circleimageview.CircleImageView//将图片圆形化的控件(Design Support库中提供)
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:src="@drawable/cat"
    android:scaleType="centerCrop"
    android:layout_gravity="center"/>
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="你的小可爱"
    android:textSize="20sp"
    android:layout_gravity="center"/>
</LinearLayout>

将上面圆形化图片控件的库引入到项目中
在app/build.gradle的dependencies闭包中加入如下内容

dependencies {
  implementation fileTree(include: ['*.jar'], dir: 'libs')
  implementation 'androidx.appcompat:appcompat:1.2.0'
  implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
  implementation 'de.hdodenhof:circleimageview:2.1.0'//这是需要添加的
  testImplementation 'junit:junit:4.12'
  androidTestImplementation 'androidx.test.ext:junit:1.1.1'
  androidTestImplementation 'androidx.test.espresso:espressocore:3.2.0'
}

在res目录下新建一个menu文件夹,在menu文件夹下新建一个nav_menu.xml文件,这里的图片是事先准备好的

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  tools:showIn="navigation_view">
  <group android:checkableBehavior="single">
    <item
      android:id="@+id/nav_home"
      android:icon="@drawable/ic_menu_camera"
      android:title="Home" />
    <item
      android:id="@+id/nav_gallery"
      android:icon="@drawable/ic_menu_gallery"
      android:title="Gallery" />
    <item
      android:id="@+id/nav_slideshow"
      android:icon="@drawable/ic_menu_slideshow"
      android:title="Slideshow" />
    <item
      android:id="@+id/nav_tools"
      android:icon="@drawable/ic_menu_manage"
      android:title="Tools" />
  </group>
</menu>

主布局文件activity_drawer_layout.xml,我们用到了DrawerLayout 布局,这里面的NavigationView和上面的将图片圆形化的控件一样也需要将库引入到项目中

<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawer_layout"
  android:fitsSystemWindows="true"
  tools:openDrawer="start">
  <include
    layout="@layout/important"//引入上面编好的important.xml文件
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  <com.google.android.material.navigation.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/left"//引入上面编好的left.xml文件
    app:menu="@menu/nav_menu">//引入上面编好的nav_menu.xml文件
  </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

将上面NavigationView的库引入到项目中
在app/build.gradle的dependencies闭包中加入如下内容

dependencies {
  implementation fileTree(include: ['*.jar'], dir: 'libs')
  implementation 'androidx.appcompat:appcompat:1.2.0'
  implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
  implementation 'androidx.navigation:navigation-fragment:2.3.0'//这里是需要添加的
  implementation 'androidx.navigation:navigation-ui:2.3.0'//这里是需要添加的
  implementation 'de.hdodenhof:circleimageview:2.1.0'
  testImplementation 'junit:junit:4.12'
  androidTestImplementation 'androidx.test.ext:junit:1.1.1'
  androidTestImplementation 'androidx.test.espresso:espressocore:3.2.0'

在DrawerLayoutActivity.java中编写代码

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

public class DrawerLayoutActivity extends AppCompatActivity {
  private DrawerLayout mDrawerlayout;
  private ActionBar actionBar;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer_layout);
    mDrawerlayout=findViewById(R.id.drawer_layout);//得到DrawerLayout实例
    NavigationView navigationView=findViewById(R.id.nav_view);//获取到NavigationView实例
    Toolbar toolbar = findViewById(R.id.toolbar);//找到Toobar控件
    setSupportActionBar(toolbar);//用setSupportActionBar方法将导航栏设置为我们自定义的Toolbar
    actionBar=getSupportActionBar();//用getSupportActionBar()方法实例化导航栏(这里的导航栏就是我们自定义的Toolbar)
    if(actionBar!=null){
      actionBar.setDisplayHomeAsUpEnabled(true);//让左上角的导航按钮显示出来
      actionBar.setHomeAsUpIndicator(R.drawable.caidan);//设置导航按钮图标(图片是提前准备好的)
    }
    navigationView.setCheckedItem(R.id.nav_home);//调用NavigationView的setCheckedItem方法将Home菜单设置为默认选中
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//设置菜单选中事件的监听器
      @Override
      public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        mDrawerlayout.closeDrawers();//选中后关闭菜单
        return true;
      }
    });
  }
   @Override
  public boolean onOptionsItemSelected(@NonNull MenuItem item) {//加入的导航按钮的点击事件
    switch (item.getItemId()){
      case android.R.id.home:
        mDrawerlayout.openDrawer(GravityCompat.START);//调用DrawerLayout的openDrawer方法将菜单展示出来
        actionBar=null;
        break;
      default:
    }
    return true;
  }
 }

运行结果展示:


总结

到此这篇关于使用DrawerLayout完成滑动菜单的示例代码的文章就介绍到这了,更多相关DrawerLayout完成滑动菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android侧滑菜单控件DrawerLayout使用详解

    DrawerLayout是Android V4包下一个带有侧滑功能的布局控件,可以根据手势展开与隐藏侧边栏,也可以随着侧边栏的点击改变主界面区的内容.并且只需要按照DrawerLayout规定的布局格式进行布局,即可实现左右侧滑效果. 一.约定的抽屉布局 DrawerLayout的布局一般分为三个部分:第一部分为主界面内容布局,第二部分为左边侧滑界面布局,第三部分为右边侧滑界面布局.那么系统是怎么区分左边侧滑和右边侧滑的代码块的呢?请注意DrawerLayout布局中侧滑部分的代码块必须指定an

  • Android原生侧滑控件DrawerLayout使用方法详解

    在android的v4包中有一个控件 Drawerlayout,主要实现了左拉和右拉菜单,类似于之前的"抽屉"功能,此控件使用简单,效果很柔和,操作起来体验非常好,下面是我实现的一个简单效果的部分截图: 左拉: 右拉: 怎么样?是不是在平时开发的应用中很常见?OK,那么接下来我直接上代码: activity_sliding.xml: <?xml version="1.0" encoding="utf-8"?> <android.

  • Vue侧滑菜单组件——DrawerLayout

    本文介绍一个简单的DrawerLayout(类似Android的DrawerLayout)布局组件的实现,基于Vue.js.介绍的内容已经制作成 vue-drawer-layout 组件. 前言 大家有兴趣先用手机扫一扫这个二维码,或者点我 然后点击页面中左上角的头像打开drawer或者向右向左拖拽,就可以看到下面gif的效果,打开自己的手机QQ,是不是很像:) 谷歌官方把这种布局叫做DrawerLayout(抽屉式导航栏).那么我们要如何实现呢,好了正片开始! HTML结构 页面结构很简单,一

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

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

  • Android侧滑菜单之DrawerLayout用法详解

    onConfigurationChanged最早的时候实现侧滑菜单功能大多时候需要通过github上一个叫做SlidingMenu的开源通过依赖包来实现,后来谷歌在v4包中添加了DrawerLayout来实现这个功能,完全可以替代SlidingMenu,这里我们来学习DrawerLayout的用法 一)创建DrawerLayout 1)在布局文件里将布局设置为DrawerLaout,而且因为是v4包中的功能,所以必须写全包名,注意第一必须先写主视图布局,然后再写抽屉里的视图,这里我们放了List

  • Android中DrawerLayout+ViewPager滑动冲突的解决方法

    DrawerLayout 是 Android 官方的侧滑菜单控件,而 ViewPager 相信大家都很熟悉了.今天这里就讲一下当在 DrawerLayout 中嵌套 ViewPager 时,要如何解决滑动冲突的问题,效果如下: 首先,让我们先来解决 DrawerLayout 和 ViewPager 的侧滑事件冲突.当 DrawerLayout 中嵌套 ViewPager 时,侧滑默认是执行 DrawerLayout 的侧滑事件,因为 Android 的事件分发是从 外层 ViewGroup 向里

  • 使用DrawerLayout完成滑动菜单的示例代码

    用Toolbar编写自定义导航栏,在AndroidManifest.xml中你要编滑动菜单的界面处加入如下代码 <activity android:name=".DrawerLayoutActivity" android:theme="@style/NoTitle"></activity> 在values下的styles.xml中加入 <style name="NoTitle" parent="Theme.

  • selenium+java破解极验滑动验证码的示例代码

    摘要 分析验证码素材图片混淆原理,并采用selenium模拟人拖动滑块过程,进而破解验证码. 人工验证的过程 1.打开威锋网注册页面 2.移动鼠标至小滑块,一张完整的图片会出现(如下图1) 3.点击鼠标左键,图片中间会出现一个缺块(如下图2) 4.移动小滑块正上方图案至缺块处 5.验证通过 selenium模拟验证的过程 加载威锋网注册页面 下载图片1和缺块图片2 根据两张图片的差异计算平移的距离x 模拟鼠标点击事件,点击小滑块向右移动x 验证通过 详细分析 1.打开chrome浏览器控制台,会

  • PyQt5中QTableWidget如何弹出菜单的示例代码

    QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid.QTableWidget是QTableView的子类,它使用标准的数据模型,并且其单元数据是通过QTableWidgetItem对象来实现的,使用QTableWidget时就需要QTableWidgetItem.用来表示表格中的一个单元格,整个表格就是用各个单元格构建起来的 在PyQt5中,常需要对表格进行右击后弹出菜单,要实现这个操作就是两个问题:1. 如何弹出菜单.2. 如何在满足条件的情况下弹出菜

  • Qt自绘实现苹果按钮滑动效果的示例代码

    用到的类:QTimer,QPaintEvent,QPainter,QRectF 首先,重写绘制事件,需要在头文件加入QPaintEvent头文件,并定义几个变量. bool ison=false; float currentValue; float widthSize,heightSize; 然后加入如下代码: 思路就是鼠标点击,触发paintEvent函数 void MainWindow::mousePressEvent(QMouseEvent *event){ Q_UNUSED(event)

  • JavaScript中layim之整合右键菜单的示例代码

    一. 效果演示 1.1.好友右键菜单: 1.2.分组右键菜单: 1.3.群组右键菜单: 二. 实现教程 接下来我们以好友右键菜单为例,实现步骤如下: 2.1.绑定好友右击事件: /* 绑定好友右击事件 */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 过滤非右击事件 if(3 != e.which) { return; } // 不再派发事件 e.stopPropagation(); var o

  • SpringBoot mybatis 实现多级树形菜单的示例代码

    一.前言 iview-admin中提供了 v-org-tree这么一个vue组件可以实现树形菜单,下面小编来提供一下在element-ui中的使用教程(项目见:https://github.com/lison16/v-org-tree) 小编集成了el-dropdown下拉菜单(鼠标左击显示菜单),和右击自定义菜单,两种方式,效果图如下: 二.使用教程 (1)安装依赖 npm install clipboard npm install v-click-outside-x npm install

  • vue-router 基于后端permissions动态生成导航菜单的示例代码

    目录 Vue.js 1.注册全局守卫 2.Vuex状态管理 全局缓存routes 3.路由拦截 4.路由菜单 5.递归菜单vue组件 Vue.js vue-router vuex 1.注册全局守卫 核心逻辑 1.token身份验证(后端) => token失效返回登录页面 2.获取用户权限 3.校验permissions,动态添加路由菜单 router.beforeResolve 注册一个全局守卫.和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路

  • vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

    一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求. 借鉴其他项目,以及网上功能加以组合调整实现 按照标签实现方式步骤来(大致思路): 1,写一个tagNav标签组件 2,在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'} 3,在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据 4,在主页面上添加组件以及router-view外层添加keep-alive组件,我这边是main.vue为登录后主

  • 基于C#实现图片滑动验证码的示例代码

    目录 图片准备 合成目标 实现 1.创建项目 2.Nuget添加ImageSharp 3.vscode打开 4.引入图片 5.生成out_bg.jpg 6.生成out_slider.png 全部代码 最后 图片准备 hole.png和slider.png为png是因为图片带有透明度. 合成目标 最终为前端生成两张图片: out_slider.png高度为344与背景图等高. 也可以打开滑动验证Demo页面,F12来观察图片. 实现 本机环境为.net 6.0.300-preview.22204.

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

随机推荐