Android抽屜導(dǎo)航Navigation Drawer實例解析

更新時間：2016年05月26日 11:06:29 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了Android抽屜導(dǎo)航NavigationDrawer實例，感興趣的小伙伴們可以參考一下

我們重點來研究一下Android抽屜導(dǎo)航 NavigationDrawer。先來感性認(rèn)識一下這種效果吧：

看了很多應(yīng)用，覺得這種側(cè)滑的抽屜效果的菜單很好。不用切換到另一個頁面，也不用去按菜單的硬件按鈕，直接在界面上一個按鈕點擊，菜單就滑出來，而且感覺能放很多東西。

最簡單就是用官方的抽屜導(dǎo)航 NavigationDrawerLayout 來實現(xiàn)。DrawerLayout這個類是在Support Library里的，需要加上android-support-v4.jar這個包。然后程序中用時在前面導(dǎo)入import android.support.v4.widget.DrawerLayout;

如果找不到這個類，首先用SDK Manager更新一下Android Support Library，然后在Android SDK\extras\android\support\v4路徑下找到android-support-v4.jar，復(fù)制到項目的libs路徑，將其Add to Build Path.

當(dāng)你新建一個 Android 項目的時候，你可以選擇使用 Navigation Drawer：

我們來簡要看看代碼，首先是 NavigationDrawerFragment.java 這個類，加載了哪些布局文件。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
  // 給抽屜ListView找到對應(yīng)的XML布局
  mDrawerListView = (ListView) inflater.inflate(
      R.layout.fragment_navigation_drawer, container, false);
  // 給抽屜ListView綁定點擊監(jiān)聽器，點擊時，選中點擊的項
  mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      selectItem(position);
    }
  });
   
  // 給抽屜ListView綁定一個適配器
  mDrawerListView.setAdapter(new ArrayAdapter<String>(
      getActionBar().getThemedContext(),
      android.R.layout.simple_list_item_activated_1,
      android.R.id.text1,
      new String[]{
          getString(R.string.title_section1),
          getString(R.string.title_section2),
          getString(R.string.title_section3),
          getString(R.string.title_section4),
          getString(R.string.title_section5),
      }));
   
  //mDrawerListView.setAdapter(new DrawerAdapter(getActivity()));
  // 設(shè)置抽屜ListView以顯示某一選中項的形態(tài)出現(xiàn)。
  mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
  // 將處理后的抽屜ListView返回

  return mDrawerListView;
}

NavigationDrawer 主要是一個 ListView，這個 ListView 使用了 fragment_navigation_drawer.xml：

<ListView 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:background="@color/image_bg_green"
  android:choiceMode="singleChoice"
  android:divider="@color/image_bg_lightgreen"
  android:dividerHeight="1dp"
  tools:context="net.nowamagic.magicapp_v7.NavigationDrawerFragment" />

這個 ListView 就是抽屜導(dǎo)航直觀上看到的那個 ListView。同時 ListView 里面每個格子都由一個相對布局填充，其 XML 為 fragment_main.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:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="net.nowamagic.magicapp_v7.MainActivity$PlaceholderFragment" >
  <TextView
    android:id="@+id/section_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</RelativeLayout>

新建一個基于 NavigationDrawer 的項目，大概效果如下：