利用DrawerLayout实现简单的抽屉效果

前言,本篇文章是最基础的利用DrawerLayout实现抽屉效果,我也是尽量精简到了最高效的代码,后面我会贴出其他比较复杂的功能。

先看效果图

标题栏中的文字,会根据点击item的不同,而显示不同的样式。

直接上代码。

下面是activity_main的代码

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

        <!-- 当前主界面显示内容视图 -->
        <!-- 主内容必须是DrawerLayout的第一个元素,因为它将第一个显示,并且抽屉必须在内容之上 -->

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

        <!-- 导航抽屉视图 -->

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="@android:color/holo_red_dark"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="5dp" />
    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>
  • 抽屉菜单的宽度为 dp 单位而高度和父View一样。抽屉菜单的宽度应该不超过320dp,这样用户可以在菜单打开的时候看到部分内容界面。

接下来是MainActivity代码

package com.example.chouti;

import android.os.Bundle;
import android.app.Activity;
import android.content.res.Configuration;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
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 MainActivity extends Activity {

	private String[] mPlanetTitles = { "hahhooo", "jdahldfj", "这是真的吗",
			"这应该是真的", "4", "jdahldfj", "这是真的吗", "这应该是真的", "jdahldfj", "这是真的吗",
			"这应该是真的" };
	private DrawerLayout mDrawerLayout;
	private ActionBarDrawerToggle mDrawerToggle;
	private ListView mDrawerList;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		// 初始化ListView和适配数据
		initListView();
		 //mDrawerLayout.setDrawerShadow(R.drawable.ic_launcher, GravityCompat.START);
		//初始化ActionBarDrawerToggle
		mDrawerToggle = new ActionBarDrawerToggle(this,//显示抽屉的Activity对象
				mDrawerLayout,//DrawerLayout 对象
				R.drawable.ic_launcher, //一个用来指示抽屉的 drawable资源(如果想显示这个图标的话,必须重写onPostCreate(Bundle savedInstanceState))
				R.string.hello_world,//一个用来描述打开抽屉的文本 (用于支持可访问性)
				R.string.hello_world);//一个用来描述关闭抽屉的文本(用于支持可访问性)
		// 将ActionBarDrawerToggle设置为DrawerListener
		mDrawerLayout.setDrawerListener(mDrawerToggle);

		// ActionBar操作模式开启(调用这个方法,点击图标才会有响应)
		getActionBar().setDisplayHomeAsUpEnabled(true);
		getActionBar().setHomeButtonEnabled(true);
		// 注意: getActionBar() 添加是在 API level 11
	}

	//这里就是onPostCreate(Bundle savedInstanceState)方法
//	@Override
//	protected void onPostCreate(Bundle savedInstanceState) {
//
//		super.onPostCreate(savedInstanceState);
//		mDrawerToggle.syncState();
//	}
	private void initListView() {
		mDrawerList = (ListView) findViewById(R.id.left_drawer);
		// 适配数据
		mDrawerList
				.setAdapter(new ArrayAdapter<String>(this,
						android.R.layout.simple_list_item_1,
						mPlanetTitles));
		// 为listView设置监听事件
		mDrawerList.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// 更新标题,并关闭抽屉
				setTitle(mPlanetTitles[position]);
				mDrawerLayout.closeDrawer(mDrawerList);
			}
		});
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		//传递事件给ActionBarDrawerToggle,如果返回true,它将处理图标响应事件
		if (mDrawerToggle.onOptionsItemSelected(item)) {
			return true;
		}
		//处理其他操作点击条目
		return super.onOptionsItemSelected(item);
	}

}

关于ActionBar相关知识,如果你想进一步了解,请点击这里http://blog.csdn.net/harryweasley/article/details/42027521

关于DrawerLayout更详细的解说,你可以点击这里

http://blog.csdn.net/harryweasley/article/details/42027487

或者

http://blog.csdn.net/harryweasley/article/details/42027563

以上三个文章都是我转载的,帮助我完成上面项目的。

时间: 2024-12-07 12:30:51

利用DrawerLayout实现简单的抽屉效果的相关文章

利用replaceChild制作简单的吞噬效果【jsDEMO】

[功能说明] 利用replaceChild制作简单的吞噬效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

简单的抽屉效果

简单的抽屉效果是由3 个View 组成,顶层默认显示的mainV,左边的leftV以及右边的rightV ,当mainV 监听到滑动时,计算滑动的偏移量,控制显示leftV或者rightV. 废话不多说,上代码. 一:所以,首先我们需要在头文件中定义三个View的属性,来给外界调用,实现设置对应的属性和效果: 1 @property (nonatomic, weak, readonly) UIView *mainV; 2 3 @property (nonatomic, weak, readonl

抽屉效果实现原理

实现一个简单的抽屉效果: 核心思想:KVO实现监听mainV的frame值的变化 核心代码: #import "ViewController.h" // @"frame" #define XMGkeyPath(objc, keyPath) @(((void)objc.keyPath, #keyPath)) // 在宏里面如果在参数前添加了#,就会把参数变成C语言字符串 // 获取屏幕的宽度 #define screenW [UIScreen mainScreen].

iOS开发——实用技术OC篇&amp;简单抽屉效果的实现

简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一些功夫了,我们这里知识简单的介绍怎么去实现,不过一般我们开发都是找别人做好的,也没必要烂肺时间,除非你真的是大牛或者闲的蛋疼. 其实关于抽屉效果就是界面有三个View,其实一个主View其他两个分别是左边和右边的View,我们分别为他们添加手势,实现左右滑动显示对应的View. 一:所以,首先我们需

利用removeChild制作简单的倒序删除效果【jsDEMO】

[功能说明] 利用removeChild制作简单的倒序删除效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

网易新闻侧滑抽屉效果(利用父子控制器实现)

一:类似于网易的抽屉效果,启动有广告,进入主界面后,点击左上角按钮,侧滑左抽屉,点击右上角,侧滑出右抽屉.点击左抽屉按钮,对视图进行切换 . 二代码: 1:启动图展示广告界面实现:先吧启动图控制器作为窗口的根视图控制器,展示完广告消失后,再切换窗口的根视图控制器为主控制器.其中窗口指的是项目中的主窗口也就是keyWindow,主窗口主要负责接收一些键盘事件,文本框输入事件,若是键盘文本框,textView或是textfield不能输入,则考虑是不是当前窗口是否是主窗口 @interface HM

利用insertBefore制作简单的循环插空效果【jsDEMO】

[功能说明] 利用insertBefore制作简单的循环插空效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in&quo

Android DrawerLayout抽屉效果

官网guide:http://developer.android.com/training/implementing-navigation/nav-drawer.html 官网示例:NavigationDrawer.zip android.support.v4.widget.DrawerLayout 抽屉layout.该widget只能实现从左向右.从右向左 openDrawer(), closeDrawer(), isDrawerOpen() 下面贴一下示例的主要的布局文件 和 activit

android.support.v4.widget.DrawerLayout 抽屉效果导航菜单

抽屉效果导航菜单图示 如图所示,抽屉效果的导航菜单不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面左上角的一个按钮点击,菜单就滑出来,而且感觉能放很多东西 概况:实现上图所示的抽屉效果的导航菜单有以下两种方式 方式1.用SlidingDrawer: http://developer.android.com/reference/android/widget/SlidingDrawer.html 但是不知道为什么这个类官方不建议再继续用了: Deprecated since API lev