首页 > 代码库 > 利用DrawerLayout实现简单的抽屉效果

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

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

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