Android 抽屉式布局之利用DrawerLayout实现

最新推荐文章于 2025-06-04 13:58:38 发布

AntDreamer

最新推荐文章于 2025-06-04 13:58:38 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 抽屉式布局

本文链接：https://blog.youkuaiyun.com/myth13141314/article/details/64129804

Android 专栏收录该内容

185 篇文章

订阅专栏

本文介绍如何使用Android系统兼容库中的DrawerLayout实现抽屉式布局。文章详细展示了主布局、抽屉头部布局及菜单布局的设计，并提供了MainActivity的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创文章，如有转载，请注明出处：http://blog.youkuaiyun.com/myth13141314/article/details/64129804

如今抽屉式布局应用得越来越多，实现方式一般有2种，利用系统的兼容库中的DrawerLayout实现，或是用第三方库实现。第三方库实现参考文章：Android 抽屉式布局之利用第三方库实现抽屉式布局。这篇文章我们来看看怎么用系统的兼容库的DrawerLayout来实现抽屉式布局

最后实现的效果图

布局分三部分

主布局， activity_main.xml

<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/dl_drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/appbar_padding_top"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"  //抽屉的头部布局
        app:menu="@menu/menu_main_drawer" />  //抽屉的菜单布局

</android.support.v4.widget.DrawerLayout>

抽屉的头部布局，drawer_header.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="172dp"
    android:background="@color/colorPrimary"
    android:clickable="true"
    >

    <ImageView
        android:id="@+id/header_background"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"
        android:layout_marginBottom="18dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="my application"
            android:textColor="@color/white"
            android:textSize="14dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="16dp"/>

    </RelativeLayout>
</FrameLayout>

抽屉的菜单布局，menu_main_drawer.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/menu_home"
            android:title="@string/menu_home"
            android:icon="@mipmap/menu_home"
            />

        <item
            android:id="@+id/menu_download"
            android:title="@string/menu_download"
            android:icon="@mipmap/menu_download"
            />

        <item
            android:id="@+id/menu_bookmark"
            android:title="@string/menu_bookmark"
            android:icon="@mipmap/menu_bookmark"/>

        <item
            android:id="@+id/menu_setting"
            android:title="@string/menu_setting"
            android:icon="@mipmap/menu_setting"/>

        <item
            android:id="@+id/menu_like"
            android:title="@string/menu_like"
            android:icon="@mipmap/menu_like"/>

        <item
            android:id="@+id/menu_share"
            android:title="@string/menu_share"
            android:icon="@mipmap/menu_share"/>

        <item
            android:id="@+id/menu_feedback"
            android:title="@string/menu_feedback"
            android:icon="@mipmap/menu_feedback"/>

        <item
            android:id="@+id/menu_update"
            android:title="@string/menu_update"
            android:titleCondensed="V1.1"
            android:icon="@mipmap/menu_update"/>

        <item
            android:id="@+id/menu_exit"
            android:title="@string/menu_exit"
            android:icon="@mipmap/menu_exit"/>

    </group>

</menu>

代码的设置

初始化

drawerLayout = (DrawerLayout) findViewById(R.id.dl_drawerlayout);

//Drawerlayout 和 toolbar绑定
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.setDrawerListener(toggle);
toggle.syncState();

//抽屉菜单布局的初始化以及设置点击监听
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);

抽屉菜单的点击监听

@Override
public boolean onNavigationItemSelected(MenuItem item) {
    //id 为menu布局文件里的id
    switch(item.getItemId()) {
        case R.id.menu_home:
            break;
        case R.id.menu_download:
            break;
        case R.id.menu_bookmark:
            break;
        case R.id.menu_setting:
            break;
        case R.id.menu_like:
            break;
        case R.id.menu_share:
            break;
        case R.id.menu_feedback:
            break;
        case R.id.menu_update:
            break;
        case R.id.menu_exit:
            break;
    }
    return true;
}

最后贴上MainActivity的代码

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    private DrawerLayout drawerLayout;
    private Toolbar toolbar;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        initDrawerLayout();
    }

    private void initDrawerLayout() {
        drawerLayout = (DrawerLayout) findViewById(R.id.dl_drawerlayout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.setDrawerListener(toggle);
        toggle.syncState();

        navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {

        switch(item.getItemId()) {
            case R.id.menu_home:
                break;
            case R.id.menu_download:
                break;
            case R.id.menu_bookmark:
                break;
            case R.id.menu_setting:
                break;
            case R.id.menu_like:
                break;
            case R.id.menu_share:
                break;
            case R.id.menu_feedback:
                break;
            case R.id.menu_update:
                break;
            case R.id.menu_exit:
                break;
        }
        return true;
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}