Android 抽屉效果的导航菜单实现
抽屉效果的导航菜单
看了很多应用,觉得这种侧滑的抽屉效果的菜单很好。
不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西。
关于实现,搜索了一下,有如下两种:
1.用SlidingDrawer:
http://developer.android.com/reference/android/widget/SlidingDrawer.html
但是不知道为什么这个类官方不建议再继续用了:
Deprecated since API level 17
2.用DrawerLayout:
http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
Guide在这里:
http://developer.android.com/training/implementing-navigation/nav-drawer.html
库的引用
首先, DrawerLayout
这个类是在Support Library里的,需要加上android-support-v4.jar这个包。
然后程序中用时在前面导入import android.support.v4.widget.DrawerLayout;
如果找不到这个类,首先用SDK Manager更新一下Android Support Library,然后在Android SDK\extras\android\support\v4路径下找到android-support-v4.jar,复制到项目的libs路径,将其Add to Build Path.
代码1
布局:
<RelativeLayout 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.support.v4.widget.DrawerLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><!-- The main content view --><!-- main content must be the first element of DrawerLayout because it will be drawn first and drawer must be on top of it --><FrameLayoutandroid:id="@+id/content_frame"android:layout_width="match_parent"android:layout_height="match_parent" /><!-- The navigation drawer --><ListViewandroid:id="@+id/left_drawer"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="left"android:background="#111"android:choiceMode="singleChoice"android:divider="@android:color/transparent"android:dividerHeight="0dp" /></android.support.v4.widget.DrawerLayout></RelativeLayout>
DrawerLayout的第一个子元素是主要内容,即抽屉没有打开时显示的布局。这里采用了一个FrameLayout,里面什么也没放。
DrawerLayout的第二个子元素是抽屉中的内容,即抽屉布局,这里采用了一个ListView。
主要的Activity(从官方实例中扒出来的):
package com.example.hellodrawer;import android.os.Bundle; import android.app.Activity; import android.content.res.Configuration; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout;public class HelloDrawerActivity extends Activity {private String[] mPlanetTitles;private DrawerLayout mDrawerLayout;private ActionBarDrawerToggle mDrawerToggle;private ListView mDrawerList;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_hello_drawer);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);// init the ListView and Adapter, nothing new initListView();// set a custom shadow that overlays the main content when the drawer// opens mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,GravityCompat.START);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,R.drawable.ic_drawer, R.string.drawer_open,R.string.drawer_close){/** Called when a drawer has settled in a completely closed state. */public void onDrawerClosed(View view){invalidateOptionsMenu(); // creates call to// onPrepareOptionsMenu() }/** Called when a drawer has settled in a completely open state. */public void onDrawerOpened(View drawerView){invalidateOptionsMenu(); // creates call to// onPrepareOptionsMenu() }};// Set the drawer toggle as the DrawerListener mDrawerLayout.setDrawerListener(mDrawerToggle);// enable ActionBar app icon to behave as action to toggle nav drawergetActionBar().setDisplayHomeAsUpEnabled(true);// getActionBar().setHomeButtonEnabled(true);// Note: getActionBar() Added in API level 11 }private void initListView(){mDrawerList = (ListView) findViewById(R.id.left_drawer);mPlanetTitles = getResources().getStringArray(R.array.planets_array);// Set the adapter for the list viewmDrawerList.setAdapter(new ArrayAdapter<String>(this,R.layout.list_item, mPlanetTitles));// Set the list's click listenermDrawerList.setOnItemClickListener(new OnItemClickListener(){@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id){// Highlight the selected item, update the title, and close the// drawermDrawerList.setItemChecked(position, true);setTitle(mPlanetTitles[position]);mDrawerLayout.closeDrawer(mDrawerList);}});}@Overrideprotected void onPostCreate(Bundle savedInstanceState){super.onPostCreate(savedInstanceState);// Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState();}@Overridepublic void onConfigurationChanged(Configuration newConfig){super.onConfigurationChanged(newConfig);mDrawerToggle.onConfigurationChanged(newConfig);}@Overridepublic boolean onOptionsItemSelected(MenuItem item){// Pass the event to ActionBarDrawerToggle, if it returns// true, then it has handled the app icon touch eventif (mDrawerToggle.onOptionsItemSelected(item)){return true;}// Handle your other action bar items...return super.onOptionsItemSelected(item);}}
比较纠结的是用了Level 11的一个API,这样minSdkVersion就有限制,不能太低。
图片资源Android官网示例处提供下载了。
程序运行后效果如下:
抽屉打开前:
抽屉打开后:
代码2
今天又看了一下DrawerLayout的类,发现有很多方法可以直接用的。
重新试了一下,其实不用上面那么麻烦,随便自己定义一个按钮控制抽屉的打开就行:
布局:
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".DrawerActivity" ><android.support.v4.widget.DrawerLayoutandroid:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><!-- The main content view --><FrameLayoutandroid:id="@+id/content_frame"android:layout_width="match_parent"android:layout_height="match_parent" ><Buttonandroid:id="@+id/btn"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="open" /></FrameLayout><!-- The navigation drawer --><ListViewandroid:id="@+id/left_drawer"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#111"android:choiceMode="singleChoice"android:divider="@android:color/transparent"android:dividerHeight="0dp" /></android.support.v4.widget.DrawerLayout></RelativeLayout>
主要代码:
package com.example.hellodrawer;import android.os.Bundle; import android.app.Activity; import android.support.v4.widget.DrawerLayout; import android.view.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;public class DrawerActivity extends Activity {private DrawerLayout mDrawerLayout = null;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_drawer);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);Button button = (Button) findViewById(R.id.btn);button.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){// 按钮按下,将抽屉打开 mDrawerLayout.openDrawer(Gravity.LEFT);}});}}
参考资料
官方教程:
http://developer.android.com/design/patterns/navigation-drawer.html
http://developer.android.com/training/implementing-navigation/nav-drawer.html
其他参考资料:
http://blog.chengyunfeng.com/?p=493
http://my.eoe.cn/appadventure/archive/3826.html
Android 抽屉效果的导航菜单实现相关推荐
- Android 抽屉效果Demo
2019独角兽企业重金招聘Python工程师标准>>> Android 抽屉效果Demo. 转载:http://www.adobex.com/android/source/detai ...
- html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码 这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
- html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...
- 纯css实现蓝色圆角效果水平导航菜单代码
这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DO ...
- Android实现导航菜单左右滑动效果
本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果. 今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案. 第一种解决方案: 在以前的一篇博文中我使用andro ...
- OneBottomNavigationBar 可以凸起的导航菜单
温馨提示 写博客是为了记录在开发过程中所涉及到的技术以及遇到的问题的解决,如果该博客对您有所帮助,希望可以点个关注:如果您对文章中的内容有什么不同的见解,欢迎留言进行讨论.谢谢! OneBottomN ...
- android抽屉实现不同之处
相关链接: Android 抽屉效果Demo http://www.eoeandroid.com/thread-203886-1-1.html Android效果之 抽屉效果 http://www.e ...
- jq ajax写二级导航,jQuery实现二级导航菜单的示例
实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: 导航菜单案例 *{ paddin ...
- 【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
这篇文章,主要介绍Android如何利用DrawerLayout布局组件实现侧滑导航菜单的效果. 目录 一.侧滑菜单栏 1.1.效果演示 1.2.DrawerLayout布局介绍 (1)打开侧边栏
最新文章
- NIO Socket编程实例
- maven Ubuntu14.04 安装
- Nagios 网卡流量监控
- 文件,文件夹基本操作
- 光流 | OpenCV实现简单的optical flow(代码类)
- 有效的数独Python解法
- 201771010112罗松《面向对象程序设计(java)》第三周学习总结
- php jquery validate remote,jquery插件validate里面的remote参数用法
- xcode_8正式版安装遇到的小问题
- vue-cli3 按需加载loading,服务的方式调用
- 软件项目管理 project 实验
- Tomcat8配置SSL证书
- 机器学习项目的实例分析设计(附源码)
- 流程图与算法_流程图与算法之间的区别
- 精通 CSS+DIV 网页样式与布局 158
- loj 3090 「BJOI2019」勘破神机 - 数学
- FFmpeg命令(二)、 从视频中提取音频
- 世界杯期间怎么做营销活动?
- 中国漂粉精市场深度调查及战略研究报告(2022版)
- Codeforces 1325C. Ehab and Path-etic MEXs(构造)
热门文章
- 【Flutter】Dart 数据类型 ( var 数据类型 | Object 数据类型 )
- 【Android 应用开发】Activity 返回堆栈管理 ( 栈内复用模式 singleTask | 单实例模式 singleInstance )
- 【Java 网络编程】Socket TCP UDP 联系
- liunx 安装 zookeeper(转)
- 第20条:为私有方法名加前缀
- 利用php比较精确的统计在线人数的办法
- 技术分享-bounds的深入认识
- PE文件数字签名信息读取存储及格式具体解释图之上(历史代码,贴出学习)
- 【转】分享:c#和javascript函数的相互调用(ObjectForScripting 的类必须对 COM 可见。请确认该对象是公共的,或考虑向您的类添加 ComVisible 属性。)...
- sql 2005 新增的查看sql语句运行情况