Question

背景

过去，Google始终显示工具栏以使其标题与左侧对齐：

https://material.io/develop/android/components/app-bar-layout/

但是，最近看来，即使在其某些应用中，标题居中，即使左右两侧没有对称内容。示例在"Messages" app上：

它也更新了材料指南here。示例：

有些人喜欢将其称为“材料设计2.0”，因为它对各种内容进行了更新。

问题

虽然从StackOverflow被称为“ ActionBar”（例如here）开始，在StackOverflow上存在许多类似的问题，但这里有所不同，因为它应该具有支持库（又名“ Android-X”）一种正确处理它的方法，因为情况已经发生变化，现在Google应该支持它，因为它是指南的组成部分和各种Android应用程序的一部分。

我尝试过的

我试图在工具栏中添加一个视图，但是即使通过给视图上色，您也可以看到它并没有自动居中，而是在添加更多操作项或向上按钮之前：

activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.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">

            <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="title"
                      android:gravity="center" android:background="#33ff0000"
                      android:id="@+id/titleTextView"/>
        </androidx.appcompat.widget.Toolbar>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

此解决方案与其他类似此问题的其他StackOverflow线程上提供的其他解决方案相似，就像在此处一样，它无法真正使文本居中，而在Google的尝试下，无论操作项的数量如何，它都能正确居中和周围的其他视图。

我还提出了一个更好的解决方法：每边都有一个工具栏，并使TextView的余量是两者的最大值。甚至还有一个库“ Toolbar-Center-Title”。但是，这又是一种解决方法。不是我要问的。

问题

现在是否有一种正式的方法可以在工具栏上居中显示标题，而不管有多少个动作项，而又在另一面是什么（例如，向上按钮）？

如果是，该怎么办？

注意：同样，我对变通办法不感兴趣。有很多解决方法，我自己可以想到。

Answer 1

TL; DR：不，目前还没有正式的标题可以将标题居中在工具栏上。

我认为目前尚无正式的方法，至少目前还没有。但是我知道Flutter框架支持它，并且非常简单：您只需要将centerTitle: true传递到appbar构造函数，如本answer中所述。而且，您在问题中提到的应用很有可能是使用Flutter构建的，因为它们都是Google提供的。

我认为最接近您期望的布局的解决方法是在工具栏顶部放置TextView，如图here所示：

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
        </android.support.v7.widget.Toolbar>

        <TextView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"/>

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

但是，如果官方的Android API能够以与flutter相同的方式支持此功能，那就太好了。也许您想向Material Components Android Issue Tracker发送功能请求？

Answer 2

textAlignment="center"怎么样？当RelativeLayout设置了AppCompatTextView时，layout_width="match_parent"就可以了；例如：

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/customView"
        android:minHeight="?android:attr/actionBarSize"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:gravity="top">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Home Button -->
            <include
                layout="@layout/button_home_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"/>

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="8dp">

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textAlignment="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="18sp"
                    android:textStyle="bold"/>

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/subtitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_version"
                    android:textAlignment="center"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textSize="12sp"
                    android:textStyle="bold"/>

            </androidx.appcompat.widget.LinearLayoutCompat>

        </RelativeLayout>

    </androidx.appcompat.widget.LinearLayoutCompat>

</layout>

不利的一面是，当显示多个菜单项作为操作按钮时-或当显示非凡的长字符串作为标题时，标题可能会重叠-但是当仅显示一个或两个操作按钮与标题组合时符合视觉上可用的宽度，效果很好-这是因为菜单配置ifRoom将始终适用，因为有空间。否则只能测量工具栏的哪一侧具有最宽的项目容器-然后调整另一侧的项目容器的宽度。可以根据可用房间缩放字体大小，以使其动态适应。

Answer 3

没有官方方法可以做到，但是子类化可以提供大多数覆盖范围而没有疯狂的把戏。

https://gist.github.com/bmc08gt/40a151e93969f2633b9b92bca4b31e83

Answer 4

app:contentInsetStart="@dimen/margin_64" //64dp
app:contentInsetEnd="@dimen/margin_64" // 64dp

工具栏

 <com.google.android.material.appbar.AppBarLayout
        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:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center_horizontal"
            app:contentInsetEnd="@dimen/margin_64"
            app:contentInsetStart="@dimen/margin_64">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Create"
                android:gravity="center_horizontal"
                android:textColor="@color/white"
                android:textSize="18sp" />

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

在新的材质设计中，是否像流行的Android应用程序一样，在工具栏上有居中标题的官方API？

背景

问题

我尝试过的

问题

4 个答案:

工具栏