抽屉菜单

strings.xml

-------------------------------------------------------------------------------------------------------------------------------

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

<resources>

    <string name="app_name">com.navigationdrawer</string>

    <string name="action_settings">Settings</string>

    <string name="hello_world">Hello world!</string>

  <string-array name="planets_array">

        <item>Mercury</item>

        <item>Venus</item>

        <item>Earth</item>

        <item>Mars</item>

        <item>Jupiter</item>

        <item>Saturn</item>

        <item>Uranus</item>

        <item>Neptune</item>

    </string-array>

    <string name="drawer_open">Open navigation drawer</string>

    <string name="drawer_close">Close navigation drawer</string>

    <string name="action_websearch">Web search</string>

    <string name="app_not_available">Sorry, there\'s no web browser available</string>

</resources>

 

activity_main.xml

-------------------------------------------------------------------------------------------------------------------------------

<!-- 

1、创建Drawer Layout在需要抽屉菜单的界面，用DrawerLayout 作为界面根控件。

2、在DrawerLayout里面第一个View为当前界面主内容；第二个和第三个View为抽屉菜单内容。如果当前界面只需要一个抽屉菜单，则第三个View可以省略。

3、下面的例子中DrawerLayout里面包含两个View，第一个FrameLayout中是当前界面主要内容显示区域；第二个ListView为抽屉菜单内容-->

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

 

    <!-- As the main content view, the view below consumes the entire

         space available using match_parent in both dimensions. -->

    <FrameLayout

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

 

    <!-- android:layout_gravity="start" tells DrawerLayout to treat

         this as a sliding drawer on the left side for left-to-right

         languages and on the right side for right-to-left languages.

         The drawer is given a fixed width in dp and extends the full height of

         the container. A solid background is used for contrast

         with the content view. -->

    <ListView

        android:id="@+id/left_drawer"

        android:layout_width="200dp"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        android:background="#111"

        android:choiceMode="singleChoice"

        android:divider="@android:color/transparent"

        android:dividerHeight="1dp" />

 

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

 

drawer_list_item.xml

-------------------------------------------------------------------------------------------------------------------------------

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/text1"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:textAppearance="?android:attr/textAppearanceListItemSmall"

    android:gravity="center_vertical"

    android:paddingLeft="16dp"

    android:paddingRight="16dp"

    android:textColor="#fff"

    android:background="?android:attr/activatedBackgroundIndicator"

    android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

 

fragment_planet.xml

-------------------------------------------------------------------------------------------------------------------------------

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/image"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#000000"

    android:gravity="center"

    android:padding="32dp" />

 

MainActivity.java

-------------------------------------------------------------------------------------------------------------------------------

/**

 * 

 * 项目名称：navigationdrawer   

 * 类  名  称：MainActivity   

 * 类  描  述：  

 * 

 * 代码中有如下几点需要注意：

 *1、显示界面主要内容的View (上面的 FrameLayout ) 必须为DrawerLayout的第一个子View， 

 *原因在于 XML 布局文件中的View顺序为Android系统中的 z-ordering顺序，而抽屉必须出现在内容之上。

 *显示界面内容的View宽度和高度设置为和父View一样，原因在于当抽屉菜单不可见的时候，界面内容代表整个界面UI。

 *

 *2、抽屉菜单 (上面的 ListView) 必须使用android:layout_gravity属性设置水平的 gravity值 .

 *如果要支持 right-to-left (RTL，从右向左阅读)语言 用 "start" 代替 "left" (当在 RTL语言运行时候，菜单出现在右侧)。

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

 *

 *3、监听菜单打开关闭事件

 *如果需要监听菜单打开关闭事件，则需要调用 DrawerLayout类的 setDrawerListener() 函数，参数为 DrawerLayout.DrawerListener接口的实现。

 *该接口提供了菜单打开关闭等事件的回调函数，例如 onDrawerOpened() 和onDrawerClosed().

 *

 *4、如果您的Activity使用了 action bar，则您可以使用Support库提供的 ActionBarDrawerToggle 类，该类实现了 DrawerLayout.DrawerListener接口，

 *并且您还可以根据需要重写相关的函数。该类实现了菜单和Action bar相关的操作。

 *

 *5、当菜单显示的时候您应该根据情况隐藏ActionBar上的功能菜单并且修改ActionBar的标题，可以使用 ActionBarDrawerToggle 类来实现这些功能

 *

 *6、使用 ActionBarDrawerToggle ，先通过其构造函数来创建该对象，构造函数需要如下参数：

 *显示抽屉的 Activity 对象

  *DrawerLayout 对象

 *一个用来指示抽屉的 drawable资源

 *一个用来描述打开抽屉的文本 (用于支持可访问性)。

 *一个用来描述关闭抽屉的文本(用于支持可访问性).

 *无论你是否继承 ActionBarDrawerToggle 来实现抽屉监听器，您都需要在Activity的生命周期函数中调用ActionBarDrawerToggle 的一些函数。

 *  

 * 官网详细说明：http://developer.android.com/design/patterns/navigation-drawer.html

 * 创  建  人：fy   

 * 创建时间：2014-3-14 下午3:08:41   

 * Copyright (c) 方勇-版权所有

 */

public class MainActivity extends Activity {

/* 抽屉菜单--根控件 */

private DrawerLayout mDrawerLayout;

/* 抽屉菜单--左边菜单 */

private ListView mDrawerList;

/* 抽屉菜单--应用图标指示抽屉开关 */

private ActionBarDrawerToggle mDrawerToggle;

 

private String mDrawerTitle;

/* 抽屉菜单--左边菜单--数据集合 */

private String[] mPlanetTitles;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

findViews();

setListeners();

initdata();

if (savedInstanceState == null) {

selectItem(0);

}

}

 

private void findViews() {

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerList = (ListView) findViewById(R.id.left_drawer);

// ActionBarDrawerToggle ties together the the proper interactions

// between the sliding drawer and the action bar app icon

mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */

mDrawerLayout, /* DrawerLayout object */

R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */

R.string.drawer_open, /* "open drawer" description for accessibility */

R.string.drawer_close /* "close drawer" description for accessibility */

) {

/*关闭菜单*/

public void onDrawerClosed(View view) {

getActionBar().setTitle(mDrawerTitle);

// Declare that the options menu has changed, so should be recreated.

// // creates call to onPrepareOptionsMenu()

invalidateOptionsMenu();

}

/*打开菜单*/

public void onDrawerOpened(View drawerView) {

getActionBar().setTitle(mDrawerTitle);

// Declare that the options menu has changed, so should be recreated.

// // creates call to onPrepareOptionsMenu()

invalidateOptionsMenu();

}

};

}

 

private void setListeners() {

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

mDrawerLayout.setDrawerListener(mDrawerToggle);

}

 

private void initdata() {

// 菜单标题

mDrawerTitle = getTitle().toString();

// 左边菜单数据集合

mPlanetTitles = getResources().getStringArray(R.array.planets_array);

//设置拉出导航菜单时阴影，官方示例不明显，可把图片背景修改一下  

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

 

//ActionBar操作模式开启 

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);

}

 

 

/* The click listner for ListView in the navigation drawer */

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

setTitle(mPlanetTitles[position]);

mDrawerLayout.closeDrawer(mDrawerList);

}

 

@Override

public void setTitle(CharSequence title) {

// mTitle = title;

// getActionBar().setTitle(mTitle);

mDrawerTitle = title.toString();

getActionBar().setTitle(mDrawerTitle);

}

 

/**

 * 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);

}

 

/**

 * Fragment that appears in the "content_frame", shows a planet

 */

public static class PlanetFragment extends Fragment {

public static final String ARG_PLANET_NUMBER = "planet_number";

 

public PlanetFragment() {

// Empty constructor required for fragment subclasses

}

 

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_planet, container, false);

int i = getArguments().getInt(ARG_PLANET_NUMBER);

String planet = getResources().getStringArray(R.array.planets_array)[i];

 

int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()), "drawable",

        getActivity().getPackageName());

((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);

getActivity().setTitle(planet);

return rootView;

}

}

}

<!--EndFragment-->