安卓笔记：DrawerLayout抽屉布局的使用

Posted 2020-08-25 乐之者

DrawerLayout(抽屉布局)，在各种app中经常出现，比如csdn。。

如下示，只要从屏幕侧边滑一下，或者点击左上角的图标，抽屉就会出来。

DrawerLayout要点：

1.使用DrawerLayout时，在xml布局中，把主界面的布局内容放在前面，后面才放上抽屉里的布局内容

2.记得为抽屉内的布局加上android:layout_gravity="left"或"start"，指明抽屉出现在哪一侧。

 

代码如下所示：

activity_drawer.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <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="left"
            android:background="#ffffff"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="1dp" />
    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">DrawerLayoutTest</string>
    <string name="action_settings">Settings</string>
    <string name="drawer_close">关闭抽屉</string>
    <string name="drawer_open">打开抽屉</string>
    
    <string-array name="planets_array">
        <item>主页</item>
        <item>发现</item>
        <item>收藏</item>
        <item>设置</item> 
        <item>草稿</item>
        <item>历史</item>
        <item>模式</item>
    </string-array>
    
</resources>

DrawerLayoutDemo.java

package com.example.drawerlayouttest;

import android.os.Bundle;
import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Color;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;

public class DrawerLayoutDemo extends Activity
{

    private String[] mPlanetTitles;
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private ListView mDrawerList;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        // 初始化ListView
        initListView();
        //添加抽屉开关
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open,
                R.string.drawer_close)
        {
            //抽屉关闭
            public void onDrawerClosed(View view)
            {
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

           //抽屉打开
            public void onDrawerOpened(View drawerView)
            {
                invalidateOptionsMenu(); 
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);       
        // enable ActionBar app icon to behave as action to toggle nav drawer
        getActionBar().setDisplayHomeAsUpEnabled(true);
        // getActionBar().setHomeButtonEnabled(true);
    }

    private void initListView()
    {
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mPlanetTitles));
        
        // 设置监听事件
        mDrawerList.setOnItemClickListener(new OnItemClickListener()
        {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id)
            {
                mDrawerList.setItemChecked(position, true);
                setTitle(mPlanetTitles[position]);
                mDrawerLayout.closeDrawer(mDrawerList);
            }
        });
    }
   
    //Activity运行后的回调
    @Override
    protected void onPostCreate(Bundle savedInstanceState)
    {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    //配置改变时，不用重新启动Activity
    @Override
    public void onConfigurationChanged(Configuration newConfig)
    {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    //设置选项菜单
    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item))
        {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

抽屉开关的图标：

代码运行后，打开抽屉，效果如图：