Я хочу змінити CollapsingToolbarLayoutрозмір шрифту та його шрифт. Як я можу цього досягти?

Оновлення

Перш ніж заглибитися в код, давайте спочатку визначимося з textSizeнашим CollapsingToolbarLayout. Google опублікував веб-сайт під назвою. material.ioЦей веб-сайт також пояснює найкращі способи боротьби з типографікою .

У статті згадується про категорію "Заголовок", яка також пояснює рекомендований розмір шрифту для використання sp.

Хоча в статті ніколи не згадувався рекомендований CollapsingToolbarLayout's розширений розмір, але бібліотека com.android.support:designпропонує TextAppearanceдля нашого випадку. При деякому копанні з джерелом виявляється, що такий розмір 34sp(не згадується в статті).

То як щодо згорнутого розміру? На щастя, у статті щось згадувалось, і воно є 20sp.

І найкраще на TextAppearanceсьогоднішній день, що підходить у збіжному режимі, - це TextAppearance.AppCompat.Titleтой час, коли наш розширений режим TextAppearanceє TextAppearance.Design.CollapsingToolbar.Expanded.

Якщо ви спостерігаєте за всіма нашими прикладами, то всі вони використовують РЕГУЛЯРНУ версію шрифту, що можна впевнено сказати, що 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 оновлена! Я також є автором бібліотеки.}

Ви можете використовувати нові загальнодоступні методи on, CollapsingToolbarLayoutщоб встановити гарнітуру для згорнутого та розгорнутого заголовка, наприклад:

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

Здається, це було додано до бібліотеки підтримки дизайну 23.1.0, і це дуже вітається доповнення.

Ви можете зробити щось подібне:

mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.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>

також дивіться тут для довідки.

    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 працює некоректно

Щоб додати до всіх відповідей тут, це не працювало для мене в xml, незалежно від того, де я намагався застосувати, в AppTheme, посилання в стилях. Зараз я використовую бібліотеку підтримки 27.1.1

Це працювало лише програмно.

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

Схоже, у мене є рішення:

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

Код тут

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

Змініть розмір шрифту або батьківський.

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

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)