带有 Jetpack 导航组件的自定义工具栏

Question

我有一个问题。我正是需要这个工具栏。

工具栏的标题必须居中，并且向上按钮的颜色必须不同于标题的颜色。例如，我可以通过这些代码行实现居中的标题。

     <androidx.appcompat.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/tb_main"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:gravity="center">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/tb_title_main"
                android:textColor="@color/black_80"
                android:textSize="20sp"
                />

    </androidx.appcompat.widget.Toolbar>

这是在我的 MainActivity 中

    val toolbar = binding.tbMain
    toolbar.tb_title_main.text = "Centered Text "
    setSupportActionBar(toolbar)
    supportActionBar?.setDisplayShowTitleEnabled(false)

但我想要使用 Jetpack 导航组件设置工具栏，以便更好、更轻松地导航。当我在 MainActivity 中使用这些代码行设置工具栏时，就会发生这种情况。

    val navController = findNavController(R.id.nav_host_fragment)
    val toolbar = binding.tbMain
    setSupportActionBar(toolbar)
    val appBarConfiguration = 
    AppBarConfiguration(navController.graph)
    toolbar.setupWithNavController(navController, 
    appBarConfiguration)

https://ibb.co/6v8PPmR（另一张图片）

我已经花了将近 4 个小时来处理这些。我尝试了很多解决方案，但都没有奏效。

那么，在使用 setupWithNavController 时可以将工具栏中的文本居中，还是我应该想出自己的自定义解决方案？

Answer 1

我的早期回答建议使用反射，但最好不要针对框架工作。所以进一步搜索发现你可以这样做。

navHostFragment.navController.addOnDestinationChangedListener { _, destination, arguments ->
        binding.toolBarHome.setTitle(destination.label, titleTextView, arguments)
    }

setTitle 是工具栏上的一个扩展函数，它的作用是将标题设置为空文本，并在这种情况下将标题设置为我们的自定义标题 textview(titletextview)

扩展功能的代码是

fun Toolbar.setTitle(label: CharSequence?, textView: TextView, arguments: Bundle?) {
if (label != null) {
    // Fill in the data pattern with the args to build a valid URI
    val title = StringBuffer()
    val fillInPattern = Pattern.compile("\\{(.+?)\\}")
    val matcher = fillInPattern.matcher(label)
    while (matcher.find()) {
        val argName = matcher.group(1)
        if (arguments != null && arguments.containsKey(argName)) {
            matcher.appendReplacement(title, "")
            title.append(arguments.get(argName).toString())
        } else {
            return //returning because the argument required is not found
        }
    }
    matcher.appendTail(title)
    setTitle("")
    textView.text = title
}

}

生成标题的代码取自 androidx.navigation.ui.AbstractAppBarOnDestinationChangedListener

Answer 2

我遇到了同样的问题，我能够以这种方式创建一个以文本为中心的标题的自定义工具栏。如果您想使用自定义字体和大小，此方法可能会有所帮助。我认为它可能会帮助某人。首先，确保您使用的是NoActionBar 主题并将windowActionBar 设置为false。最后，在您的onViewCreated() 中输入此代码。

    (activity as AppCompatActivity).supportActionBar?.displayOptions =
        androidx.appcompat.app.ActionBar.DISPLAY_SHOW_CUSTOM

    // inflating your custom view
    // not quite sure what I should put for root so I have put "null". I am guessing we need to put the root view from `onViewCreated()` ?  
    val customView = layoutInflater.inflate(R.layout.custom_toolbar, null)

    // setting the whole layout match parent. For some reason, doing match parent from xml wasn't working 
    val layoutParams = androidx.appcompat.app.ActionBar.LayoutParams(
        androidx.appcompat.app.ActionBar.LayoutParams.MATCH_PARENT,
        androidx.appcompat.app.ActionBar.LayoutParams.MATCH_PARENT
    )

    // applying the customview  
    (activity as AppCompatActivity).supportActionBar?.setCustomView(customView, layoutParams)

    // in case you want to change the text yourself 
    toolBarTitle = customView.findViewById(R.id.customTitle)