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

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

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

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

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

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

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

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

我們來(lái)簡(jiǎn)要看看代碼，首先是 NavigationDrawerFragment.java 這個(gè)類(lèi)，加載了哪些布局文件。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
  // 給抽屜ListView找到對(duì)應(yīng)的XML布局
  mDrawerListView = (ListView) inflater.inflate(
      R.layout.fragment_navigation_drawer, container, false);
  // 給抽屜ListView綁定點(diǎn)擊監(jiān)聽(tīng)器，點(diǎn)擊時(shí)，選中點(diǎn)擊的項(xiàng)
  mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      selectItem(position);
    }
  });
   
  // 給抽屜ListView綁定一個(gè)適配器
  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以顯示某一選中項(xiàng)的形態(tài)出現(xiàn)。
  mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
  // 將處理后的抽屜ListView返回

  return mDrawerListView;
}

NavigationDrawer 主要是一個(gè) ListView，這個(gè) 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" />

這個(gè) ListView 就是抽屜導(dǎo)航直觀上看到的那個(gè) ListView。同時(shí) ListView 里面每個(gè)格子都由一個(gè)相對(duì)布局填充，其 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>

新建一個(gè)基于 NavigationDrawer 的項(xiàng)目，大概效果如下：