Android側(cè)滑菜單之DrawerLayout用法詳解

更新時間：2019年03月27日 16:36:34 作者：賢寶寶是小仙女

今天小編就為大家分享一篇關(guān)于Android側(cè)滑菜單之DrawerLayout用法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

onConfigurationChanged最早的時候?qū)崿F(xiàn)側(cè)滑菜單功能大多時候需要通過github上一個叫做SlidingMenu的開源通過依賴包來實現(xiàn)，后來谷歌在v4包中添加了DrawerLayout來實現(xiàn)這個功能，完全可以替代SlidingMenu，這里我們來學習DrawerLayout的用法

一）創(chuàng)建DrawerLayout

1）在布局文件里將布局設(shè)置為DrawerLaout，而且因為是v4包中的功能，所以必須寫全包名，注意第一必須先寫主視圖布局，然后再寫抽屜里的視圖，這里我們放了ListView進入抽屜

<pre name="code" class="java"><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">
  <!--The main content view 抽屜關(guān)閉時候的主視圖-->
  <FrameLayout 
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  </FrameLayout>
  <!-- The Navigation view 左側(cè)拉開之后的導航視圖 -->
  <ListView 
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start" //從左往右滑出菜單，如果為end就是從右往左滑出菜單
    android:background="#ffffcc"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    ></ListView>
</android.support.v4.widget.DrawerLayout>

2）在activity里將DrawerLayout加載進來，并且給抽屜里的列表適配了數(shù)據(jù)，這樣就將抽屜布局加載進來了。

public class MainActivity extends Activity implements OnItemClickListener{
 private DrawerLayout mDrawerLayout;
 private ListView mListView;
 private ArrayList<String> menuList;//數(shù)據(jù)
 private ArrayAdapter<String> adapter;//適配器
// private ActionBarDrawerToggle mDrawerToggle;
// private String mTitle;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 // mTitle=(String) getTitle();
 mDrawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
 mListView=(ListView) findViewById(R.id.left_drawer);
 menuList=new ArrayList<String>();
 for(int i=0;i<5;i++)
  menuList.add("劉家威"+i);
 adapter=new ArrayAdapter<String>(this,
  android.R.layout.simple_list_item_1,menuList);
 mListView.setAdapter(adapter);

二）給抽屜里的列表添加點擊事件，動態(tài)添加碎片進入主視圖

1）給抽屜里的列表項添加點擊事件，每點擊列表項，讓其在主內(nèi)容視圖里添加一個Fragment，讓這個Fragment里顯示點擊的列表項里的內(nèi)容，先寫這個FragmentLayout里的布局，這里讓其顯示一段文本

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  <TextView 
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textSize="25sp"/>
</LinearLayout>

2）創(chuàng)建Fragment，在這里重寫onCreateView(),把布局加載進來，然后獲取到點擊項里的內(nèi)容，這個是在MainActivity里通過讓碎片攜帶參數(shù)的方法來實現(xiàn)

package com.example.drawerlayout;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class ContentFragment extends Fragment {
 private TextView tv;
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 View view=inflater.inflate(R.layout.fragment_content,container,false);
 tv=(TextView) view.findViewById(R.id.tv);
 String text=getArguments().getString("text"); //獲取到傳入的值
 tv.setText(text); 
 return view;
 }
}

3）給抽屜里的列表添加點擊事件，點擊后會進入碎片界面，并且碎片攜帶了Bundle類型的參數(shù)，參數(shù)的值我們傳入了列表數(shù)據(jù)menuList.get(position),使用碎片的方法如下，獲取碎片的實例之后再通過getFragmentManager()獲取碎片管理器，給碎片管理器開啟事務(wù)，開啟事務(wù)之后的碎片管理器用replace()方法將碎片的布局替換原來的主視圖布局，這樣一個碎片就添加進來了

最后別忘了關(guān)閉抽屜

@Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
 //在FrameLayout里動態(tài)插入一個Fragment
      Fragment contentFragment=new ContentFragment();   //創(chuàng)建碎片實例
      Bundle args=new Bundle(); //讓每個碎片都攜帶參數(shù)，初始化為Bundle類型
      args.putString("text", menuList.get(position)); //參數(shù)put進入String類型的值，傳入當前點擊的菜單項的值
      contentFragment.setArguments(args); //讓碎片攜帶上參數(shù)
      FragmentManager fm=getFragmentManager(); 
      fm.beginTransaction().replace(R.id.content_frame,contentFragment ).commit(); //開啟事務(wù)，向容器內(nèi)加入碎片，最后提交事務(wù)
    mDrawerLayout.closeDrawer(mListView); //進入碎片界面時關(guān)閉掉抽屜的內(nèi)容
 }

三）監(jiān)聽抽屜的打開關(guān)閉事件

使用ActionBarDrawerToggle，最早的時候在v4包里，現(xiàn)在谷歌把它搬到了v7包里，所以要引入v7依賴包

在引入v7包的時候，我遇到了一個錯誤，support\v7\appcompat\res\values-21\themes-base.xml:error:Error retrieving parent for item :No resources found that matches the given name. 這是因為v7包版本過低，解決方法是在project:properties里target=android-8改為21以上就好

當抽屜打開的時候，標題欄改為"請選擇",當抽屜關(guān)閉的時候，標題欄變?yōu)樵瓉淼腶pp標題

mTitle=(String) getTitle()

mDrawerToggle=new ActionBarDrawerToggle(this, mDrawerLayout,
  R.string.drawer_open,R.string.drawer_close){
  @Override
  public void onDrawerOpened(View drawerView) {
  super.onDrawerOpened(drawerView);
  getActionBar().setTitle("請選擇");
  invalidateOptionsMenu();//重繪actionBar上的菜單項,執(zhí)行這個方法的時候會回調(diào)onPreareOptionsMenu()
  }
  @Override
  public void onDrawerClosed(View drawerView) {
  super.onDrawerClosed(drawerView);
  getActionBar().setTitle(mTitle);
  invalidateOptionsMenu();
  }
 };
 mDrawerLayout.setDrawerListener(mDrawerToggle);

因為我們改變了ActionBar的內(nèi)容，因此要調(diào)用invalidateOptionsMenu()會重繪actionBar上的菜單項，執(zhí)行這個方法的時候會回調(diào)onPreareOptionsMenu()，所以我們可以在這里通過判斷抽屜處于打開還是關(guān)閉狀態(tài)，來進行一些操作，比如隱藏actionbar的菜單項。

既然要隱藏，那么前提是我們得有菜單項，這里先給actionbar添加一個搜索按鈕，關(guān)于給ActionBar添加按鈕的辦法，在關(guān)于ActionBar的博客里已經(jīng)講過了，所以這里直接操作

res/values/menu/main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.drawerlayout.MainActivity" >
<item
  android:id="@+id/websearch"
  android:icon="@drawable/action_search"
  android:showAsAction="ifRoom|withText"
  android:title="webSearch"
  />
</menu>

然后將菜單加載進來

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
 getMenuInflater().inflate(R.menu.main, menu);
 return super.onCreateOptionsMenu(menu);
 }

順路給這個搜索按鈕設(shè)置點擊事件

/*給actionBar的webSearch設(shè)置點擊事件*/
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 switch (item.getItemId()) {
 case R.id.websearch:
  Intent intent=new Intent();
  intent.setAction("android.intent.action.VIEW");
  intent.setData(Uri.parse("http://www.baidu.com"));
  startActivity(intent);
  break;
 default:
  break;
 }
 return super.onOptionsItemSelected(item);
 }

最后在onPrepareOptionsMenu()里通過DrawerLayout的isOpen()來判斷，如果打開了就隱藏菜單項

 @Override
 public boolean onPrepareOptionsMenu(Menu menu) {
  /*在這里通過判斷DrawerLayout是打開還是關(guān)閉，來判斷是否顯示actionBar的webSearch圖標*/
 boolean isDrawerOpen=mDrawerLayout.isDrawerOpen(mListView);
 menu.findItem(R.id.websearch).setVisible(!isDrawerOpen); //如果DrawerLayout是關(guān)閉的就顯示actionBar里的webSearch
 return super.onPrepareOptionsMenu(menu);
 }

四）點擊圖標開閉抽屜

為了更加方便的使用抽屜，我們可以通過點擊圖標來開閉抽屜界面

1）在onCreate()里開啟app icon的功能

 //開啟actionBar的APP icon的功能
 getActionBar().setDisplayHomeAsUpEnabled(true);
 getActionBar().setHomeButtonEnabled(true);

2）因為圖標也是一個菜單項，所以點擊它也是會調(diào)用onOptionsItemSelected(MenuItem item)

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 //將ActionBar上的圖標與Drawer結(jié)合起來
 if(mDrawerToggle.onOptionsItemSelected(item)){
  return true;
 }
       .......
}

這樣就實現(xiàn)了這個功能，但是圖標還是原來的icon，現(xiàn)在把抽屜布局和ActionBarDrawerToggle同步

3）谷歌官方推薦在onPostCreate()里來同步，并且谷歌推薦寫上onConfigurationChanged（）

 @Override
 protected void onPostCreate(Bundle savedInstanceState) {
 //將ActionBarDrawerToggle與DrawerLayout同步起來
 //將ActionBarDrawerToggle中的Drawer圖標設(shè)置為ActionBar里的Home_Button的圖標
 mDrawerToggle.syncState();
 super.onPostCreate(savedInstanceState);
 }
  //這個方法用來監(jiān)測手機狀態(tài)的變化，比如橫屏豎屏的切換
 @Override
 public void onConfigurationChanged(Configuration newConfig) {
 mDrawerToggle.onConfigurationChanged(newConfig);
 super.onConfigurationChanged(newConfig);
 }

綜合以上的所有內(nèi)容，效果圖如下