drawerLayout是Support Library包中實現(xiàn)了側(cè)滑菜單效果的控件，可以說drawerLayout是因為第三方控件如MenuDrawer等的出現(xiàn)之后，google借鑒而出現(xiàn)的產(chǎn)物。drawerLayout分為側(cè)邊菜單和主內(nèi)容區(qū)兩部分，側(cè)邊菜單可以根據(jù)手勢展開與隱藏（drawerLayout自身特性），主內(nèi)容區(qū)的內(nèi)容可以隨著菜單的點擊而變化（這需要使用者自己實現(xiàn)）。
原理：添加多個功能選項布局，流行的策劃，DrawerLayout：支持拖動顯示或者隱藏內(nèi)容的空間，v4的控件，必須依賴v7
第一點 drawerLayout其實是一個布局控件，跟LinearLayout等控件是一種東西，但是drawerLayout帶有滑動的功能。只要按照drawerLayout的規(guī)定布局方式寫完布局，就能有側(cè)滑的效果。
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout 抽屜式布局 ........ android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout 主頁內(nèi)容 android:id="@+id/main_fl_content" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> <FrameLayout 菜單內(nèi)容 android:layout_gravity="start" 判斷哪個元素是菜單 android:id="@+id/main_fl_menu" android:layout_width="200dp" android:layout_height="match_parent" android:background="#FFF000"> <include layout="@layout/main_fl_menu_item"/> Include 是一個引入功能的指令，會根據(jù)Layout變量加載指定的布局 ，Layout前面沒有前綴 </FrameLayout></android.support.v4.widget.DrawerLayout>也可以
<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"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#111"/></android.support.v4.widget.DrawerLayout>有兩點要注意：主內(nèi)容區(qū)的布局代碼要放在側(cè)滑菜單布局的前面,這可以幫助DrawerLayout判斷誰是側(cè)滑菜單，誰是主內(nèi)容區(qū)；側(cè)滑菜單的部分的布局（這里是ListView）可以設(shè)置layout_gravity屬性，他表示側(cè)滑菜單是在左邊還是右邊。
第二點 drawerLayout左側(cè)菜單（或者右側(cè)）的展開與隱藏可以被DrawerLayout.DrawerListener的實現(xiàn)監(jiān)聽到，這樣你就可以在菜單展開與隱藏反生的時刻做一些希望做的事情，比如更新actionbar菜單等。如果你的activity有actionbar的話，還是建議你用ActionBarDrawerToggle來監(jiān)聽，ActionBarDrawerToggle實現(xiàn)了DrawerListener，所以他能做DrawerListener可以做的任何事情，同時他還能將drawerLayout的展開和隱藏與actionbar的app 圖標(biāo)關(guān)聯(lián)起來，當(dāng)展開與隱藏的時候圖標(biāo)有一定的平移效果，點擊圖標(biāo)的時候還能展開或者隱藏菜單。
mDrawerToggle = new ActionBarDrawerToggle( this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close ) { public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); invalidateOptionsMenu(); // creates call to onPRepareOptionsMenu() } public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() }};mDrawerLayout.setDrawerListener(mDrawerToggle);或者是
/** * 設(shè)置箭頭打開動畫 */ private void initRotateArrowAnimation() { //參數(shù)1：Activity 參數(shù)2：抽屜控件 參數(shù)3,4：string ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close); //同步狀態(tài) 作用：把返回圖標(biāo)替換 2，把旋轉(zhuǎn)特效箭頭跟抽屜關(guān)聯(lián) toggle.syncState(); //抽屜滑動的距離換成角度，使用箭頭旋轉(zhuǎn) mDrawerLayout.addDrawerListener(toggle); }第三點 何為側(cè)邊菜單。 側(cè)邊菜單其實只是一個普通的View，一般里面裝的是ListView，看起來就像菜單，他完全可以是一個button，textView等等。雖然稱為菜單，但跟Activity的菜單形式是兩碼事，Activity的菜單只需要在資源文件中定義好，就能按照固定的形式顯示出來。而drawerLayout的側(cè)邊菜單顯示成什么樣完全是取決于你自己，同樣點擊事件也完全由你自己去寫。如下代碼所示我們的側(cè)邊菜單是一個ListView顯示的：
//如果布局文件是ListView的話就可以設(shè)置適配器mDrawerList.setAdapter(new ArrayAdapter<String>(this,R.layout.drawer_list_item, mPlanetTitles));//設(shè)置點擊事件mDrawerList.setOnItemClickListener(new DrawerItemClickListener());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) { 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(); mDrawerList.setItemChecked(position, true); setTitle(mPlanetTitles[position]); mDrawerLayout.closeDrawer(mDrawerList);}第四點 設(shè)置菜單返回鍵點擊事件
這是Activity提供處理標(biāo)題元素的事件方法，返回true消費事件 關(guān)鍵點：android.R.id.home 是系統(tǒng)分配置的返回的idpublic boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case android.R.id.home: //這個id是固定的，系統(tǒng)分配的 if(mDrawerLayout.isDrawerOpen(mMenuLayout)){ //如果是打開狀態(tài)，那么點擊就關(guān)閉 mDrawerLayout.closeDrawer(mMenuLayout); }else{ //如果是關(guān)閉狀態(tài)，那么點擊就打開 mDrawerLayout.openDrawer(mMenuLayout);⑾ } break; case R.id.menu1://菜單1 Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; return super.onOptionsItemSelected(item); }
首先是我們的主布局，注意：最外層要是DrawerLayout?。。?！
activity_main.xml：
<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"> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" /> <ListView android:id="@+id/list_left_drawer" android:layout_width="180dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#080808" android:choiceMode="singleChoice" android:divider="#FFFFFF" android:dividerHeight="1dp" /></android.support.v4.widget.DrawerLayout>接著ListView的布局代碼和domain類：Item比較簡單，就不給出了，直接上中間Fragment的 布局以及代碼吧！另外Adapter直接復(fù)用我們之前寫的那個可復(fù)用的MyAdapter！ fg_content.xml：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="25sp" /></RelativeLayout>ContentFragment.java：
public class ContentFragment extends Fragment { private TextView tv_content; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_content, container, false); tv_content = (TextView) view.findViewById(R.id.tv_content); String text = getArguments().getString("text"); tv_content.setText(text); return view; }}最后是我們的Activity類 MainActivity.java：
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{ private DrawerLayout drawer_layout; private ListView list_left_drawer; private ArrayList<Item> menuLists; private MyAdapter<Item> myAdapter = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout); list_left_drawer = (ListView) findViewById(R.id.list_left_drawer); menuLists = new ArrayList<Item>(); menuLists.add(new Item(R.m示例2.左右兩個側(cè)滑菜單的實現(xiàn)嗯，不知道你有沒有發(fā)現(xiàn)，從上面的DrawerLayout的布局，我們大概可以猜到，DrawerLayout 最多由三個部分組成，中間的內(nèi)容部分，左邊的側(cè)滑菜單部分，右邊的側(cè)滑菜單部分組成！ 下面我們來寫一個帶有兩個側(cè)滑菜單的示例！
首先我們創(chuàng)建兩個Fragment以及對應(yīng)的布局，他們分別是左右側(cè)滑菜單！ 左邊Fragment： 布局：fg_left.xml，這里就用了一個圖片而以，點擊后彈出一個新的Activity； 當(dāng)然你可以根據(jù)自己的需求進(jìn)行擴展！
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/img_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg_menu_left"/></LinearLayout>對應(yīng)的LeftFragment.java：
public class LeftFragment extends Fragment{ private DrawerLayout drawer_layout; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_left, container, false); ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg); img_bg.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { getActivity().startActivity(new Intent(getActivity(),OtherActivity.class)); drawer_layout.closeDrawer(Gravity.START); } }); return view; } //暴露給Activity，用于傳入DrawerLayout，因為點擊后想關(guān)掉DrawerLayout public void setDrawerLayout(DrawerLayout drawer_layout){ this.drawer_layout = drawer_layout; }}右面的Fragment： 布局就三個按鈕，點擊后替換中間部分的Fragment，布局fg_right.xml代碼如下：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="25sp" /></RelativeLayout>ContentFragment.java：
public class ContentFragment extends Fragment { private TextView tv_content; private String strContent; private int bgColor; public ContentFragment(String strContent,int bgColor) { this.strContent = strContent; this.bgColor = bgColor; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_content, container, false); view.setBackgroundColor(getResources().getColor(bgColor)); tv_content = (TextView) view.findViewById(R.id.tv_content); tv_content.setText(strContent); return view; }}編寫好以后，就到我們的Activity的布局了以及Activity的代碼了： 在此之前我們還需要些一個頂部條形欄的布局： view_topbar.xml：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#DCDEDB"> <Button android:id="@+id/btn_right" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_alignParentRight="true" android:background="@drawable/btn_selctor"/></RelativeLayout>然后是activity_main.xml：
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/topbar" layout="@layout/view_topbar" android:layout_width="wrap_content" android:layout_height="48dp" /> <FrameLayout android:id="@+id/fly_content" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <fragment android:id="@+id/fg_left_menu" android:name="jay.com.drawerlayoutdemo2.LeftFragment" android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="start" android:tag="LEFT" tools:layout="@layout/fg_left" /> <fragment android:id="@+id/fg_right_menu" android:name="jay.com.drawerlayoutdemo2.RightFragment" android:layout_width="100dp" android:layout_height="match_parent" android:layout_gravity="end" android:tag="RIGHT" tools:layout="@layout/fg_right" /></android.support.v4.widget.DrawerLayout>最后是MainActivity.java：
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private DrawerLayout drawer_layout; private FrameLayout fly_content; private View topbar; private Button btn_right; private RightFragment fg_right_menu; private LeftFragment fg_left_menu; private FragmentManager fManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fManager = getSupportFragmentManager(); fg_right_menu = (RightFragment) fManager.findFragmentById(R.id.fg_right_menu); fg_left_menu = (LeftFragment) fManager.findFragmentById(R.id.fg_left_menu); initViews(); } private void initViews() { drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout); fly_content = (FrameLayout) findViewById(R.id.fly_content); topbar = findViewById(R.id.topbar); btn_right = (Button) topbar.findViewById(R.id.btn_right); btn_right.setOnClickListener(this); //設(shè)置右面的側(cè)滑菜單只能通過編程來打開 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END); drawer_layout.setDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View view, float v) { } @Override public void onDrawerOpened(View view) { } @Override public void onDrawerClosed(View view) { drawer_layout.setDrawerLockMode( DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END); } @Override public void onDrawerStateChanged(int i) { } }); fg_right_menu.setDrawerLayout(drawer_layout); fg_left_menu.setDrawerLayout(drawer_layout); } @Override public void onClick(View v) { drawer_layout.openDrawer(Gravity.RIGHT); drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.END); //解除鎖定 }}1. drawer_layout.openDrawer(Gravity.END);這句是設(shè)置打開的哪個菜單START代表左邊，END代表右邊2. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END); 鎖定右面的側(cè)滑菜單，不能通過手勢關(guān)閉或者打開，只能通過代碼打開！即調(diào)用openDrawer方法！ 接著 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END); 解除鎖定狀態(tài)，即可以通過手勢關(guān)閉側(cè)滑菜單 最后在drawer關(guān)閉的時候調(diào)用： drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END); 再次鎖定右邊的側(cè)滑菜單！3. 布局代碼中的Tag屬性的作用？ 答：這里沒用到，在重寫DrawerListener的onDrawerSlide方法時，我們可以通過他的第一個 參數(shù)drawerView，調(diào)用drawerView.getTag().equals("START")判斷觸發(fā)菜單事件的是哪個 菜單！然后可以進(jìn)行對應(yīng)的操作！新聞熱點
疑難解答
圖片精選
