版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
微博：厲圣杰
源碼：AndroidDemo/DrawerLayout
文中如有紕漏，歡迎大家留言指出。
Android 抽屜菜單實(shí)現(xiàn)方式主要有兩種方式，一是使用 Google 官方推出的側(cè)滑菜單實(shí)現(xiàn)：DrawerLayout ，這個(gè)類是在 android-support-v4 包里；二是使用開源庫，如: SlidingMenu ，不過此開源庫自 2014年5月10號(hào)起就沒有更新過，更是留有二百多沒關(guān)閉的 issue ，故直接放棄此庫。所以只考慮使用 DrawerLayout 實(shí)現(xiàn)抽屜式菜單。
DrawerLayout
DrawerLayout 是窗口的頂級(jí)容器，它允許從窗口的左邊緣或右邊緣拉出抽屜式菜單。下圖是網(wǎng)易新聞抽屜式菜單樣式：
網(wǎng)易新聞抽屜式菜單
抽屜式菜單的定位和布局通過 android:layout_gravity 屬性來控制，其可選值為 left 、 right 或者 start 、 end 。但是，每一邊緣只能設(shè)置一個(gè)抽屜式視圖，否則會(huì)拋出運(yùn)行時(shí)異常。
DrawerLayout 的第一個(gè)子View 用于顯示主要內(nèi)容，即抽屜菜單沒有打開時(shí)顯示的布局，它可以是 LinearLayout 、 FrameLayout ...第一個(gè)元素寬高默認(rèn)都是 match_parent 的而且不用設(shè)置 layout_gravity 屬性。
接下來緊跟的子元素是抽屜菜單，如 ListView 、 LinearLayout 等。抽屜式菜單一般高度都設(shè)為 match_parent ，而寬度不應(yīng)該超過 320dp ，這樣用戶可以在打開抽屜菜單時(shí)看到部分內(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 且不用設(shè)置 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 結(jié)合使用的，當(dāng)點(diǎn)擊抽屜菜單中的 item 時(shí)，使用 FragmentManager 來實(shí)現(xiàn)切換，實(shí)現(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 -->
<!-- 通過設(shè)置 layout_gravity 對(duì)抽屜菜單進(jìn)行定位 -->
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/white"
android:orientation="vertical">
<!-- 實(shí)現(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">
<!-- 實(shí)現(xiàn)自定義布局，不一定要是 ListView -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
DrawerLayout 初試身手
前面講了 DrawerLayout 的基本用途、注意事項(xiàng)及其典型的布局格式，下面我們就進(jìn)行實(shí)戰(zhàn)，實(shí)現(xiàn)如下效果：
從效果圖中可以看出來，抽屜菜單分為 header 和 list 兩部分，那么我們就需要在抽屜菜單這部分布局中實(shí)現(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);
}
});
//設(shè)置 Logo
//mToolbar.setLogo(R.mipmap.ic_launcher);
//使用 Toolbar 取代 ActionBar
setSupportActionBar(mToolbar);
//注意，設(shè)置 Toolbar 及相關(guān)點(diǎn)擊事件最好放在 setSupportActionBar 后，否則很可能無效
//設(shè)置 Navigation 圖標(biāo)和點(diǎn)擊事件必須放在 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;
}
}
}
這里有一點(diǎn)要注意的是，設(shè)置 Toolbar 及相關(guān)點(diǎn)擊事件最好放在 setSupportActionBar 后，否則很可能無效，關(guān)于 Toolbar 可以參考這篇文章。
如果想要實(shí)現(xiàn)以下這種效果，則只需要對(duì)布局文件稍作修改即可。
<?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>
另外說明一點(diǎn)，關(guān)于如此抽屜菜單樣式實(shí)現(xiàn)還有以下幾種方式：
- 通過往 ListView 中添加 Header
- 使用 NavigationView 實(shí)現(xiàn)
踩過的坑
測試 DrawerLayout 中踩了幾個(gè)坑，其中一個(gè)就是在設(shè)置 Toolbar 的 Navigation 圖標(biāo)點(diǎn)擊事件無效，解決辦法就是將相關(guān)設(shè)置放在 setSupportActionBar() 方法后，另外幾個(gè)坑都是跟設(shè)置主題樣式有關(guān)。特此記錄 log 及相關(guān)的解決方法。
使用 DrawerLayout 碰到關(guān)于 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 的主題設(shè)置不對(duì)，將主題改為如下即可：
<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)上訴問題是因?yàn)?ActionBar 已經(jīng)存在引起，故將 style 改為：
<style name="AppCompat" parent="Theme.AppCompat.Light.NoActionBar"></style>
<!-- 若 windowNoTitle 為 false ，則會(huì)拋出下面的異常 -->
<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)
