android側滑菜單控件DrawerLayout使用方法詳解

更新時間：2017年12月02日 10:09:14 作者：戀戀西風

這篇文章主要為大家詳細介紹了android側滑菜單控件DrawerLayout的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

drawerLayout是Support Library包中實現(xiàn)了側滑菜單效果的控件，可以說drawerLayout是因為第三方控件如MenuDrawer等的出現(xiàn)之后，google借鑒而出現(xiàn)的產(chǎn)物。drawerLayout分為側邊菜單和主內容區(qū)兩部分，側邊菜單可以根據(jù)手勢展開與隱藏（drawerLayout自身特性），主內容區(qū)的內容可以隨著菜單的點擊而變化（這需要使用者自己實現(xiàn)）。

使用步驟：

創(chuàng)建一個DrawerLayout

為了添加導航抽屜，你需要在你的布局界面中聲明一個DrawerLayout對象作為布局的根節(jié)點。同時在DrawerLayout內部添加兩個view:

添加一個View，它包含應用的主內容（當抽屜隱藏時你的主要布局）；
添加另一個View它包含了導航抽屜；

如下面例子所示：該布局使用了DrawerLayout它包含了兩個子節(jié)點：一個FrameLayout它包含了主要內容（在運行時將會被Fragment替換）和一個ListView作為導航抽屜,上面titlebar 上圖標，負責打開、關閉抽屜；

<?xml version="1.0" encoding="utf-8"?> 
<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" 
 > 
 <LinearLayout 
  android:orientation="horizontal" 
  android:layout_width="match_parent" 
  android:id="@+id/titleBar" 
  android:gravity="center_vertical" 
  android:background="@android:color/darker_gray" 
  android:layout_height="40dp"> 
 
  <ImageView 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:src="@drawable/ic_drawer" 
   android:onClick="onClickDrawerOpened" 
   android:clickable="true" 
   android:id="@+id/imageView" /> 
 </LinearLayout> 
 <android.support.v4.widget.DrawerLayout 
  android:id="@+id/drawer_layout" 
  android:layout_below="@id/titleBar" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
  <!-- The main content view --> 
 
  <FrameLayout 
   android:id="@+id/content_frame" 
 
   android:layout_width="match_parent" 
   android:layout_height="match_parent"></FrameLayout> 
 
  <!-- The navigation drawer --> 
  <ListView 
   android:id="@+id/left_drawer" 
   android:layout_width="240dp" 
   android:layout_height="match_parent" 
   android:layout_gravity="start" 
   android:background="#111" 
   android:choiceMode="singleChoice" 
   android:divider="@android:color/transparent" 
   android:dividerHeight="0dp" /> 
 </android.support.v4.widget.DrawerLayout> 
</RelativeLayout>

上面這個例子包含了一些重要的布局技巧：

主內容View（FrameLayout在最上層）必須是Drawerlayout的第一個子節(jié)點因為XML在安排這些界面的時候是按照Z軸的順序來安排的同時抽屜必須在主內容的頂部。
主內容View被設置成匹配父View的寬和高，因為當導航抽屜隱藏的時候它要填充整個UI。
導航View（ListView）必須被聲明一個水平的gravity借助屬性android:layout_gravity。為了滿足從右到左的約定，聲明它的值為”start” 代替 “l(fā)eft”(因此這個抽屜將會在右面呈現(xiàn)當布局是RTL時)
在導航View聲明時：寬度用dp為單位、高度匹配父View。為了保證用戶無論怎樣都能看到主內容的一部分，導航抽屜的寬度不能超過320dp

初始化Drawer List

在你的Activity中，要做的第一件事是初始化導航抽屜的列表項。具體該怎么做根據(jù)你APP的內容來定，但是導航抽屜通常包含一個Listview，所以還需要一個相匹配的Adapter（比如 ArrayAdapter 或者 SimpleCursorAdapter）
下面的例子，告訴你該如何借助一個string array 來初始化一個導航list

public class MainActivity extends Activity { 
 private DrawerLayout mDrawerLayout; 
 private ListView mDrawerList; 
 
 private String[] mPlanetTitles; 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
 
  mPlanetTitles = getResources().getStringArray(R.array.planets_array); 
  mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 
  mDrawerList = (ListView) findViewById(R.id.left_drawer); 
 
  // set a custom shadow that overlays the main content when the drawer opens 
  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)); 
  mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); 
 } 
//................................ 
}

處理導航點擊事件

當用戶選擇了抽屜列表里面的一個Item時, 系統(tǒng)調用onItemClickListener上的onItemClick(), 給setOnItemClickListener().
你在onItemClick()方法里面做什么, 取決于你的app實現(xiàn)的結構. 在下面的例子中, 選擇每一個Item都會在主要內容的布局中插入一個不同的Fragment.

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); 
 mDrawerLayout.closeDrawer(mDrawerList); 
 }

打開和關閉抽屜

使用onDrawerOpened()和onDrawerClosed () 打開和關閉抽屜：

public void onClickDrawerOpened(View drawerView) { 
 if(!mDrawerLayout.isDrawerOpen(GravityCompat.START))//if not open ,open or close; 
 { 
 mDrawerLayout.openDrawer(mDrawerList); 
 } 
 else 
 { 
 mDrawerLayout.closeDrawer(mDrawerList); 
 } 
}

效果圖：