【问题标题】:How to change CollapsingToolbarLayout typeface and size?如何更改 CollapsingToolbarLayout 字体和大小?
【发布时间】:2015-10-22 16:47:26
【问题描述】:

我想更改CollapsingToolbarLayout 字体大小及其字体。我怎样才能做到这一点?

【问题讨论】:

  • 试过 setCollapsedTitleTextAppearance();和 setCollapsedTitleTextColor();功能?
  • @abhishek,这不是我要找的。我无法通过 xml 更改字体。

标签: android fonts toolbar font-size android-collapsingtoolbarlayout


【解决方案1】:

更新

在深入研究代码之前,让我们首先确定textSizeCollapsingToolbarLayout。 Google 发布了一个名为material.io 的网站,该网站还解释了如何处理Typography 的最佳方法。

文章提到了“标题”类别,还解释了在sp中使用的推荐字体大小。

虽然文章从未提及推荐的CollapsingToolbarLayout's 扩展 大小,但库com.android.support:design 为我们的案例提供了TextAppearance。通过对源代码的一些挖掘,结果发现大小为34sp(文章中未提及)。

那么折叠后的尺寸呢?幸运的是文章提到了一些东西,它是20sp

目前最适合collpased模式的TextAppearanceTextAppearance.AppCompat.Title,而我们的扩展模式TextAppearanceTextAppearance.Design.CollapsingToolbar.Expanded

如果您观察我们上面的所有示例,所有示例都使用 REGULAR 版本的字体,可以肯定地说,Roboto regular 将完成任务,除非您有特定要求。

下载字体本身可能工作量太大,为什么不使用包含所有需要的 Roboto 字体的库呢?所以我介绍了一个用于 Roboto 的书法库,例如Typer.

dependencies {
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.rhexgomez.typer:typer-roboto:2.0.0'
}
<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

Java

// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

科特林

// Kotlin example
collapsing_toolbar.apply {
    setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
    setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}

这是 2019 年的更新,因为 Typer 库已更新!我也是图书馆的作者。

【讨论】:

  • 是否有设置边距折叠标题,
  • @Mr.G 在您的工具栏上使用 app:titleMargin=""。
【解决方案2】:

您可以使用CollapsingToolbarLayout 上的新公共方法来设置折叠和展开标题的字体,如下所示:

final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);

这似乎是在设计支持库 23.1.0 中添加的,非常受欢迎。

【讨论】:

  • 如何更改标题?我想以编程方式将标题设置为不同的文本。
  • 您可以在CollapsingToolbarLayout 实例上使用setTitle(String) 方法。
【解决方案3】:

你可以这样做:

mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);

对应的textview样式可以是:

<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

另请参阅here 以供参考。

【讨论】:

  • 这对我来说改变了标题文本颜色,因为我发现ToolbarToolbar.setTitleTextColor()app:titleTextColor 在包含在CollapsingToolbarLayout 中时不会改变工具栏标题的颜色
  • @patrickjason91 你必须使用CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
【解决方案4】:
    mCollapsingToolbar.setTitle(getTitle());
    mCollapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
    mCollapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);

<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="ExpandedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28.5sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24.5sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

参考这里CollapsingToolbarLayout setTitle not work correctly

【讨论】:

    【解决方案5】:

    要在此处添加所有答案, 无论我尝试在 AppTheme 中的何处应用样式引用,它在 xml 中都不起作用。我目前正在使用支持库 27.1.1

    它只能以编程方式工作。

    Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
    collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
    collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
    

    【讨论】:

    • 确保首先设置折叠工具栏标题。设置标题后设置 setCollapsedTitleTypeFace 对我有用。
    • 是的,它对我有用,应该对使用“字体”文件夹的人有用。
    【解决方案6】:

    代码在这里

     <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
                app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="@dimen/expanded_toolbar_title_margin_start"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    

    在 CollapsingToolbarLayout 布局中添加这些代码行

     app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
     app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
    

    下面给出的代码,在 style.xml 中

    <style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">16sp</item>
    </style>
    

    【讨论】:

    • 是否有设置边距折叠标题?
    【解决方案7】:

    看来我有解决办法:

    private void makeCollapsingToolbarLayoutLooksGood(CollapsingToolbarLayout collapsingToolbarLayout) {
        try {
            final Field field = collapsingToolbarLayout.getClass().getDeclaredField("mCollapsingTextHelper");
            field.setAccessible(true);
    
            final Object object = field.get(collapsingToolbarLayout);
            final Field tpf = object.getClass().getDeclaredField("mTextPaint");
            tpf.setAccessible(true);
    
            ((TextPaint) tpf.get(object)).setTypeface(Typeface.createFromAsset(getAssets(), "Roboto-Bold.ttf"));
            ((TextPaint) tpf.get(object)).setColor(getResources().getColor(R.color.ice));
        } catch (Exception ignored) {
        }
    }
    

    【讨论】:

      【解决方案8】:

      更改字体大小或父级。

      <style name="expandedappbar" parent="@android:style/TextAppearance.Medium"> //Change Medium to Small
          <item name="android:textSize">28sp</item>  <!--Or Change the font size -->
          <item name="android:textColor">@color/white</item>
          <item name="android:textStyle">bold</item>
      </style>
      
      <style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
          <item name="android:textSize">18sp</item>
          <item name="android:textColor">@color/white</item>
      </style>
      

      【讨论】:

        【解决方案9】:

        Android 8.0(API 级别 26)引入了一项新功能,XML 中的字体

        现在您可以将字体定义为资源https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

        • 将字体放入res-&gt; font-&gt;文件夹中
        • 定义字体.xml
           <?xml version="1.0" encoding="utf-8"?>
              <font-family xmlns:android="http://schemas.android.com/apk/res/android">
                <font
                    android:fontStyle="normal"
                    android:fontWeight="400"
                    android:font="@font/lobster_regular" />
                <font
                    android:fontStyle="italic"
                    android:fontWeight="400"
                    android:font="@font/lobster_italic" />
            </font-family>
        

        下一组

            val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
            htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
            htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
        

        【讨论】:

          猜你喜欢
          • 2011-06-14
          • 1970-01-01
          • 2015-01-10
          • 1970-01-01
          • 1970-01-01
          • 2016-08-05
          • 2017-05-09
          • 2019-02-19
          • 2011-09-24
          相关资源
          最近更新 更多