logo标签列表

CollapsingToolbarLayout 的字体

androidandroid-layout
19

有没有办法为CollapsingToolbarLayout设置字体？ 我正在使用Calligraphy，但默认字体未应用。

我认为问题在于CollapsingTextHelper类正在使用Canvas.drawText()而不是TextView。

我如何更改用于Canvas.drawText()的默认字体？

2
你需要使用反射。我在 这里 中描述了如何使用 TextInputLayout 进行操作，但是使用 CollapsingToolbarLayout 的步骤应该是相同的。 - adneal
@lukas1994，你能提供你的源代码吗？ - Anton Shkurenko
@lukas1994 已经完成，感谢你的问题和答案。 - Anton Shkurenko
6个回答
19
3
有人使这个程序工作了吗？似乎什么也没发生。 - RED_
对我很有用，谢谢！您需要使用callygraphy的TypefaceUtils.load()来加载字体... - dimsuz
@RED_ 对我来说也没有起作用。在设置标题之后设置setCollapsedTitleTypeFace对我有用。 - Pradip Tilala
2
您可以通过包装 widget 类来欺骗。当 widget 附加到窗口时，更改 TypeFace。
提示：Calligraphy 库包括用于 TypeFace 的帮助类。您可以基于 AssetManager 和 assets 目录中字体的路径生成 TypeFace。
例如，我将为 CollapsingToolbarLayout 类应用自定义字体：
class CollapsingToolbarLayoutWrapper : CollapsingToolbarLayout {
    
    // Required constructors
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        try {
            val applicationContext = this.context.applicationContext
            val assetManager = applicationContext.assets
            val fontBold = applicationContext.getString(R.string.font_default_bold)
            this.setCollapsedTitleTypeface(TypefaceUtils.load(assetManager, fontBold))
            this.setExpandedTitleTypeface(TypefaceUtils.load(assetManager, fontBold))
        } catch (exception: Exception) {
            // Maybe exceptions from typeface, like missing font in assets, for font is not accept,...
        }
    }

}

在布局的xml文件中，使用CollapsingToolbarLayoutWrapper代替：

<android.support.design.widget.CoordinatorLayout>
    <!-- ... -->
    <android.support.design.widget.AppBarLayout>
        <!-- ... -->
        <....CollapsingToolbarLayoutWrapper
          app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
          app:collapsedTitleGravity="center"
          
          <!-- (optional) If you need to change title text size for collapsed/expanded states, can change attributes app:collapsedTitleTextAppearance, app:expandedTitleTextAppearance -->
          app:collapsedTitleTextAppearance="@style/AppTheme.Widget.Style.Toolbar.TextAppearance.Title"
          app:expandedTitleTextAppearance="@style/AppTheme.Widget.Style.Toolbar.TextAppearance.Title.Expanded"

          app:expandedTitleGravity="start|bottom"
          app:expandedTitleMarginStart="32dp">
            <android.support.v7.widget.Toolbar>
                <!-- ... -->
            </android.support.v7.widget.Toolbar>
        </....CollapsingToolbarLayoutWrapper>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

结果

结果

这是一个展示结果的动态图片。
2

是可以的。事实上，默认情况下，标题折叠时的字体与未折叠时的字体不同。

因此，为了更改这个问题，例如，您可以这样做：

样式文件

<style name="TextAppearance.Collapsed"
    parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:fontFamily">sans-serif</item>
</style>

布局文件
<android.support.design.widget.CollapsingToolbarLayout
    app:collapsedTitleTextAppearance="@style/TextAppearance.Collapsed">
    ...
</android.support.design.widget.CollapsingToolbarLayout>

类似的事情也可以用于展开时的样式（"expandedTitleTextAppearance"）。
1
我确实这样做了，但没有帮助 :/ 我可以在布局编辑器中看到字体已更改，但在运行时没有变化。 - milosmns
如果您能够创建一个包含此问题的示例项目，请将其报告为错误：https://issuetracker.google.com/issues - android developer
我实际上成功地使用下面一些答案在运行时应用了字体。只是一个有趣的事实，这样它就可以工作了。 - milosmns
@milosmns，通过编程更改可以实现，但是通过XML不行？我建议报告一下。以前它能够正常工作。 - android developer
我需要在一个样例项目中验证这个，但是没错。 - milosmns
0

第一步是选择您想要使用的字体。

其次，在您的资产目录中创建一个“Fonts”文件夹，并将您的字体复制到其中。

XML文件

        <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="@android:color/transparent"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your content-->
    </android.support.design.widget.CollapsingToolbarLayout>

Java文件

 private void initCollapsingToolbar() {
        final CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(" ");
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
        appBarLayout.setExpanded(true);

collapsingToolbar.setTitle(getString("Toolbar name");
                    Typeface tf = Typeface.createFromAsset(getAssets(),
                            "res/font/frederickathegreatregular.ttf");
                    collapsingToolbar.setCollapsedTitleTypeface(tf);

}
0

您可以按照以下方式更改CollapsingToolbarLayout标题的文本外观：

1）确保您在build.gradle依赖项中使用compile 'com.android.support:design:22.2.1'。

2）像这样使用expandedTitleTextAppearance：

<android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/myPrimaryColor"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleTextAppearance="@style/HeaderTitleStyle">

3) 在你的样式文件中定义HeaderTitleStyle：

<style name="HeaderTitleStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">20sp</item>
</style>
6
这如何回答关于设置自定义字体的原始问题？ - gnuf
2
这并不能帮助设置自定义字体。 - sziraqui
0

使用Android应用栏布局和可折叠工具栏布局的自定义字体

在CoordinatorLayout内部以下代码：

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/toolbar_color_palette"
        android:layout_height="152dp"
        android:fitsSystemWindows="true"
        app:liftOnScroll="true"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay"
        >
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginStart="72dp"
            app:expandedTitleMarginBottom="28dp"

            app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/sample1"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:contentDescription="@string/app_name" />
            <com.google.android.material.appbar.MaterialToolbar
                android:elevation="0dp"
                android:id="@+id/topAppBar5"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="@string/toolbar_title"
                app:layout_collapseMode="pin"
                app:menu="@menu/menu_with_icons"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:navigationIcon="@drawable/ic_drawer_white"
                />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

风格：

<style name="TextAppearance.App.CollapsingToolbar.Expanded" parent="TextAppearance.MaterialComponents.Headline5">
        <item name="android:textColor">?attr/colorOnPrimary</item>
        <item name="fontFamily">@font/rosarivo</item>
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>
    <style name="TextAppearance.App.CollapsingToolbar.Collapsed" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">?attr/colorOnPrimary</item>
        <item name="fontFamily">@font/rosarivo</item>
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>

输出： 输入图像描述

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接