安卓工具栏样式

Question

我已经将一个工具栏 Toolbar 加入到我的 Lollipop 项目中，但我在样式上遇到了问题。我的工具栏标题字体似乎是粗体，但我希望它是斜体。你知道如何实现吗？我尝试使用 actionbar-style 进行调整，但没有成功。

我在 Toolbar 中设置了一个样式，其中包含 app:theme="@style/toolbar"，而我的 @style/toolbar （父级为 ThemeOverlay.AppCompat.ActionBar）是我正在进行样式调整的地方，但效果不佳。

- Kenneth

Answer 1

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

工具栏布局：

<?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

---

你的工具栏布局在哪里？它是存储在values文件夹中名为toolbar.xml的单独文件中吗？或者你能指定这段代码将要放在哪里吗？ - OhNoNotScott

谢谢您。我花了很长时间尝试不同的主题和样式，以使我的工具栏文本变为白色、“正常”字重并带有白色返回按钮，但一直没有成功。虽然这个解决方案对于如此微不足道的任务来说似乎有些冗长，但它是唯一有效的方法，所以非常感谢您。 - Scott Barbour

这是一个非常复杂的答案，涉及到了所有的继承。这真的必要吗？你没有解释清楚。我们如何做一些简单的事情，比如改变文本颜色或背景颜色？ - Andrew S

Answer 2

这其实非常简单。Toolbar有一个被大家忽视的方法叫做setTitleTextAppearance()。只需在styles.xml中定义自定义textAppearance，就像这样：

    <style name="MyTitleTextApperance" parent="@android:style/TextAppearance.Medium">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">20sp</item>
</style>

然后在您的代码中，只需调用：

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitleTextAppearance(this, R.style.MyTitleTextApperance);

完成！

- jasonhudgins

---

这对于问题中指定的textStyle（粗体，斜体）无效。 - TalkLittle

Answer 3

您可以在工具栏中添加TextView，例如：

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/re/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="italic" />

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

- Dark Leonhart

---

好的。我认为应该可以在不添加自定义视图的情况下对其进行样式设计，你觉得呢？ - Kenneth

你正在使用Android Studio吗？没有收到警告吗？“元素TextView不允许在这里” - Jared Burrows

@DarkLeonhart 我正在使用Android Studio。 - Jared Burrows

最终我使用了这个，因为我还需要在标题上使用自定义字体。 - Kenneth

Answer 4

上述问题只出现在Lollipop版本中，而不是Kitkat和更低版本中。Lollipop不遵循文本样式并放置自己的TitleTextAppearance。因此，即使您为Toolbar添加自己的TextView子项（如下所示），android.support.v7.widget.Toolbar仍将覆盖您的样式。

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

    <TextView
        android:id="@+id/title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

为了最终解决这个问题，请在标题处放置您自己的TextView，并覆盖Toolbar的setTitle方法以跳过Lollipop预定义的TitleTextAppearance。

public class YourCustomToolbar extends Toolbar {

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

    public YourCustomToolbar (Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public YourCustomToolbar (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
     }

    @Override
    public void setTitle(CharSequence title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }

    @Override
    public void setTitle(int title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }
}

- Dynameyes

---

那么，您如何将Java类映射到XML布局呢？您是否在所有构造函数中填充自定义布局？此外，您是否将布局包装在<merge>中？最后一个问题是，您是否通过在活动布局中放置<your.package. YourCustomToolbar/>来使用它，还是使用<include>？ - Marcel Bro

我编辑了你的帖子，并在TextView中添加了android:textAppearance="@style/TextAppearance.AppCompat.Title"。这样，它的基本外观与普通的AppBar标题外观相同。 - MrStahlfelge

Answer 5

您可以按照以下步骤将主题应用于工具栏：

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="56dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

只需要在styles.xml文件中修改TextAppearance属性即可更改样式，然后你就可以使用了。

- Aditya Vaidyam

---

我尝试按照之前提问中所说的创建了自定义样式，但是没有成功。您能否向我展示一个应该有效的示例样式？ - Kenneth