使用 MaterialToolbar 在 AppBarLayout 中居中标题

Question

我尝试将工具栏中的文本居中。我使用AppBarLayout 和MaterialToolbar，正如Material Design 中所建议的那样。

我尝试了在 StackOverflow 上找到的所有方法来使标题居中，但似乎没有任何效果。

这是我的工具栏：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/CenteredToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</com.google.android.material.appbar.AppBarLayout>

CenteredToolbar 是我尝试将标题居中的自定义样式：

<style name="CenteredToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:gravity">center_horizontal</item>
</style>

但是，这不起作用。

关于如何使标题居中的任何建议？

Answer 1

我在这里分享了我的答案。来自com.google.android.material:material:1.4.0 有app:titleCentered="true"

https://stackoverflow.com/a/69589951/2810726

Answer 2

不幸的是，我发现只有这种方法可以在工具栏中创建居中的标题。

奖励：您将完全控制工具栏的 UI。

创建一个自定义布局，将其用作这样的工具栏。

activity_action_bar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_preference"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal">

<TextView
    android:id="@+id/actionbar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:maxLines="1"
    android:clickable="false"
    android:focusable="false"
    android:longClickable="false"
    android:fontFamily="@font/lato"
    android:textStyle="bold"
    android:textSize="20sp"
    android:textColor="@color/colorTextMain" />

</LinearLayout>

在您的界面布局中，XML 包含这样的工具栏。

<include layout="@layout/activity_action_bar" />

现在在你 setContentView 的类中使用之前的界面布局执行此操作。

    setContentView(R.layout.activity_interface);
    // create and define a custom action bar
    View view = getLayoutInflater().inflate(R.layout.activity_action_bar, null);
    ActionBar.LayoutParams params = new ActionBar.LayoutParams(
            ActionBar.LayoutParams.WRAP_CONTENT,
            ActionBar.LayoutParams.MATCH_PARENT,
            Gravity.CENTER);
    TextView Title = view.findViewById(R.id.actionbar_title);
    Title.setText(getString(R.string.about));
    getSupportActionBar().setCustomView(view,params);
    getSupportActionBar().setDisplayShowCustomEnabled(true); // show custom title
    getSupportActionBar().setDisplayShowTitleEnabled(false); // hide the default title
    getSupportActionBar().setElevation(0);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_back);
    getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.colorPrimary))); // set background

这将为您提供对工具栏的全面管理，例如居中的标题或自定义 UI。

结果：

Answer 3

这就是我解决问题的方法。对我来说很好。我使用了材料设计主题。

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/Widget.MaterialComponents.Toolbar.Surface"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:menu="@menu/top_app_bar"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_24">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAppearance="?attr/textAppearanceHeadline6"
            android:text="Manali" />
    </com.google.android.material.appbar.MaterialToolbar>

</com.google.android.material.appbar.AppBarLayout>