android侧滑菜单控件DrawerLayout使用方法详解

drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。

使用步骤:

创建一个DrawerLayout

为了添加导航抽屉,你需要在你的布局界面中声明一个DrawerLayout对象作为布局的根节点。同时在DrawerLayout内部添加两个view:

  • 添加一个View,它包含应用的主内容(当抽屉隐藏时你的主要布局);
  • 添加另一个View它包含了导航抽屉;

如下面例子所示:该布局使用了DrawerLayout它包含了两个子节点:一个FrameLayout它包含了主要内容(在运行时将会被Fragment替换) 和 一个ListView作为导航抽屉,上面titlebar 上图标,负责打开、关闭抽屉;

<?xml version="1.0" encoding="utf-8"?>
<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"
 >
 <LinearLayout
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:id="@+id/titleBar"
  android:gravity="center_vertical"
  android:background="@android:color/darker_gray"
  android:layout_height="40dp"> 

  <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_drawer"
   android:onClick="onClickDrawerOpened"
   android:clickable="true"
   android:id="@+id/imageView" />
 </LinearLayout>
 <android.support.v4.widget.DrawerLayout
  android:id="@+id/drawer_layout"
  android:layout_below="@id/titleBar"
  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"></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> 

上面这个例子包含了一些重要的布局技巧:

  • 主内容View(FrameLayout在最上层)必须是Drawerlayout的第一个子节点因为XML在安排这些界面的时候是按照Z轴的顺序来安排的 同时 抽屉必须在主内容的顶部。
  • 主内容View被设置成匹配父View的宽和高,因为当导航抽屉隐藏的时候它要填充整个UI。
  • 导航View(ListView)必须被声明一个水平的gravity借助属性android:layout_gravity。为了满足从右到左的约定,声明它的值为”start” 代替 “left”(因此这个抽屉将会在右面呈现当布局是RTL时)
  • 在导航View声明时:宽度用dp为单位、高度匹配父View。为了保证用户无论怎样都能看到主内容的一部分,导航抽屉的宽度不能超过320dp

初始化Drawer List

在你的Activity中,要做的第一件事是初始化导航抽屉的列表项。具体该怎么做根据你APP的内容来定,但是导航抽屉通常包含一个Listview,所以还需要一个相匹配的Adapter(比如 ArrayAdapter 或者 SimpleCursorAdapter)
下面的例子,告诉你该如何借助一个string array 来初始化一个导航list

public class MainActivity extends Activity {
 private DrawerLayout mDrawerLayout;
 private ListView mDrawerList; 

 private String[] mPlanetTitles; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main); 

  mPlanetTitles = getResources().getStringArray(R.array.planets_array);
  mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  mDrawerList = (ListView) findViewById(R.id.left_drawer); 

  // set a custom shadow that overlays the main content when the drawer opens
  mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
  // set up the drawer's list view with items and click listener
  mDrawerList.setAdapter(new ArrayAdapter<String>(this,
    R.layout.drawer_list_item, mPlanetTitles));
  mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
 }
//................................
}

处理导航点击事件

当用户选择了抽屉列表里面的一个Item时, 系统调用onItemClickListener上的onItemClick(), 给setOnItemClickListener().
你在onItemClick()方法里面做什么, 取决于你的app实现的结构. 在下面的例子中, 选择每一个Item都会在主要内容的布局中插入一个不同的Fragment.

private class DrawerItemClickListener implements ListView.OnItemClickListener {
 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  selectItem(position);
 }
 } 

 private void selectItem(int position) {
 // update the main content by replacing fragments
 Fragment fragment = new PlanetFragment();
 Bundle args = new Bundle();
 args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
 fragment.setArguments(args); 

 FragmentManager fragmentManager = getFragmentManager();
 fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit(); 

 // update selected item and title, then close the drawer
 mDrawerList.setItemChecked(position, true);
 mDrawerLayout.closeDrawer(mDrawerList);
 }

打开和关闭抽屉

使用onDrawerOpened()和onDrawerClosed () 打开和关闭抽屉:

public void onClickDrawerOpened(View drawerView) {
 if(!mDrawerLayout.isDrawerOpen(GravityCompat.START))//if not open ,open or close;
 {
 mDrawerLayout.openDrawer(mDrawerList);
 }
 else
 {
 mDrawerLayout.closeDrawer(mDrawerList);
 }
}

效果图:

Demo 下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用DrawerLayout实现双向侧滑菜单

    前言   在android开发中,很多的app都有使用侧滑菜单,有的是自定义控件来实现侧滑菜单,但是android给我们提供了DrawerLayout类来实现侧滑菜单,侧滑效果很好,今天我就说说怎么去使用它来实现侧滑菜单. 实现   我们先来看一下效果图: 这里我们实现的双向侧滑菜单,在界面上部加入了两个按钮,点击就会打开菜单或者关闭菜单,当然也可以自己去滑动. 布局文件的代码: <LinearLayout xmlns:android="http://schemas.android.com

  • Android使用DrawerLayout实现仿QQ双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家. 首先看看效果图: DrawerLayout用起来真的很方便,下面一起看看用法~ 2.DrawerLayout的使用 直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧

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

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

  • Android DrawerLayout带有侧滑功能的布局类(1)

    DrawerLayout顾名思义就是一个管理布局的.使用方式可以与其它的布局类类似. DrawerLayout带有滑动的功能.只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果. 直接将DrawerLayout作为根布局,然后其内部 第一个View为内容区域 第二个View为左侧菜单  第三个View为右侧侧滑菜单  当前第三个是可选的. 使用的包如下:  import android.support.v4.widget.DrawerLayout; 使用这些包的时候有时有的

  • Android Drawerlayout侧拉栏事件传递问题的解决方法

    先来看看错误分析: "在侧拉栏打开的时候出现了点击之后侧拉栏下面的页面也接收到了点击事件." 解决方案: rootDrawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() { //当侧拉栏滑动的时候调用此方法 @Override public void onDrawerSlide(View drawerView, float slideOffset) { }//当侧拉栏打开的时候调用此方法 @Override pu

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

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

  • Android使用DrawerLayout仿QQ6.6版侧滑效果

    一讲到侧滑菜单,我相信大家都会想到一个开源控件SlidingMenu,在google还没有出来DrawerLayout的时候几乎都是使用Slidingmenu来实现侧滑效果,可以说是效果很不错,自从google出了Drawerlayout以后很多公司就使用了Drawerlayout比如 滴滴打车等等.那么今天我们利用drawerlayout来实现qq6.6最新的侧滑效果.首先来看看Drawerlayout默认的效果: 和目前最新版的qq的侧滑还是不一样的区别就是内容页面没有跟随向右滑动,而是菜单

  • Android实现右边抽屉Drawerlayout效果

    侧边栏是Android应用中很常见的一个界面效果(抽屉效果).而利用DrawerLayout实现右侧栏是相对简单的.而且这个控件自带滑动效果,十分方便. DrawerLayout属于android-support-v4.jar的包的内容,sdk新的就不用更新了,如果旧版本就需要导入这个包了. 先来看看效果 这里实现了抽屉效果和为了方便使用者在各处可以随意打开这个抽屉,我在这里定义在点击菜单可出现抽屉. 代码说明 1.activity的布局文件 <android.support.v4.widget

  • Android组件之DrawerLayout实现抽屉菜单

    DrawerLayout组件同样是V4包中的组件,也是直接继承于ViewGroup类,所以这个类也是一个容器类. 抽屉菜单的摆放和布局通过android:layout_gravity属性来控制,可选值为left.right或start.end.通过xml来布局的话,需要把DrawerLayout作为父容器,组界面布局作为其第一个子节点,抽屉布局则紧随其后作为第二个子节点,这样就做就已经把内容展示区和抽屉菜单区独立开来,只需要分别为两个区域设置内容即可.android提供了一些实用的监听器,重载相

  • Android App中DrawerLayout抽屉效果的菜单编写实例

    抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西. 库的引用: 首先, DrawerLayout这个类是在Support Library里的,需要加上android-support-v4.jar这个包. 然后程序中用时在前面导入import android.support.v4.widget.DrawerLayout; 如果找不到这个类,首先用SDK Manager更

随机推荐