如何更改CollapsingToolbarLayout字体和大小?

问题描述 投票:75回答:8

我想改变CollapsingToolbarLayout字体大小及其字体。我怎么能做到这一点?

enter image description here

android fonts toolbar font-size android-collapsingtoolbarlayout
8个回答
125
投票

Update

在我们深入研究代码之前,让我们首先为textSize决定CollapsingToolbarLayout。谷歌发布了一个名为material.io的网站,这个网站也解释了如何处理Typography的最佳方式。

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

enter image description here

虽然文章从未提及推荐的CollapsingToolbarLayout's扩大尺寸,但库com.android.support:design为我们的案例提供了TextAppearance。通过对源的一些挖掘,结果证明大小是34sp(文章中没有提到)。

那么倒塌的尺寸怎么样?幸运的是,文章提到了一些东西,它是20sp

enter image description here

到目前为止最适合崩溃模式的qazxsw poi是qazxsw poi,而我们的扩展模式TextAppearanceTextAppearance.AppCompat.Title

如果你观察我们上面的所有例子,他们都使用REGULAR版本的字体,可以说TextAppearance将完成任务,除非你有特殊要求。

下载字体本身可能是太多工作为什么不使用具有所有所需的Roboto字体的库?所以我为Roboto介绍一个书法图书馆,例如TextAppearance.Design.CollapsingToolbar.Expanded

Roboto regular
Typer

Java的

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

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


80
投票

您可以在// 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)
}

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


53
投票

你可以这样做:

CollapsingToolbarLayout

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

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

另见mCollapsingToolbarLayout.setTitle(getTitle()); mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar); mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar); 供参考。


10
投票

看起来我有解决方案:

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

10
投票
here

在这里参考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) { } }


7
投票

代码就在这里

    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布局中添加这些代码行

CollapsingToolbarLayout setTitle not work correctly

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

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

6
投票

为了在这里添加所有答案,无论我在AppTheme中尝试应用哪个地方,在xml中引用它都不适合我。我目前正在使用支持库27.1.1

它只能以编程方式工作。

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

4
投票

更改字体大小或父级。

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

0
投票

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

现在您可以将字体定义为资源Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font); collapsingToolbarLayout.setCollapsedTitleTypeface(typeface); collapsingToolbarLayout.setExpandedTitleTypeface(typeface);

  • 将您的字体放在<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> 文件夹中
  • 定义font.xml
https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

下一组

res-> font->
© www.soinside.com 2019 - 2024. All rights reserved.