Android抽屜導航Navigation Drawer實例解析

2019-12-12 06:19:24

字體：大中小

供稿：網(wǎng)友

我們重點來研究一下Android抽屜導航 NavigationDrawer。先來感性認識一下這種效果吧：

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

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

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

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

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

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,    Bundle savedInstanceState) {  // 給抽屜ListView找到對應的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()));  // 設置抽屜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 就是抽屜導航直觀上看到的那個 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 的項目，大概效果如下：