Chcę zmienić CollapsingToolbarLayoutrozmiar czcionki i jej krój. Jak mogę to osiągnąć?

Aktualizacja

Zanim zagłębimy się w kod, zdecydujmy najpierw textSizeo naszym CollapsingToolbarLayout. Firma Google opublikowała witrynę o nazwie material.io, ta witryna wyjaśnia również najlepszy sposób radzenia sobie z typografią .

W artykule wspomniano o kategorii „Nagłówek”, która wyjaśnia również zalecany rozmiar czcionki do użycia w sp.

Chociaż artykuł nigdy nie wspominał o zalecanym CollapsingToolbarLayout's rozszerzonym rozmiarze, ale biblioteka com.android.support:designzapewnia TextAppearancedla naszego przypadku. Po pewnym kopaniu ze źródłem okazuje się, że rozmiar jest 34sp(nie wspomniano w artykule).

A co powiesz na zwinięty rozmiar? Na szczęście artykuł o czymś wspomniał i tak jest 20sp.

A najlepiej TextAppearancedo tej pory, że zmieści się w collpased trybie jest TextAppearance.AppCompat.Titlenatomiast nasz rozbudowany tryb TextAppearancejest TextAppearance.Design.CollapsingToolbar.Expanded.

Jeśli przyjrzysz się wszystkim naszym przykładom, powyżej wszystkie używają ZWYKŁEJ wersji czcionki, co można śmiało powiedzieć, że Roboto regularwykona zadanie, chyba że masz określone wymagania.

Pobieranie samych czcionek może wymagać zbyt wiele pracy. Dlaczego nie skorzystać z biblioteki, która zawiera wszystkie potrzebne czcionki Roboto? Przedstawiam więc bibliotekę kaligrafii dla Roboto np . 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">

Jawa

// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

Kotlin

// Kotlin example
collapsing_toolbar.apply {
    setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
    setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}

_{To jest aktualizacja 2019, ponieważ biblioteka Typer została zaktualizowana! Jestem też autorem biblioteki.}

Możesz użyć nowych publicznych metod, CollapsingToolbarLayoutaby ustawić krój pisma zwiniętego i rozwiniętego tytułu, na przykład:

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

Wydaje się, że zostało to dodane do biblioteki wsparcia projektowania 23.1.0 i jest bardzo pożądanym dodatkiem.

Możesz zrobić coś takiego:

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

Odpowiednim stylem widoku tekstu może być:

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

Zobacz także tutaj w celach informacyjnych.

    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>

Odwołanie tutaj CollapsingToolbarLayout setTitle nie działa poprawnie

Aby dodać do wszystkich odpowiedzi tutaj, nie działało to dla mnie w xml bez względu na to, gdzie próbowałem zastosować, w AppTheme, odwoływanie się w stylach. Obecnie używam biblioteki wsparcia 27.1.1

Działało tylko programowo.

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

Wygląda na to, że mam rozwiązanie:

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

Kod jest tutaj

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

Dodaj te linie kodu w układzie CollapsingToolbarLayout

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

Oraz kod podany poniżej w style.xml

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

Zmień rozmiar czcionki lub element nadrzędny.

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

W systemie Android 8.0 (poziom interfejsu API 26) wprowadzono nową funkcję - czcionki w języku XML

Teraz możesz zdefiniować czcionki jako zasób https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

• Umieść swoje czcionki w res-> font->folderze
• Zdefiniuj plik 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>

następny zestaw

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)