如何更改CollapsingToolbarLayout字体和大小？

Answers:

139

更新资料

在深入研究代码之前，我们先textSize为我们确定CollapsingToolbarLayout。谷歌发布了一个名为的网站material.io，该网站还解释了如何处理印刷术的最佳方法。

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

在此处输入图片说明

尽管本文从没有提到建议的CollapsingToolbarLayout's 扩展大小，但是该库为我们的案例com.android.support:design提供了TextAppearance便利。经过对源代码的一些挖掘，事实证明大小是34sp（文章中未提及）。

那么缩小后的尺寸呢？幸运的是，这篇文章提到了一些事实20sp。

在此处输入图片说明

而最好的TextAppearance，到目前为止，在千篇一律collpased模式， TextAppearance.AppCompat.Title而我们的扩张模式TextAppearance是TextAppearance.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 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库已更新！我也是图书馆的作者。

— 恩佐基
source
1
无论如何，要设置标题崩溃边距，
— G.先生
@ Mr.G在工具栏上使用app：titleMargin =“”。
— Emre Akcan
82

您可以使用新的公共方法onCollapsingToolbarLayout来设置折叠和展开标题的字体，如下所示：

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

这似乎已添加到设计支持库23.1.0中，并且是非常受欢迎的添加。

— 尼尔·桑切
source
您如何更改标题？我想以编程方式将标题设置为其他文本。
— 模棱两可的'17
1
您可能可以setTitle(String)在CollapsingToolbarLayout实例上使用该方法。
— Neal Sanche
67

您可以执行以下操作：

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>

另请参阅此处以供参考。

— 罗晨欢
source
1
该做的工作对我来说改变标题字体颜色，因为我发现，Toolbar.setTitleTextColor()或app:titleTextColor的Toolbar封闭的时候并没有改变工具栏的标题的颜色CollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91您必须使用CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
— abbasalim
14 
    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无法正常工作

— 刺猬
source
12

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

它仅以编程方式起作用。 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— 坐着
source
确保首先设置“折叠”工具栏标题。设置标题对我有用后，设置setCollapsedTitleTypeFace。
— pradip tilala '19
是的，它对我有用，应该对使用“ font”文件夹的人有用。
— VipiN Negi，
10

看起来我有解决方案：

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) {
    }
}
— 亚历克斯·莫莫托夫（AlexMomotov）
source
10

代码在这里

 <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>
— 艾希什·塞尼（Ashish Saini）
source
反正有设置边距折叠标题？
— G.先生
4

更改字体大小或父字体。

<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>
— 普里亚·拉詹（Priya Rajan）
source
1

Android 8.0（API级别26）引入了一项新功能，即XML中的字体

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

  • 将字体放在res-> font->文件夹中
  • 定义font.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)
— Hitesh Sahu
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.