如何更改CollapsingToolbarLayout字体和大小？

Question

我想改变CollapsingToolbarLayout字体大小和字体.我怎么能做到这一点？

Answer 1

更新

在我们深入到代码让我们首先决定了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的

// 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库已更新!我也是图书馆的作者.}

Answer 2

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

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

这似乎已添加到设计支持库23.1.0中,是一个非常受欢迎的补充.

Answer 3

你可以做这样的事情:

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

对应的textview样式可以是:28sp#000 bold

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

另见这里供参考.

Answer 4

看起来我有解决方案:

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) {
    }
}

Answer 5

    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无法正常工作

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

Answer 7

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

它仅以编程方式起作用。

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

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