如何为Toolbar及其中的导航抽屉设置自定义矢量图标？

嘿，这个问题我刚好踩过坑，给你分享两个实用的解决方案：

Toolbar支持矢量图标的场景分两种，都很容易实现：

• 菜单图标：直接在menu资源文件里引用你的矢量Drawable就行，比如：

  <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
      <item
          android:id="@+id/action_custom"
          android:icon="@drawable/ic_custom_vector"
          android:title="自定义图标"
          app:showAsAction="always"/>
  </menu>
  

  记得在你的build.gradle(Module level)里开启矢量兼容，确保低版本设备也能正常显示：

  android {
      defaultConfig {
          vectorDrawables {
              useSupportLibrary = true
          }
      }
  }
  

• Toolbar上的独立自定义图标：如果是要在Toolbar中间或其他位置加矢量图标，可以用AppCompatImageView承载，然后添加到Toolbar上：

  val customIconView = AppCompatImageView(this)
  customIconView.setImageResource(R.drawable.ic_custom_vector)
  // 设置图标大小和边距，按需调整
  customIconView.layoutParams = ViewGroup.LayoutParams(
      dpToPx(24), // 这里转成像素，比如24dp
      dpToPx(24)
  )
  val toolbarParams = Toolbar.LayoutParams(
      Toolbar.LayoutParams.WRAP_CONTENT,
      Toolbar.LayoutParams.WRAP_CONTENT
  ).apply {
      gravity = Gravity.END
      marginEnd = dpToPx(16)
  }
  toolbar.addView(customIconView, toolbarParams)
  

  （注：dpToPx是自己实现的单位转换方法，你可以根据项目工具类调整）

你提到Toolbar.setNavigationIcon(drawable)仅支持位图，其实是针对原生Toolbar而言的，用AppCompat库的话完全可以解决：

方法一：用AppCompatToolbar直接设置 #

首先确保你布局里用的是androidx.appcompat.widget.Toolbar，而不是原生的android.widget.Toolbar，然后直接调用：

val toolbar = findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
// 直接传入矢量Drawable的资源ID即可
toolbar.setNavigationIcon(R.drawable.ic_custom_nav_vector)

这个方法最简洁，只要你开启了矢量支持（就是上面build.gradle里的配置），低版本也能正常显示。

方法二：自定义导航视图替换默认图标 #

如果上面的方法因为某些原因不生效，比如矢量图有特殊样式需求，可以自己做一个导航视图替换掉默认的：

val toolbar = findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)

// 清除默认的导航图标
toolbar.navigationIcon = null

// 创建自定义的矢量图标视图
val navIconView = AppCompatImageView(this)
navIconView.setImageResource(R.drawable.ic_custom_nav_vector)
navIconView.setOnClickListener {
    // 这里处理导航抽屉的打开逻辑，比如：
    drawerLayout.openDrawer(GravityCompat.START)
}

// 设置布局参数，和默认导航图标对齐
val navParams = Toolbar.LayoutParams(
    Toolbar.LayoutParams.WRAP_CONTENT,
    Toolbar.LayoutParams.WRAP_CONTENT
).apply {
    gravity = Gravity.START
    marginStart = resources.getDimensionPixelSize(R.dimen.dp_16)
}
toolbar.addView(navIconView, navParams)

这样不仅能用矢量图，还能自定义点击逻辑和样式。

内容的提问来源于stack exchange，提问作者Влад