如何将CollapsingToolbarLayout的标题居中显示？

Question

我尝试使用 setExpandTitleTextAppearance，但它没有起作用。我想将展开后的标题文字居中。

- Javed Khatri

---

展示一下你已经尝试过的内容，这样更容易提供“帮助”。 - Collin

Answer 1

在CollapsingToolbarLayout中，有一个属性expandedTitleGravity，可以用来将展开的标题文本居中。将以下代码添加到你的CollapsingToolbarLayout中：

app:expandedTitleGravity="bottom|center_horizontal"

- androholic

---

聪明的答案 :) - Shohan Ahmed Sijan

@androholic，关于app:collapsedTitleGravity="center_horizontal"，它实际上不起作用。 - ॐ Rakesh Kumar

Answer 2

在我的使用情况下，我将 app:titleEnabled 设置为 false，因为我不需要它。在此之后，我的布局中 Toolbar 的重力属性被正确地应用了。

- Nguyễn Hoàng Anh

---

我想让我的自定义工具栏在中心显示标题。通过在CollapsingToolbarLayout中设置此属性，帮助我满足了我的要求。 非常感谢。 - Jigar

Answer 3

在展开状态下，您可以通过以下方式排列标题的位置：

app:expandedTitleGravity="center" 

在折叠状态下，

app:collapsedTitleGravity="center"

我认为这可能对你有所帮助。

- Sharon Joshi

---

问题在于，当处于“折叠”状态时，标题的水平居中不正确，从左边有一个填充/边距。编辑：事实证明，您可以通过向CollapsingToolbarLayout添加android:paddingEnd:24dp来修复它。 - Ace

@Ace app:contentInsetStart="0dp" 更好：https://stackoverflow.com/questions/35765551/collapsingtoolbarlayout-center-textview-in-toolbar - Sam Chen

Answer 4

@Javed，如果我理解正确，您希望在工具栏中央设置标题，然后CollapsingToolbarLayout折叠，并且您的布局类似于这样，对吗？

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

然后您可以尝试这个技巧（我在Activity的onCreate方法中使用它）：

    try {
        Field declaredField = toolbar.getClass().getDeclaredField("mTitleTextView");
        declaredField.setAccessible(true);
        TextView titleTextView = (TextView) declaredField.get(toolbar);
        ViewGroup.LayoutParams layoutParams = titleTextView.getLayoutParams();
        layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
        titleTextView.setLayoutParams(layoutParams);
        titleTextView.setGravity(Gravity.CENTER_HORIZONTAL);
    } catch (Exception e) {
        //"Error!"
    }

关键在于工具栏内的TextView具有“Wrap Content”宽度属性，因此我们需要将其更改为“Match Parent”。 （有关此反射的更多信息，请单击此处）。

测试过Android 5.1.1和Android 4.3（应该在几乎所有地方都有效）。

- Konstantin Loginov

---

我恰好正在处理同样的问题。在工具栏中居中自定义标题TextView似乎应该可以实现，但由于某种原因，layout_gravity="center"在这种情况下无法将文本居中。TextView的文本会变成右对齐。可能是一个bug。 - Ryan

@Ryan 发现得好，太棒了！我修正了我的答案并在 Android 5.1.1 和 Android 4.3 上测试过。感谢你的提醒！ - Konstantin Loginov

你的更新答案看起来应该可以工作，但我不想使用反射。很遗憾没有更简单的方法来解决这个问题。 - Ryan

Answer 5

如果您正在尝试在折叠状态下居中标题，则可以使用以下方法：

android:paddingEnd="70dp"
android:paddingRight="70dp"

like this:

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingEnd="70dp"
            android:paddingRight="70dp"
            app:collapsedTitleGravity="center_horizontal"        
            app:expandedTitleGravity="start"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

- Bogdan Ustyak

---

它从右侧添加了额外的空格，这不是最佳实践。 - ॐ Rakesh Kumar

Answer 6

如Nguyễn Hoàng Anh所说，将app:titleEnabled设置为false就可以轻松解决问题。

启用该选项后，在布局检查器中进行一些挖掘后，怀疑的未命名视图始终添加在Toolbar内部的TextView之前，仅在“Up”按钮（如果启用）之后。

因此，即使布局重力正常工作，某些可疑的视图也会占据Toolbar内部的所有额外空间。

- bskim45

---

它会破坏标题的动画效果。 - OhhhThatVarun

Answer 7

在折叠工具栏的XML中包含以下内容： 对于折叠状态： app:collapsedTitleGravity="center_vertical|center_horizontal"

对于展开状态： app:expandedTitleGravity="center_vertical|center_horizontal"

- Leo Johny Thayyil