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

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

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

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

一）創(chuàng)建DrawerLayout

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

<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)閉時(shí)候的主視圖-->
  <FrameLayout 
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  </FrameLayout>
  <!-- The Navigation view 左側(cè)拉開之后的導(dǎo)航視圖 -->
  <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加載進(jìn)來，并且給抽屜里的列表適配了數(shù)據(jù)，這樣就將抽屜布局加載進(jìn)來了。

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);

二）給抽屜里的列表添加點(diǎn)擊事件，動(dòng)態(tài)添加碎片進(jìn)入主視圖

1）給抽屜里的列表項(xiàng)添加點(diǎn)擊事件，每點(diǎn)擊列表項(xiàng)，讓其在主內(nèi)容視圖里添加一個(gè)Fragment，讓這個(gè)Fragment里顯示點(diǎn)擊的列表項(xiàng)里的內(nèi)容，先寫這個(gè)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(),把布局加載進(jìn)來，然后獲取到點(diǎn)擊項(xiàng)里的內(nèi)容，這個(gè)是在MainActivity里通過讓碎片攜帶參數(shù)的方法來實(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）給抽屜里的列表添加點(diǎn)擊事件，點(diǎn)擊后會(huì)進(jìn)入碎片界面，并且碎片攜帶了Bundle類型的參數(shù)，參數(shù)的值我們傳入了列表數(shù)據(jù)menuList.get(position),使用碎片的方法如下，獲取碎片的實(shí)例之后再通過getFragmentManager()獲取碎片管理器，給碎片管理器開啟事務(wù)，開啟事務(wù)之后的碎片管理器用replace()方法將碎片的布局替換原來的主視圖布局，這樣一個(gè)碎片就添加進(jìn)來了

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

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

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

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

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

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

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("請(qǐng)選擇");
  invalidateOptionsMenu();//重繪actionBar上的菜單項(xiàng),執(zhí)行這個(gè)方法的時(shí)候會(huì)回調(diào)onPreareOptionsMenu()
  }
  @Override
  public void onDrawerClosed(View drawerView) {
  super.onDrawerClosed(drawerView);
  getActionBar().setTitle(mTitle);
  invalidateOptionsMenu();
  }
 };
 mDrawerLayout.setDrawerListener(mDrawerToggle);

因?yàn)槲覀兏淖兞薃ctionBar的內(nèi)容，因此要調(diào)用invalidateOptionsMenu()會(huì)重繪actionBar上的菜單項(xiàng)，執(zhí)行這個(gè)方法的時(shí)候會(huì)回調(diào)onPreareOptionsMenu()，所以我們可以在這里通過判斷抽屜處于打開還是關(guān)閉狀態(tài)，來進(jìn)行一些操作，比如隱藏actionbar的菜單項(xiàng)。

既然要隱藏，那么前提是我們得有菜單項(xiàng)，這里先給actionbar添加一個(gè)搜索按鈕，關(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>

然后將菜單加載進(jìn)來

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

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

/*給actionBar的webSearch設(shè)置點(diǎn)擊事件*/
 @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()來判斷，如果打開了就隱藏菜單項(xiàng)

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

四）點(diǎn)擊圖標(biāo)開閉抽屜

為了更加方便的使用抽屜，我們可以通過點(diǎn)擊圖標(biāo)來開閉抽屜界面

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

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

2）因?yàn)閳D標(biāo)也是一個(gè)菜單項(xiàng)，所以點(diǎn)擊它也是會(huì)調(diào)用onOptionsItemSelected(MenuItem item)

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

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

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

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

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