开发App抽屉功能,彻底掌握了吗?

简介: 在平时开发中,带有抽屉效果的App,应该还是挺多,今天就来看看这个效果是如何实现的,我们用DrawerLayout控件来实现!

DrawerLayout效果图


运行效果图:

2.gif

DrawerLayout 的介绍


DrawerLayout的官方文档介绍链接:http://androiddoc.qiniudn.com/reference/android/support/v4/widget/DrawerLayout.html 

DrawerLayout 类的结构图如下:

92.jpg

官方中文简介大概如下:

DrawerLayout作为窗口内容的顶层容器,允许从窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。

抽屉定位和布局使用android:layout_gravity 子视图对应的属性进行控制,对应于您希望抽屉从哪个侧面出现:左侧或右侧(或支持布局方向的平台版本上的开始/结束)。请注意,您只能窗口的每个垂直边缘的一个抽屉视图。如果您的布局在窗口的每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。

3DrawerLayout 的使用


一般使用 DrawerLayout 侧滑菜单,可以通过 Toolbar + DrawerLayout来实现。

在res/layout 中,新建一个toolbar.xml文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/tl_custom"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:minHeight="?attr/actionBarSize"
   android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
   app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>

在新建一个drawerlayout.xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/dl_left"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <!--主布局-->
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </LinearLayout>
   <!--侧滑菜单-->
   <RelativeLayout
       android:layout_width="180dp"
       android:clickable="true"
       android:layout_height="match_parent"
       android:layout_gravity="left"
       android:background="#fff"
       >

       <LinearLayout
           android:id="@+id/ll_home_navigation_top"
           android:layout_width="match_parent"
           android:layout_height="120dp"
           android:layout_alignParentTop="true"
           android:background="@color/colorPrimary"
           android:gravity="center"
           android:orientation="vertical">

           <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:src="@mipmap/ic_launcher" />
       </LinearLayout>

       <ListView
           android:id="@+id/lv_left_menu"
           android:layout_below="@id/ll_home_navigation_top"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:divider="@null"
           android:text="DrawerLayout" />
   </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

主布局activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">
   <!--Toolbar-->
   <include layout="@layout/toolbar" />
   <!--DrawerLayout-->
   <include layout="@layout/drawerlayout" />
</LinearLayout>

MainActivity.java:

public class MainActivity extends AppCompatActivity {    
protected boolean statusBarCompat = true;    
   private static long DOUBLE_CLICK_TIME = 0L;    //声明相关变量
   private Toolbar toolbar;    
   private DrawerLayout mDrawerLayout;    
   private ActionBarDrawerToggle mDrawerToggle;    
   private ListView lvLeftMenu;    
   private String[] lvs = {"Android", "iOS", "Python", "Html5", "Java"};    
   private ArrayAdapter arrayAdapter;    @Override
   protected void onCreate(Bundle savedInstanceState) {        
   super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);        
   if (statusBarCompat) {
           StatusBarCompat.compat(this, ContextCompat.getColor(this, R.color.colorPrimary));
           transparent19and20();
       }
       findByIdViews(); //获取控件
       toolbar.setTitle("Drawerlayout");//设置标题
       toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色
       setSupportActionBar(toolbar);
       getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
       getSupportActionBar().setDisplayHomeAsUpEnabled(true);        //创建返回键,并实现打开关/闭监听
       mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {            
       @Override
           public void onDrawerOpened(View drawerView) {                
           super.onDrawerOpened(drawerView);
           }            @Override
           public void onDrawerClosed(View drawerView) {                
           super.onDrawerClosed(drawerView);
           }
       };
       mDrawerToggle.syncState();
       mDrawerLayout.addDrawerListener(mDrawerToggle);        //设置菜单列表
       arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
       lvLeftMenu.setAdapter(arrayAdapter);
       lvLeftMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {            
           @Override
           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               Toast.makeText(MainActivity.this, "点击"+position , Toast.LENGTH_SHORT).show();
           }
       });
   }    
   //返回键监听
   @Override
   public boolean onKeyDown(int keyCode, KeyEvent event) {        
   if (event.getKeyCode() == KeyEvent.KEYCODE_MENU && mDrawerLayout != null) {            
   if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
               mDrawerLayout.closeDrawer(Gravity.LEFT);
           } else {
               mDrawerLayout.openDrawer(Gravity.LEFT);
           }            return true;
       }  else if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {            
       if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
               mDrawerLayout.closeDrawer(Gravity.LEFT);
           } else {                if ((System.currentTimeMillis() - DOUBLE_CLICK_TIME) > 2000) {
                   Toast.makeText(MainActivity.this, "再按一次退出", Toast.LENGTH_SHORT).show();
                   DOUBLE_CLICK_TIME = System.currentTimeMillis();
               } else {
                   finish();
               }
           }            return true;
       }        return super.onKeyDown(keyCode, event);
   }    protected void transparent19and20() {        
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT
               && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
           getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
       }
   }    
       private void findByIdViews() {
       toolbar = (Toolbar) findViewById(R.id.tl_custom);
       mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
       lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
   }
}


本文的源码,直接公众号后台回复:侧滑,获取完整源码。


4总结


本文属于原创,如有转载,请标注原作者,版权归本公众号所有。如果你喜欢我写的文章请关注 程序IT圈  ,欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话,不妨点个赞或给个赞赏哈,您的支持就是我坚持原创的动力~

相关文章
|
12天前
|
Web App开发 前端开发 安全
语音交友app系统源码功能及技术研发流程剖析
语音交友App核心功能包括语音聊天(一对一、群聊、语音消息)、语音房间(直播、主题房、管理)、社交互动(好友、关注、打赏)、内容发现、音效美化、通知提醒及安全隐私等。开发流程涵盖需求分析、技术选型(前端、后端、数据库、实时通信)、UI/UX设计、前后端开发、实时通信集成、音效处理、测试优化、部署上线及运营维护,确保稳定高效运行并持续优化用户体验。
|
12天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
144 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
27 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
12天前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
939 14
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
10天前
|
开发框架 缓存 搜索推荐
PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
嗨,大家好,我是小华同学。PiliPala 是一个基于 Flutter 开发的 BiliBili 第三方客户端,提供流畅、个性化的使用体验。核心功能包括视频浏览与推荐、用户互动、丰富的播放设置、多维度搜索和个性化主题等。相比官方客户端,PiliPala 功能更丰富、性能更优、界面更美观。
63 14
|
13天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
68 8
|
9天前
|
安全 JavaScript 前端开发
小游戏源码开发之可跨app软件对接是如何设计和开发的
小游戏开发团队常需应对跨平台需求,为此设计了成熟的解决方案。流程涵盖游戏设计、技术选型、接口设计等。首先明确游戏功能与特性,选择合适的技术架构和引擎(如Unity或Cocos2d-x)。接着设计通用接口,确保与不同App的无缝对接,并制定接口规范。开发过程中实现游戏逻辑和界面,完成登录、分享及数据对接功能。最后进行测试优化,确保兼容性和性能,发布后持续维护更新。
|
11天前
|
前端开发 Java 测试技术
语音app系统软件源码开发搭建新手启蒙篇
在移动互联网时代,语音App已成为生活和工作的重要工具。本文为新手开发者提供语音App系统软件源码开发的启蒙指南,涵盖需求分析、技术选型、界面设计、编码实现、测试部署等关键环节。通过明确需求、选择合适的技术框架、优化用户体验、严格测试及持续维护更新,帮助开发者掌握开发流程,快速搭建功能完善的语音App。
|
UED 数据管理 安全
如何分析APP功能需求、结构
<p><br></p> <p style="text-align:center"><span style="font-size:24px; color:#3366ff">如何分析APP功能需求、结构</span><br></p> <p></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-
3874 0
|
28天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    27
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 6
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    144
  • 7
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    63
  • 8
    语音app系统软件源码开发搭建新手启蒙篇
    45
  • 9
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    939
  • 10
    语音交友app系统源码功能及技术研发流程剖析
    39