开发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圈  ,欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话,不妨点个赞或给个赞赏哈,您的支持就是我坚持原创的动力~

相关文章
|
4月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
916 139
|
4月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
451 137
|
4月前
|
小程序 视频直播 数据安全/隐私保护
如何在1v1视频直播交友APP中实现防录屏防截屏功能?
婚恋交友市场快速增长,1v1社交应用海外投放增86.49%,中东、东南亚及北美需求旺盛。用户偏好私密高效交流,国内“云相亲”兴起。开发需合规备案、实名认证,并防范诈骗。本文详解原生APP防录屏技术:Android通过MediaProjection检测,iOS监听UIScreen状态,结合动态水印、远程销毁等增强防护,平衡体验与安全。
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
643 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
537 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
555 11
|
4月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
263 0
|
4月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
309 154

热门文章

最新文章