Android笔记：DrawerLayout抽屉布局的使用

DrawerLayout(抽屉布局)，在各种app中经常出现，比如csdn。。

如下示，只要从屏幕侧边滑一下，或者点击左上角的图标，抽屉就会出来。

DrawerLayout要点：

1.使用DrawerLayout时，在xml布局中，把主界面的布局内容放在前面，后面才放上抽屉里的布局内容

2.记得为抽屉内的布局加上android:layout_gravity="left"或"start"，指明抽屉出现在哪一侧。

代码如下所示：

activity_drawer.xml

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

<!-- 主界面的布局，必须放在抽屉的前面 -->

<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="#ffffff"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="1dp" />
</android.support.v4.widget.DrawerLayout>

</RelativeLayout>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">DrawerLayoutTest</string>
<string name="action_settings">Settings</string>
<string name="drawer_close">关闭抽屉</string>
<string name="drawer_open">打开抽屉</string>

<string-array name="planets_array">
<item>主页</item>
<item>发现</item>
<item>收藏</item>
<item>设置</item>
<item>草稿</item>
<item>历史</item>
<item>模式</item>
</string-array>

</resources>

DrawerLayoutDemo.java

package com.example.drawerlayouttest;

import android.os.Bundle;
import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Color;
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 DrawerLayoutDemo 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_drawer);

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
// 初始化ListView
initListView();
//添加抽屉开关
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open,
R.string.drawer_close)
{
//抽屉关闭
public void onDrawerClosed(View view)
{
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}

//抽屉打开
public void onDrawerOpened(View drawerView)
{
invalidateOptionsMenu();
}
};

mDrawerLayout.setDrawerListener(mDrawerToggle);
// enable ActionBar app icon to behave as action to toggle nav drawer
getActionBar().setDisplayHomeAsUpEnabled(true);
// getActionBar().setHomeButtonEnabled(true);
}

private void initListView()
{
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, mPlanetTitles));

// 设置监听事件
mDrawerList.setOnItemClickListener(new OnItemClickListener()
{

@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id)
{
mDrawerList.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
}
});
}

//Activity运行后的回调
@Override
protected void onPostCreate(Bundle savedInstanceState)
{
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}

//配置改变时，不用重新启动Activity
@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;
}

return super.onOptionsItemSelected(item);
}

}

抽屉开关的图标：

代码运行后，打开抽屉，效果如图：