Android Kotlin新手：为多Activity应用添加导航抽屉

嘿，作为iOS转Android/Kotlin的新手，你这种先搭页面再加侧滑导航的情况太常见啦！我来一步步教你把Navigation Drawer无缝加到现有项目里，不用大改你已经写好的布局～

Android的导航抽屉核心容器是DrawerLayout，我们只需要把你现有的ConstraintLayout嵌套进去，再加上侧滑菜单的NavigationView就行，完全不用动原来的页面内容。

步骤1：改造现有Activity的布局结构 #

打开每个需要加导航抽屉的Activity布局文件，把原来的根布局（你的ConstraintLayout）嵌套进DrawerLayout中，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 根容器改为DrawerLayout -->
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 保留你原来的所有布局内容 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 这里放你原来写的按钮、文本、列表等所有控件 -->
    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- 新增的导航抽屉侧滑菜单 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start" <!-- 对应iOS的左侧滑出，右侧用"end" -->
        app:menu="@menu/drawer_menu" <!-- 菜单选项资源，后面创建 -->
        app:headerLayout="@layout/drawer_header" /> <!-- 可选：抽屉顶部的头部布局 -->

</androidx.drawerlayout.widget.DrawerLayout>

步骤2：创建导航抽屉的菜单和头部（可选） #

2.1 菜单选项 #

在res/menu文件夹下新建drawer_menu.xml，定义你需要的导航选项（类似iOS的侧边栏列表）：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 分组设置单选行为，和iOS侧边栏的选中逻辑一致 -->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="首页" />
        <item
            android:id="@+id/nav_profile"
            android:icon="@drawable/ic_profile"
            android:title="我的" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings"
            android:title="设置" />
    </group>
</menu>

2.2 抽屉头部（可选） #

如果需要侧边栏顶部显示头像、用户名等信息，在res/layout下新建drawer_header.xml：

<?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="160dp"
    android:padding="16dp"
    android:orientation="vertical"
    android:gravity="bottom"
    android:background="@color/primary">

    <ImageView
        android:id="@+id/nav_header_avatar"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/avatar" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的用户名"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:layout_marginTop="8dp" />

</LinearLayout>

步骤3：在Activity中实现导航逻辑 #

打开你的Activity代码，初始化DrawerLayout和NavigationView，关联ActionBar的汉堡按钮（对应iOS的左上角菜单按钮）：

import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout
    private lateinit var toggle: ActionBarDrawerToggle

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 初始化控件
        drawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)

        // 关联ActionBar和DrawerLayout，实现汉堡按钮的动画和点击逻辑
        toggle = ActionBarDrawerToggle(
            this, drawerLayout,
            R.string.navigation_drawer_open, // 无障碍描述字符串，需在strings.xml中定义
            R.string.navigation_drawer_close
        )
        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()

        // 让ActionBar显示汉堡按钮
        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        // 设置菜单点击事件，跳转到对应的Activity
        navView.setNavigationItemSelectedListener { menuItem ->
            when (menuItem.itemId) {
                R.id.nav_home -> {
                    startActivity(Intent(this, HomeActivity::class.java))
                }
                R.id.nav_profile -> {
                    startActivity(Intent(this, ProfileActivity::class.java))
                }
                R.id.nav_settings -> {
                    startActivity(Intent(this, SettingsActivity::class.java))
                }
            }
            // 点击后自动关闭抽屉
            drawerLayout.closeDrawer(GravityCompat.START)
            true
        }
    }

    // 处理汉堡按钮的点击事件
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if (toggle.onOptionsItemSelected(item)) {
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

别忘了在res/values/strings.xml中添加两个无障碍描述字符串：

<string name="navigation_drawer_open">打开导航抽屉</string>
<string name="navigation_drawer_close">关闭导航抽屉</string>

步骤4：可选——用BaseActivity统一导航逻辑 #

如果多个Activity都需要导航抽屉，建议把公共逻辑抽成BaseActivity，避免重复代码：

abstract class BaseDrawerActivity : AppCompatActivity() {
    lateinit var drawerLayout: DrawerLayout
    lateinit var toggle: ActionBarDrawerToggle

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 子类自行设置布局
    }

    fun setupDrawer() {
        drawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)

        toggle = ActionBarDrawerToggle(
            this, drawerLayout,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close
        )
        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()

        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        navView.setNavigationItemSelectedListener { menuItem ->
            handleDrawerItemClick(menuItem)
            drawerLayout.closeDrawer(GravityCompat.START)
            true
        }
    }

    // 让子类实现具体的菜单跳转逻辑
    abstract fun handleDrawerItemClick(menuItem: MenuItem)

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if (toggle.onOptionsItemSelected(item)) {
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

子类Activity只需这样使用：

class HomeActivity : BaseDrawerActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        setupDrawer()
    }

    override fun handleDrawerItemClick(menuItem: MenuItem) {
        when (menuItem.itemId) {
            // 处理对应菜单的跳转逻辑
        }
    }
}

最后要注意的小细节 #

1. 确保你的项目引入了Material Components库，在Module级的build.gradle中添加：

implementation 'com.google.android.material:material:1.11.0' // 用最新版本即可

2. 如果你之前用的是旧的android.support库，建议迁移到androidx，官方已停止维护support库；
3. 导航抽屉默认支持侧滑手势，用户从屏幕左侧滑动就能打开，和iOS的侧滑逻辑完全一致，无需额外设置。

内容的提问来源于stack exchange，提问作者daydr3am3r