Android控件之左侧抽屉菜单

最新推荐文章于 2024-06-26 14:49:06 发布
最新推荐文章于 2024-06-26 14:49:06 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： 组件、控件

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.DrawerLayout
  
  

  
  

   
           
   
   xmlns: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 
   
   -->
  
  


  
  

   
           
   
   <
   
   FrameLayout
  
  

  
  

   
               
   
   android:id
   
   ="@+id/content_frame"
  
  

  
  

   
               android:layout_width
   
   ="match_parent"
  
  

  
  

   
               android:layout_height
   
   ="match_parent"
   
    
   
   />
  
  


  
  

   
           
   
   <!--
   
    The navigation drawer 
   
   -->
  
  


  
  

   
           
   
   <
   
   ListView
  
  

  
  

   
               
   
   android: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;
  
  

    @Override

  
  

   
       
   
   public
   
    
   
   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 drawer
  
  

  
  

   
           getActionBar().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 view
  
  

  
  

   
           mDrawerList.setAdapter(
   
   new
   
    ArrayAdapter<String>(
   
   this
   
   ,
  
  

  
  

   
                   R.layout.list_item, mPlanetTitles));
  
  

  
  

   
           
   
   //
   
    Set the list's click listener
  
  

  
  

   
           mDrawerList.setOnItemClickListener(
   
   new
   
    OnItemClickListener()
  
  
        {


  
  

   
               
   
   public
   
    
   
   void
   
    onItemClick(AdapterView<?> parent, View view,
  
  
            @Override

  
  
                    int position, long id)

  
  

   
               {
  
  

  
  

   
                   
   
   //
   
    Highlight the selected item, update the title, and close the
  
  

  
  

   
                   
   
   //
   
    drawer
  
  

  
  

   
                   mDrawerList.setItemChecked(position, 
   
   true
   
   );
  
  

  
  

   
                   setTitle(mPlanetTitles[position]);
  
  

  
  

   
                   mDrawerLayout.closeDrawer(mDrawerList);
  
  
            }
        });
    }

    @Override

  
  

   
       
   
   protected
   
    
   
   void
   
    onPostCreate(Bundle savedInstanceState)
  
  
    {

  
  

   
           
   
   super
   
   .onPostCreate(savedInstanceState);
  
  

  
  

   
           
   
   //
   
    Sync the toggle state after onRestoreInstanceState has occurred.
  
  

  
  

   
           mDrawerToggle.syncState();
  
  
    }

    @Override

  
  

   
       
   
   public
   
    
   
   void
   
    onConfigurationChanged(Configuration newConfig)
  
  
    {

  
  

   
           
   
   super
   
   .onConfigurationChanged(newConfig);
  
  

  
  

   
           mDrawerToggle.onConfigurationChanged(newConfig);
  
  
    }

    @Override

  
  

   
       
   
   public
   
    
   
   boolean
   
    onOptionsItemSelected(MenuItem item)
  
  
    {

  
  

   
           
   
   //
   
    Pass the event to ActionBarDrawerToggle, if it returns
  
  

  
  

   
           
   
   //
   
    true, then it has handled the app icon touch event
  
  

  
  

   
           
   
   if
   
    (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.DrawerLayout
  
  

  
  

   
           
   
   android:id
   
   ="@+id/drawer_layout"
  
  

  
  

   
           android:layout_width
   
   ="match_parent"
  
  

  
  

   
           android:layout_height
   
   ="match_parent"
   
    
   
   >
  
  


  
  

   
           
   
   <!--
   
    The main content view 
   
   -->
  
  


  
  

   
           
   
   <
   
   FrameLayout
  
  

  
  

   
               
   
   android:id
   
   ="@+id/content_frame"
  
  

  
  

   
               android:layout_width
   
   ="match_parent"
  
  

  
  

   
               android:layout_height
   
   ="match_parent"
   
    
   
   >
  
  


  
  

   
               
   
   <
   
   Button
  
  

  
  

   
                   
   
   android:id
   
   ="@+id/btn"
  
  

  
  

   
                   android:layout_width
   
   ="match_parent"
  
  

  
  

   
                   android:layout_height
   
   ="wrap_content"
  
  

  
  

   
                   android:text
   
   ="open"
   
    
  
  

  
  

   
                   
   
   />
  
  

  
  

   
           
   
   </
   
   FrameLayout
   
   >
  
  


  
  

   
           
   
   <!--
   
    The navigation drawer 
   
   -->
  
  


  
  

   
           
   
   <
   
   ListView
  
  

  
  

   
               
   
   android: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
   
   ;
  
  
{

  
  


  
  

   
       @Override
  
  

  
  

   
       
   
   protected
   
    
   
   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()
  
  
        {


  
  

   
               @Override
  
  

  
  

   
               
   
   public
   
    
   
   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
shizhesx
关注
专栏目录
Android之抽屉效果的下拉菜单(上下伸缩和展开)
12-02
实现了一个Android的抽屉效果的下拉菜单(上下伸缩和展开)，和大家一起交流学习，如果有更好的实现效果，也请分享一下(注：积分只是希望能评论的方式。）【联系方式：评论即可】
Android 抽屉效果的导航菜单实现
weixin_33778778的博客
07-24 339
  Android 抽屉效果的导航菜单实现   抽屉效果的导航菜单 　　看了很多应用，觉得这种侧滑的抽屉效果的菜单很好。 　　不用切换到另一个页面，也不用去按菜单的硬件按钮，直接在界面上一个按钮点击，菜单就滑出来，而且感觉能放很多东西。   　　关于实现，搜索了一下，有如下两种： 　　1.用SlidingDrawer： 　　http://developer.android.c...
Android开发之滑动菜单（八）
最新发布
qq_62678419的博客
06-26 786
滑动菜单的实现
android 收缩导航栏,Android_实现可收缩扩展的导航栏 CoordinatorLayout+AppbarLayout+NestedScrollView...
weixin_39973009的博客
05-28 433
学习自项目： https://github.com/nanchen2251/AiYaGirl通过上滑把背景图片隐藏起来看一看导航栏扩展状态　　　　　　　　上滑后导航栏收缩状态实现思路要实现这样的效果, 需要用到：CoordinatorLayout和AppbarLayout的配合, 以及实现了NestedScrollView的布局或控。AppbarLayout是一种支持响应滚动手势的app bar...
Android开发之DrawerLayout实现抽屉效果
weixin_33982670的博客
04-02 129
谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，这个类是在Support Library里的，需要加上android-support-v4.jar这个包。 使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉没有打开时显示的布局（如FrameLayout...
Android组件之DrawerLayout实现抽屉菜单
01-20
在实际开发中，抽屉菜单常与NavigationView、NavigationView与ToolBar结合使用，以实现更加丰富的导航功能。通过熟练掌握DrawerLayout的使用，开发者能够为Android应用创建出优雅、直观的导航体验。此外，还可以结合...
Android 双向抽屉式侧滑菜单 自定义控件
10-01
默认的Android DrawerLayout只支持从屏幕左侧滑出菜单，但通过自定义控件，我们可以实现从右侧同样滑出菜单，从而创建一个双向侧滑菜单。 要创建这个自定义控件，我们需要继承自Android的DrawerLayout，并重写部分...
Android很不错的一个抽屉控件
05-17
在Android开发中，抽屉控件（Drawer Layout）是一种常用的设计模式，用于实现侧滑菜单效果，常被用在导航栏或选项菜单中。抽屉控件允许用户从屏幕边缘滑出一个包含导航链接的视图，从而提供了一种优雅的方式来展示...
安卓Android源码——抽屉控件.zip
10-14
在安卓（Android）开发中，抽屉控件（DrawerLayout）是实现侧滑菜单功能的重要组件，它允许用户从屏幕边缘滑出一个可隐藏的视图，通常用于展示导航选项或者更多的功能设置。这个压缩包文件"安卓Android源码——抽屉...
android 抽屉控件源码.rar
11-02
在Android开发中，抽屉控件（DrawerLayout）是一个非常重要的组件，主要用于实现侧滑菜单效果，这种设计模式常见于许多应用的主界面，让用户能够方便地访问更多功能或者导航选项。抽屉控件通常从屏幕边缘滑出，提供...
Android 展开式(可收缩)菜单弹出效果简单实现【AnimatorSet】
最孤单的人的博客
07-04 1637
展开式(可收缩)菜单弹出效果简单实现 - 主要是通过AnimatorSet联动实现 可以分为3种ObjectAnimator动画： 位移动画（translationX/translationY） 透明度动画（alpha） 旋转动画（rotation） 先上效果： 开始贴代码 #1 xml布局： <?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widg...
Android 自定义水平展开收缩菜单
安卓兼职framework和app工程师的博客
10-09 897
今天看到一个自定义水平展开收缩菜单非常好用，于是就参考下自己来实现一个水平展开收缩的菜单 自定义菜单如下: 展开效果图: 收缩效果图: package com.pne.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint;
Android Compose之伸缩ToolBar的实现
人生就是为了樱岛麻衣的博客
10-13 850
ScrollableAppBar
Android 使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现伸缩头部和菜单悬停效果
唐衡三
07-31 759
Android 原生控件实现伸缩头部和菜单悬停效果 <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout
android ExpandableListView伸缩列表
mmmmmmmmmmAA的专栏
04-23 217
这两天做东西要用到伸缩菜单，倒腾了两天 终于出来了，分享一下： 1.布局文件shop_info_layout.xml： &lt;ExpandableListView android:id="@+id/shop_tests" android:layout_width="wrap_content" android:layout_height="w...
Android 10.0 导航栏增加虚拟按键 点击控制下拉状态栏展开和收缩
安卓兼职framework和app工程师的博客
08-17 1315
在10.0定制化开发中，在导航栏增加虚拟按键也是常有的功能，功能开发需求要求增加虚拟按键来实现对下拉状态栏展开和收缩的控制
Android动画实战-实现下拉式窗帘动画和上拉式抽屉动画
热门推荐
...
04-15 1万+
最近比较忙，因为月底要上线App。但是忙里也得偷闲丫~哈哈！！ 在上篇博客中，我和大家分享了如何使用Android动画来实现高仿简聊App中菜单动画的效果。还木有看的小伙伴赶紧的哟：Android动画实战一仿简聊App动画菜单 今天，我将和大家分享我们Android动画之旅系列的最后一个实战项目：下拉式窗帘动画和上拉式抽屉动画。目前这种动画效果在App中也是比较流行的，ok，我们一起先来看看效
android顶部菜单伸缩,Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩效果
weixin_39688019的博客
05-26 538
闲话不多说，直接上图。给大家讲讲我的编程思想吧。第一部分：沉浸式状态栏(API-Level 19, Android4.4 KitKat 之后加入的东西)，而且在Api-Level 21版本中新增了一个属性(下面会说到)。所以，style文件应该声明三份。valuesvalues-19truefalsevalues-V21truefalse@android:color/transparent第二部分...
Android 自定义LinearLayout实现滑动下拉抽屉的功能
zz51233273的博客
08-31 2908
先看效果图： 先来说说思路：我们把该页面分为两部分，分别是头部的抽屉布局(海洋色背景)和主内容布局(白色背景)，这两部分的布局是呈线性关系，即抽屉在上，主页面在下，并且它们的父布局应该是一个可滑动的LinearLayout线性布局 所以，我们的目标就是自定义一个可滑动的LinearLayout，并且设置它的子布局都向上移动一个自定义LinearLayout的高度 一、自定义控件的测量和布局 自定义LinearLayout，假设为MyPullDownLayout： public class M
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值