安卓工具栏标题居中和自定义字体

Question

我正在尝试找到使用自定义字体作为工具栏标题并将其居中在工具栏（客户需求）的正确方法。

目前，我正在使用传统的ActionBar，并将标题设置为空值，然后使用setCustomView将我的自定义字体TextView放置并使用ActionBar.LayoutParams使其居中。

有更好的方法吗？可以使用新的Toolbar作为我的ActionBar。

- Mathbl

---

MaterialToolbar支持居中标题栏，还支持更改字体，详见：https://material.io/components/app-bars-top/android#theming-the-top-app-bar - Maher Abuthraa

Answer 1

要在您的 Toolbar 中使用自定义标题，您需要记住的是 Toolbar 只是一个漂亮的ViewGroup，所以您可以像这样添加自定义标题：

要在您的Toolbar中使用自定义标题，您只需记住Toolbar实际上是一个高级的ViewGroup，因此您可以像以下方法一样添加自定义标题：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?android:attr/actionBarSize"
    android:background="@color/action_bar_bkgnd"
    app:theme="@style/ToolBarTheme" >


     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:layout_gravity="center"
        android:id="@+id/toolbar_title" />


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

这意味着你可以像处理普通的TextView一样对其进行样式设置。因此，在你的活动中，你可以像这样访问标题：

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

- MrEngineer13

---

建议使用android:layout_width="wrap_content"、android:layout_height="wrap_content"和android:layout_gravity="center"属性，以达到更好的效果。 - SteelBytes

如果有人无法删除默认应用程序名称标题，请按照以下步骤操作：

1. 调用 setSupportActionBar(yourToolbar)。
2. 调用 getSupportActionBar().setDisplayShowTitleEnabled(false);。

- Rick Sanchez

如果想继续使用自定义的TextView默认样式，可以尝试类似这样的写法：style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"（参见此回答）。 - Jonik

在你有一个按钮（主页、导航抽屉等）的情况下，添加 android:paddingRight="?attr/actionBarSize" 可以帮助将文本居中显示在屏幕中间。请注意，不要改变原意。 - Gordak

当工具栏上有汉堡图标时会发生什么？它将不会在完整工具栏宽度中央，而是在工具栏宽度 - 汉堡图标宽度的中心位置。 - Akshay

Answer 2

这只是为了帮助使用@MrEngineer13的答案，以及@Jonik和@Rick Sanchez的评论，按正确顺序连接所有部分，以便轻松实现标题居中！

使用TextAppearance.AppCompat.Widget.ActionBar.Title布局：

    <android.support.v7.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:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"                      
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_gravity="center" />

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

以正确的顺序实现的方法：

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);

    setSupportActionBar(toolbar);
    mTitle.setText(toolbar.getTitle());

    getSupportActionBar().setDisplayShowTitleEnabled(false);

请不要忘记给@MrEngineer13的答案点赞！！！

这里有一个示例项目ToolbarCenterTitleSample 希望能帮到其他人 ;)

- Gueorgui Obregon

---

如果我设置 setDisplayHomeAsUpEnabled(true) 和 setDisplayShowHomeEnabled(true) 来启用返回箭头，那么标题就不会居中显示。我尝试过像设置 actionBar.setTitle(""); 和 setDisplayShowTitleEnabled(false) 这样的方法，但仍然解决不了这个问题。 - Prashanth Debbadwar

你测试过滚动活动（Scrolling Activity）了吗？ - SAYE

确实，使用后退箭头时，标题并不居中（它向右偏移了后退箭头宽度的一半）。我想，如果我真的下定决心，我会通过编程在文本框右侧添加足够的边距来使文本居中。 - Someone Somewhere

Answer 3

工具栏标题可进行样式定制。任何您所做的自定义都必须在主题中完成。我将给您一个例子。

工具栏布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    style="@style/ToolBarStyle.Event"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="@dimen/abc_action_bar_default_height_material" />

样式：

<style name="ToolBarStyle" parent="ToolBarStyle.Base"/>

<style name="ToolBarStyle.Base" parent="">
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="ToolBarStyle.Event" parent="ToolBarStyle">
    <item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
</style>

<style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--Any text styling can be done here-->
    <item name="android:textStyle">normal</item>
    <item name="android:textSize">@dimen/event_title_text_size</item>
</style>

- Binoy Babu

---

这是正确的方法。添加另一个“TextView”有点巧妙，但反射答案就太邪恶了。 - DariusL

清晰明了，但是无法从样式中设置自定义字体。遗憾。 - niqueco

你也不能改变标题的对齐方式。 - Terry

这不居中文本。 - Sebastian Roth

未按原帖所要求居中文本。 - david

Answer 4

我们无法直接访问ToolBar标题TextView，因此我们使用反射来访问它。

  private TextView getActionBarTextView() {
    TextView titleTextView = null;

    try {
        Field f = mToolBar.getClass().getDeclaredField("mTitleTextView");
        f.setAccessible(true);
        titleTextView = (TextView) f.get(mToolBar);
    } catch (NoSuchFieldException e) {
    } catch (IllegalAccessException e) {
    }
    return titleTextView;
}

- BugsBunnyBR

---

虽然这种方法不太正规，但在我尝试获取工具栏文本视图的方法后，这个解决方案对我很有效。谢谢。 - falc0nit3

标题部分工作得很好。但是当尝试像这样获取mSubtitleTextView时，它导致了一个异常。Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setTypeface(android.graphics.Typeface)' on a null object reference. - Vinod

注意：只有在设置工具栏标题之后，您才能访问“mTitleTextView”字段！该字段是由其首次使用进行懒惰初始化的。 - funcoder

如果您使用ProGuard混淆代码，mTitleTextView 变成了 abcde12345，那该怎么办？ - voghDev

@voghDev 如果出现这种情况，getDeclaredField将抛出NoSuchFieldException异常，导致代码无法正常工作。 - Jeremy

Answer 5

MaterialToolbar现在可以通过将titleCentered属性设置为true来使工具栏的标题居中。这个功能是在Material Components 1.4.0-alpha02中添加的。

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/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.Primary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:titleCentered="true" />

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

- user3210008

---

这是有史以来最好的答案。请投票支持，帮助其他人看到它。 - Maher Abuthraa

出现错误，找不到属性titleCentered。 - Viks

似乎不再可用（至少在Material Components 1.8.0中）。编辑：请确保您正在使用com.google.android.material.appbar.MaterialToolbar而不是androidx.appcompat.widget.Toolbar。 - BamsBamx

@Viks 使用 com.google.android.material.appbar.MaterialToolbar。 - BamsBamx

Answer 6

定义以下类：

public class CenteredToolbar extends Toolbar {

    private TextView centeredTitleTextView;

    public CenteredToolbar(Context context) {
        super(context);
    }

    public CenteredToolbar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CenteredToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setTitle(@StringRes int resId) {
        String s = getResources().getString(resId);
        setTitle(s);
    }

    @Override
    public void setTitle(CharSequence title) {
        getCenteredTitleTextView().setText(title);
    }

    @Override
    public CharSequence getTitle() {
        return getCenteredTitleTextView().getText().toString();
    }

    public void setTypeface(Typeface font) {
        getCenteredTitleTextView().setTypeface(font);
    }

    private TextView getCenteredTitleTextView() {
        if (centeredTitleTextView == null) {
            centeredTitleTextView = new TextView(getContext());
            centeredTitleTextView.setTypeface(...);
            centeredTitleTextView.setSingleLine();
            centeredTitleTextView.setEllipsize(TextUtils.TruncateAt.END);
            centeredTitleTextView.setGravity(Gravity.CENTER);
            centeredTitleTextView.setTextAppearance(getContext(), R.style.TextAppearance_AppCompat_Widget_ActionBar_Title);

            Toolbar.LayoutParams lp = new Toolbar.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            lp.gravity = Gravity.CENTER;
            centeredTitleTextView.setLayoutParams(lp);

            addView(centeredTitleTextView);
        }
        return centeredTitleTextView;
    }
}

...然后只需要像这样使用它，而不是常规的工具栏：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">

        <your.packagename.here.CenteredToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:title="@string/reset_password_page_title"/>

        <!-- Other views -->

</RelativeLayout>

你仍然需要在Activity中添加以下两行代码（就像标准的Toolbar一样）：

Toolbar toolbar = (Toolbar) findViewByid(R.id.toolbar); // note that your activity doesn't need to know that it is actually a custom Toolbar
setSupportActionBar(binding.toolbar);

就是这样！你不需要隐藏标准的左对齐标题，也不需要反复复制相同的 XML 代码等等，只需像默认的 Toolbar 一样使用 CenteredToolbar。由于现在可以直接访问 TextView，因此您还可以以编程方式设置自定义字体。希望这能帮到你。

- fraggjkee

---

谢谢！最佳解决方案是，只要别忘了导入“v7.widget”到工具栏。 - David

我知道这很老了，但是......我该如何更改文本颜色？我已尝试使用app:titleTextColor在XML中以及使用centeredTitleTextView.setColor代码中。有任何想法吗@fraggjkee？ - Genaro Alberto Cancino Herrera

centeredTitleTextView.setTextColor(...) 应该可以工作。 - fraggjkee

应该是 LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT) 吧？ - liminal

嗨，什么是绑定？ - famfamfam

Answer 7

这里介绍一种基于标题文本的方法，可以从Toolbar中找到TextView实例。

  public static TextView getToolbarTitleView(ActionBarActivity activity, Toolbar toolbar){
    ActionBar actionBar = activity.getSupportActionBar();
    CharSequence actionbarTitle = null;
    if(actionBar != null)
        actionbarTitle = actionBar.getTitle();
    actionbarTitle = TextUtils.isEmpty(actionbarTitle) ? toolbar.getTitle() : actionbarTitle;
    if(TextUtils.isEmpty(actionbarTitle)) return null;
    // can't find if title not set
    for(int i= 0; i < toolbar.getChildCount(); i++){
        View v = toolbar.getChildAt(i);
        if(v != null && v instanceof TextView){
            TextView t = (TextView) v;
            CharSequence title = t.getText();
            if(!TextUtils.isEmpty(title) && actionbarTitle.equals(title) && t.getId() == View.NO_ID){
                //Toolbar does not assign id to views with layout params SYSTEM, hence getId() == View.NO_ID
                //in same manner subtitle TextView can be obtained.
                return t;
            }
        }
    }
    return null;
}

- Nikola Despotoski

Answer 8

我使用这个解决方案：

static void centerToolbarTitle(@NonNull final Toolbar toolbar) {
    final CharSequence title = toolbar.getTitle();
    final ArrayList<View> outViews = new ArrayList<>(1);
    toolbar.findViewsWithText(outViews, title, View.FIND_VIEWS_WITH_TEXT);
    if (!outViews.isEmpty()) {
        final TextView titleView = (TextView) outViews.get(0);
        titleView.setGravity(Gravity.CENTER);
        final Toolbar.LayoutParams layoutParams = (Toolbar.LayoutParams) titleView.getLayoutParams();
        layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
        toolbar.requestLayout();
        //also you can use titleView for changing font: titleView.setTypeface(Typeface);
    }
}

- ultraon

---

工作得非常好，但由于某种原因，它无法正确地将没有项目按钮的工具栏居中。 - Munib

另外，如果您在工具栏上有导航抽屉或返回图标，则标题不会保持完全居中。我为此情况添加了一个空设置菜单图标。我的空菜单项是：<item android:id="@+id/empty" android:orderInCategory="100" android:icon="@android:color/transparent" app:showAsAction="always" tools:ignore="MenuTitle" /> - Mete

Answer 9

目前还没有人提到，但是Toolbar有一些属性:

app:titleTextColor 用于设置标题文本的颜色

app:titleTextAppearance 用于设置标题文本的外观

app:titleMargin 用于设置边距

还有其他特定方向的边距，例如 marginStart 等。

- Ali Bdeir

---

完美解决方案...如果您了解FontOverride，只需在styles.xml中创建样式<style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item>并将其应用于工具栏app:titleTextAppearance="@styles/customFontTextAppearanceStyle" - Chinmay Thoriya

我使用了这种方法，但我的工具栏没有任何变化！我创建了一个新的'<style>'并将其设置为app:titleTextAppearanc="style name"，放在android.support.v7.widget.Toolbar标签上。 - SAYE

居中的事情怎么样？ - gumuruh

Answer 10

没有工具栏TextView，我们可以使用以下代码自定义字体

getSupportActionBar().setDisplayShowTitleEnabled(false);
or
getActionBar().setDisplayShowTitleEnabled(false);

public void updateActionbar(String title){
    SpannableString spannableString = new SpannableString(title);
    spannableString.setSpan(new TypefaceSpanString(this,  "futurastdmedium.ttf"),
            0, spannableString.length(),
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mToolbar.setTitle(spannableString);
}

- Ajit Kumar Dubey

---

如果您只需要更改字体，这似乎是最干净的解决方案。注意：TypefaceSpanString 就是这个：https://dev59.com/LG445IYBdhLWcg3wg6tm#17961854 - Mohib Irshad