版權聲明：本文為博主原創(chuàng)文章屉符，未經(jīng)博主允許不得轉載。
微博：厲圣杰
源碼：AndroidDemo/DrawerLayout
文中如有紕漏爽丹，歡迎大家留言指出筑煮。
Android 抽屜菜單實現(xiàn)方式主要有兩種方式，一是使用 Google 官方推出的側滑菜單實現(xiàn)：DrawerLayout 粤蝎，這個類是在 android-support-v4 包里真仲；二是使用開源庫，如: SlidingMenu 初澎，不過此開源庫自 2014年5月10號起就沒有更新過秸应，更是留有二百多沒關閉的 issue ，故直接放棄此庫碑宴。所以只考慮使用 DrawerLayout 實現(xiàn)抽屜式菜單软啼。
DrawerLayout
DrawerLayout 是窗口的頂級容器，它允許從窗口的左邊緣或右邊緣拉出抽屜式菜單延柠。下圖是網(wǎng)易新聞抽屜式菜單樣式：
網(wǎng)易新聞抽屜式菜單
抽屜式菜單的定位和布局通過 android:layout_gravity 屬性來控制祸挪，其可選值為 left 、 right 或者 start 贞间、 end 贿条。但是，每一邊緣只能設置一個抽屜式視圖增热，否則會拋出運行時異常整以。
DrawerLayout 的第一個子View 用于顯示主要內(nèi)容，即抽屜菜單沒有打開時顯示的布局峻仇，它可以是 LinearLayout 公黑、 FrameLayout ...第一個元素寬高默認都是 match_parent 的而且不用設置 layout_gravity 屬性。
接下來緊跟的子元素是抽屜菜單摄咆，如 ListView 凡蚜、 LinearLayout 等。抽屜式菜單一般高度都設為 match_parent 吭从，而寬度不應該超過 320dp 朝蜘，這樣用戶可以在打開抽屜菜單時看到部分內(nèi)容界面。
典型 DrawerLayout 布局如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<!-- 一般寬高都是 match_parent 且不用設置 layout_gravity 屬性 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 用于替換 ActionBar影锈，如果不需要可以直接刪除 -->
<include
android:id="@+id/tool_bar"
layout="@layout/tool_bar" />
<!-- 一般 DrawerLayout 是與 Fragment 結合使用的芹务，當點擊抽屜菜單中的 item 時，使用 FragmentManager 來實現(xiàn)切換鸭廷，實現(xiàn)內(nèi)容頁的改變 -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- The navigation drawer -->
<!-- layout_width 一般小于 320dp -->
<!-- 通過設置 layout_gravity 對抽屜菜單進行定位 -->
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/white"
android:orientation="vertical">
<!-- 實現(xiàn)自定義布局枣抱，不一定要是 ListView -->
</LinearLayout>
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@color/white"
android:orientation="vertical">
<!-- 實現(xiàn)自定義布局，不一定要是 ListView -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
DrawerLayout 初試身手
前面講了 DrawerLayout 的基本用途辆床、注意事項及其典型的布局格式佳晶，下面我們就進行實戰(zhàn)，實現(xiàn)如下效果：
從效果圖中可以看出來讼载，抽屜菜單分為 header 和 list 兩部分轿秧，那么我們就需要在抽屜菜單這部分布局中實現(xiàn)。
activity_drawer_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<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 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="@+id/tool_bar"
layout="@layout/tool_bar" />
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/skyblue"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingTop="20dp">
<ImageView
android:id="@+id/iv_header"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:text="厲圣杰"
android:textColor="@color/black"
android:textSize="25sp" />
</LinearLayout>
<ListView
android:id="@+id/lv_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="@color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@color/colorAccent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Right Drawer" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
主要代碼：
public class DrawerLayoutActivity extends AppCompatActivity {
private int[] mIcons = new int[]{R.mipmap.ic_contacts_black_24dp, R.mipmap.ic_message_black_24dp
, R.mipmap.ic_wifi_black_24dp, R.mipmap.ic_settings_black_24dp};
private String[] mContents = new String[]{"Contacts", "Message", "Wifi", "Settings"};
private DrawerLayout mDrawerLayout;
private Toolbar mToolbar;
private TextView mTvContent;
private ListView mLvItem;
private DrawerItemAdapter mAdapter;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer_layout);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
mTvContent = (TextView) findViewById(R.id.tv_content);
mLvItem = (ListView) findViewById(R.id.lv_item);
mAdapter = new DrawerItemAdapter();
mLvItem.setAdapter(mAdapter);
mLvItem.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mTvContent.setText("Current Selected Item : " + position);
}
});
//設置 Logo
//mToolbar.setLogo(R.mipmap.ic_launcher);
//使用 Toolbar 取代 ActionBar
setSupportActionBar(mToolbar);
//注意咨堤，設置 Toolbar 及相關點擊事件最好放在 setSupportActionBar 后菇篡，否則很可能無效
//設置 Navigation 圖標和點擊事件必須放在 setSupportActionBar 后，否則無效
mToolbar.setNavigationIcon(R.mipmap.ic_menu_black_24dp);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
R.string.open_drawer, R.string.close_drawer);
mDrawerLayout.addDrawerListener(mDrawerToggle);
}
class DrawerItemAdapter extends BaseAdapter {
@Override
public int getCount() {
return mIcons.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder vh;
if (convertView == null) {
vh = new ViewHolder();
convertView = LayoutInflater.from(DrawerLayoutActivity.this).inflate(R.layout.item_drawer, null);
vh.ivIcon = (ImageView) convertView.findViewById(R.id.iv_icon);
vh.tvContent = (TextView) convertView.findViewById(R.id.tv_content);
convertView.setTag(vh);
}
vh = (ViewHolder) convertView.getTag();
vh.ivIcon.setImageResource(mIcons[position]);
vh.tvContent.setText(mContents[position]);
return convertView;
}
class ViewHolder {
ImageView ivIcon;
TextView tvContent;
}
}
}
這里有一點要注意的是一喘，設置 Toolbar 及相關點擊事件最好放在 setSupportActionBar 后驱还，否則很可能無效，關于 Toolbar 可以參考這篇文章凸克。
如果想要實現(xiàn)以下這種效果议蟆，則只需要對布局文件稍作修改即可。
<?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">
<include layout="@layout/tool_bar" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/skyblue"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingTop="20dp">
<ImageView
android:id="@+id/iv_header"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:text="厲圣杰"
android:textColor="@color/black"
android:textSize="25sp" />
</LinearLayout>
<ListView
android:id="@+id/lv_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="@color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@color/colorAccent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Right Drawer" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
另外說明一點萎战，關于如此抽屜菜單樣式實現(xiàn)還有以下幾種方式：
- 通過往 ListView 中添加 Header
- 使用 NavigationView 實現(xiàn)
踩過的坑
測試 DrawerLayout 中踩了幾個坑咐容，其中一個就是在設置 Toolbar 的 Navigation 圖標點擊事件無效，解決辦法就是將相關設置放在 setSupportActionBar() 方法后蚂维，另外幾個坑都是跟設置主題樣式有關戳粒。特此記錄 log 及相關的解決方法。
使用 DrawerLayout 碰到關于 style 的坑
FATAL EXCEPTION: main
Process: com.littlejie.drawerlayout, PID: 3964
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.littlejie.drawerlayout/com.littlejie.drawerlayout.DrawerLayoutActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
at android.support.v7.app.AppCompatDelegateImplV7.createSubDecor(AppCompatDelegateImplV7.java:343)
at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:312)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:277)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
at com.littlejie.drawerlayout.DrawerLayoutActivity.onCreate(DrawerLayoutActivity.java:36)
at android.app.Activity.performCreate(Activity.java:6679)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
碰到上述問題是鸟雏，使用 AppCompatActivity 的主題設置不對享郊，將主題改為如下即可：
<style name="AppCompat" parent="Theme.AppCompat"></style>
FATAL EXCEPTION: main
Process: com.littlejie.drawerlayout, PID: 5397
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.littlejie.drawerlayout/com.littlejie.drawerlayout.DrawerLayoutActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
at android.support.v7.app.AppCompatDelegateImplV7.setSupportActionBar(AppCompatDelegateImplV7.java:198)
at android.support.v7.app.AppCompatActivity.setSupportActionBar(AppCompatActivity.java:130)
at com.littlejie.drawerlayout.DrawerLayoutActivity.onCreate(DrawerLayoutActivity.java:53)
at android.app.Activity.performCreate(Activity.java:6679)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
發(fā)現(xiàn)上訴問題是因為 ActionBar 已經(jīng)存在引起，故將 style 改為：
<style name="AppCompat" parent="Theme.AppCompat.Light.NoActionBar"></style>
<!-- 若 windowNoTitle 為 false 孝鹊，則會拋出下面的異常 -->
<style name="AppCompat1" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Process: com.littlejie.drawerlayout, PID: 10761
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.littlejie.drawerlayout/com.littlejie.drawerlayout.DrawerLayoutActivity}: java.lang.IllegalArgumentException: AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: java.lang.IllegalArgumentException: AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }
at android.support.v7.app.AppCompatDelegateImplV7.createSubDecor(AppCompatDelegateImplV7.java:458)
at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:312)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:277)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
at com.littlejie.drawerlayout.DrawerLayoutActivity.onCreate(DrawerLayoutActivity.java:34)
at android.app.Activity.performCreate(Activity.java:6679)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
