google 原生态 抽屉式侧滑菜单 Android DrawerLayout 布局的使用介绍

废话不多说,直接上效果图:

其实谷歌官方已经给出了一个 关于DrawerLayout 使用的例子,只是处于 国内不能访问谷歌官网,看不到详细文档说明,所以在此 简单记录下  侧滑 抽屉式菜单的使用说明

1.由于 DrawerLayout 需要 android.support.v4 包的支持,所以,你的libs 下面不要包含 这个包。

2.首先布局文件如下

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

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </FrameLayout>

    <!-- the navigetion view -->

    <ListView
        android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#9999cc"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" >
    </ListView>

</android.support.v4.widget.DrawerLayout>

注意:1.布局中的ListView 就是就是侧滑菜单 布局容器,其中 android:layout_gravity 属性必须赋值。 目的是侧滑菜单的显示位置,官方推荐使用“start”-----左侧  "end"----右侧

不推荐使用 “left”---左侧,“right”---右侧。

2.FrameLayout 显示主内容部分。

其实到了这一步就已经实现了侧滑菜单效果了,可以运行试试,只是现在的侧滑菜单里面没有任何元素。

3.代码编写如下:

package com.example.drawlayout1;

import android.os.Bundle;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.LayoutInflater;
import android.view.Menu;
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;

public class MainActivity extends Activity implements OnItemClickListener {

	private DrawerLayout mDrawerLayout;
	private ListView mDrawerList;
	private String[] menuLists;
	private ArrayAdapter<String> adapter;
	private ActionBarDrawerToggle mDrawerToggle;
	private String titleString;
	private int iSelect = -1;
	private View heandrView;

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

		/*get the application title*/
		titleString = (String) getTitle();

		heandrView = LayoutInflater.from(this).inflate(R.layout.home_menu_list_header, null);

		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.drawer_list);
		mDrawerList.addHeaderView(heandrView);
		menuLists = getResources().getStringArray(R.array.menu_content);

		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, menuLists);
		mDrawerList.setAdapter(adapter);
		mDrawerList.setOnItemClickListener(this);

		/*set the shadow for drawer at start(left) or end(right)*/
		mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
				GravityCompat.START);

		/*show the home icon*/
		getActionBar().setDisplayHomeAsUpEnabled(true);
		/*make sure the home icon enable click*/
		getActionBar().setHomeButtonEnabled(true);

		/*set the application ActionBar title changes*/
		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, R.string.drawer_open,
				R.string.drawer_close) {
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				getActionBar().setTitle(R.string.please);
			}

			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				if (-1 == iSelect) {
					getActionBar().setTitle(titleString);
				} else {
					getActionBar().setTitle(menuLists[iSelect-1]);
				}
			}
		};
		/*set the DrawerLayout Listener*/
		mDrawerLayout.setDrawerListener(mDrawerToggle);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		/*make sure the home icon enable click and display the DrawerLayout*/
		if (mDrawerToggle.onOptionsItemSelected(item)){
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
		Fragment contentFragment = new ContentFragment();
		Bundle args = new Bundle();
		iSelect = arg2;
		if (0 == iSelect){
			iSelect = 1;
		}
		args.putString("text", menuLists[iSelect-1]);
		contentFragment.setArguments(args);

		FragmentManager fm = getFragmentManager();
		fm.beginTransaction().replace(R.id.frame_content, contentFragment)
				.commit();
		mDrawerLayout.closeDrawer(mDrawerList);
	}

	/**
	 * When using the ActionBarDrawerToggle, you must call it during
	 * onPostCreate() and onConfigurationChanged()...
	 */
	@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);
		// Pass any configuration change to the drawer toggls
		mDrawerToggle.onConfigurationChanged(newConfig);
	}

}

代码里边有注解,就不一一解释了。

@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		/*make sure the home icon enable click and display the DrawerLayout*/
		if (mDrawerToggle.onOptionsItemSelected(item)){
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

这段代码的目的:点击ActionBar导航栏上的Home 按键弹出和关闭 DrawerLayout 侧滑菜单。

/**
	 * When using the ActionBarDrawerToggle, you must call it during
	 * onPostCreate() and onConfigurationChanged()...
	 */
	@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);
		// Pass any configuration change to the drawer toggls
		mDrawerToggle.onConfigurationChanged(newConfig);
	}

这段代码的目的:谷歌官方极力推荐重写两个方法,第一个方法 实现ActionBar 的Home键和 DrawerLayout 抽屉菜单关联,并且ActionBar的Home 有动画效果。

第二个方法 是在横屏的时候调用。保存状态。

mDrawerList.setOnItemClickListener(this);

这段代码是添加DrawerLayout 抽屉菜单 里面元素的点击事件,代码中实现点击不同元素,替换不同FragMent。

/*set the application ActionBar title changes*/
		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, R.string.drawer_open,
				R.string.drawer_close) {
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				getActionBar().setTitle(R.string.please);
			}

			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				if (-1 == iSelect) {
					getActionBar().setTitle(titleString);
				} else {
					getActionBar().setTitle(menuLists[iSelect-1]);
				}
			}
		};
		/*set the DrawerLayout Listener*/
		mDrawerLayout.setDrawerListener(mDrawerToggle);

这段代码是 添加侧滑 菜单 DrawerLayout 的打开关闭监听事件,在打开关闭方法中重写 自己需要实现的效果。

最后附上 整个工程源码:源码工程

时间: 2024-10-04 02:44:19

google 原生态 抽屉式侧滑菜单 Android DrawerLayout 布局的使用介绍的相关文章

Android百分比布局支持库介绍——com.android.support:percent

在此之前,相信大家都已经对Android API所提供的布局方式非常熟悉了.也许在接触Android的时候都有过这样的想法,如果可以按照百分比的方式进行界面布局,这样适配各种屏幕就简单多了吧!!以前的一个小梦想,现在终于得以实现,谷歌正式提供百分比布局支持库(percent-support-lib). <ignore_js_op> 获取支持库: 使用Android studio在build.gradle添加以下信息就可以获取支持库,当然了,如果你没有下载到该支持库会提示你下载. [AppleS

android侧滑菜单笔记

一.SlidingPaneLayout v4包下的控件,使用简单,功能简洁.官方文档明确说明该控件只能左侧滑动.使用如下: <android.support.v4.widget.SlidingPaneLayout android:id="@+id/slidingPaneLayout" android:layout_width="match_parent" android:layout_height="match_parent"> &l

Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单

转载请注明出处:http://blog.csdn.net/allen315410/article/details/42914501 概述 今天这篇博客将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下.那么,DrawerLayout是一个怎么的组件呢?我们知道,当我们使用Androi

Adapter类控件使用之DrawerLayout(官方侧滑菜单)的简单使用

(一)概述 本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,既然Google为我们提供了这个控件,为何不用咧,而且在 Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar + DrawerLayout来实现~,本节我们就来探究下这个DrawerLayout的一个基本用法~还有人喜欢把他 称为抽屉控件~ (二)使

Android自定义View之仿QQ侧滑菜单实现

最近,由于正在做的一个应用中要用到侧滑菜单,所以通过查资料看视频,学习了一下自定义View,实现一个类似于QQ的侧滑菜单,顺便还将其封装为自定义组件,可以实现类似QQ的侧滑菜单和抽屉式侧滑菜单两种菜单. 下面先放上效果图: 我们这里的侧滑菜单主要是利用HorizontalScrollView来实现的,基本的思路是,一个布局中左边是菜单布局,右边是内容布局,默认情况下,菜单布局隐藏,内容布局显示,当我们向右侧滑,就会将菜单拉出来,而将内容布局的一部分隐藏,如下图所示: 下面我们就一步步开始实现一个

DrawerLayout侧滑菜单

注意事项: DrawerLayout最好为界面的根布局,否则可能会出现触摸事件被屏蔽的问题 主内容区的布局代码要放在侧滑菜单布局的前面---策划菜单必须放最后 侧滑菜单部分的布局(这里是ListView)必须设置layout_gravity属性 界面的根布局 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android=&qu

android:QQ多种侧滑菜单的实现

在这篇文章中写了 自定义HorizontalScrollView实现qq侧滑菜单 然而这个菜单效果只是普通的侧拉效果 我们还可以实现抽屉式侧滑菜单 就像这样 第一种效果 第二种效果 第三种效果 第四种效果 其它代码都和上篇文章相同,只是在MyHorizontalScrollView.class重写onScrollChanged这个方法 第一种的侧滑效果代码很简单 @Override protected void onScrollChanged(int l, int t, int oldl, in

侧滑菜单的功能

侧滑功能需要用到开源项目,通过开源项目的使用,就能做到了.这个开源项目可以到githut网站中去查找到,有了这个,你就可以在项目中使用这个控件,munudraw,然后可以通过这个空间可以点出attch这个方法,然后运行,就可以看到,侧滑菜单. 侧滑菜单,其实没有什么难的,只要你找到那个开源项目包,然后导进自己项目中就好办了,然后就是在侧滑菜单中设置布局,我们一般是使用listview作为整个布局,这样的布局既简单,有美观.这个是新的技术,跟以前的会有更大的区别,以前的版本,侧滑的区域不一样,没有

Android侧滑菜单DrawerLayout(抽屉布局)实现

应用场景: 由于侧滑菜单有更好的用户体验效果,所以更多的App使用侧滑抽屉式菜单列表,如网易客户端.百度影音.爱奇艺等等.至此,侧滑菜单有了更多的使用需求. 知识点介绍: 实现侧滑菜单功能的方法有很多,如果开源的项目SlidingMenu,下载地址为https://github.com/jfeinstein10/SlidingMenu.该开源项目依赖于另一个开源项目ActionBarSherlock,下载地址为https://github.com/JakeWharton/ActionBarShe