DrawerLayout使用示例

一、介紹

DrawerLayout是Android官方提供的支持側拉菜單（Navigation Drawer）的控制項。該控制項可以輕鬆地實現左右兩側的側拉菜單，是常規Android應用的重要組成部分。在本文中，我們將詳細介紹如何通過使用DrawerLayout控制項來實現側拉菜單功能。

二、基本用法

DrawerLayout實現側拉菜單的基本組成部分如下：

一個主界面（即DrawerLayout的根布局）。
一個側滑菜單界面（通常放在左邊）。
一個主內容界面（通常放在右邊）。

DrawerLayout的使用非常簡單，只需要將菜單布局文件和主界面布局文件放在一個DrawerLayout容器中即可。

三、實現步驟

下面我們將具體介紹如何在Android應用中使用DrawerLayout控制項實現側拉菜單功能。

步驟1：添加DrawerLayout控制項

在需添加側拉菜單的布局文件中添加一個DrawerLayout布局文件。

    <?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">
    </android.support.v4.widget.DrawerLayout>

步驟2：添加側滑菜單

在DrawerLayout布局文件中，添加一個側滑菜單布局文件。

    <?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">
    
        <!-- 左邊的菜單 -->
        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white">
           側拉菜單內容...
        </RelativeLayout>
        
    </android.support.v4.widget.DrawerLayout>

步驟3：添加主內容界面

在DrawerLayout布局文件中，添加主內容界面布局文件。

    <?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">
    
        <!-- 左邊的菜單 -->
        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white">
           側拉菜單內容...
        </RelativeLayout>
        
        <!-- 主內容界面 -->
        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">
            主內容界面...
        </LinearLayout>
        
    </android.support.v4.widget.DrawerLayout>

步驟4：設置ActionBar

使用ActionBarDrawerToggle類將DrawerLayout控制項和ActionBar關聯起來，實現ActionBar的顯示/隱藏和打開/關閉側滑菜單的功能。

    public class MainActivity extends Activity {
        private DrawerLayout mDrawerLayout;
        private ActionBarDrawerToggle mDrawerToggle;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
                public void onDrawerOpened(View drawerView) {
                    super.onDrawerOpened(drawerView);
                    getActionBar().setTitle(R.string.drawer_open);
                }
    
                public void onDrawerClosed(View view) {
                    super.onDrawerClosed(view);
                    getActionBar().setTitle(R.string.drawer_close);
                }
            };
            mDrawerLayout.setDrawerListener(mDrawerToggle);
    
            getActionBar().setDisplayHomeAsUpEnabled(true);
            getActionBar().setHomeButtonEnabled(true);
        }
    
        @Override
        protected void onPostCreate(Bundle savedInstanceState) {
            super.onPostCreate(savedInstanceState);
            mDrawerToggle.syncState();
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            if (mDrawerToggle.onOptionsItemSelected(item)) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }

四、常見問題解決

一、多個側滑菜單

如果需要實現左右兩側都有菜單的效果，可以使用兩個DrawerLayout組件。需要注意的是，在代碼和布局文件中，兩個DrawerLayout各自管理自己的側滑菜單和主內容界面。

二、menu菜單

如果想要在側拉欄中添加菜單項，可以使用menu菜單實現。具體實現方法是在res下新建一個menu文件夾，並在該文件夾中創建一個menu.xml文件，然後在DrawerLayout布局文件中添加如下代碼：

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        android:choiceMode="singleChoice"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="0.1dp" />

然後在Activity的onCreate方法中添加以下代碼：

    //找到listview並設置其Adapter
    ListView listView = (ListView) findViewById(R.id.left_drawer);
    listView.setAdapter(new ArrayAdapter(this,
                          android.R.layout.simple_list_item_1,
                          mPlanetTitles));
    
    //設置listview的列表項被單擊的事件處理方法
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            selectItem(position);
        }
    });

三、禁用手勢滑動

有時候，我們需要禁用手勢滑動打開側滑菜單的功能。可以通過設置setDrawerLockMode方法實現。

    //禁止手勢滑動
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

四、主內容界面進行透明處理

如果需要將主內容界面進行透明處理，可以在主內容界面布局文件中添加如下代碼：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent" >
        ...
    </LinearLayout>

五、更改側欄菜單的圖標

如果需要更改側欄菜單的圖標，可以在ActionBarDrawerToggle類的構造函數中傳入自定義的圖標資源文件。

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.your_icon_res, R.string.drawer_open, R.string.drawer_close) {
        ...
    };

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/280708.html