Jak zmienić krój i rozmiar czcionki CollapsingToolbarLayout?

86

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

wprowadź opis obrazu tutaj

AlexMomotov
źródło
3
próbowano setCollapsedTitleTextAppearance (); i setCollapsedTitleTextColor (); funkcja?
Abhishek
@abhishek, to nie jest to, czego szukam. Nie mogę zmienić kroju pisma przez XML.
AlexMomotov

Odpowiedzi:

139

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.

wprowadź opis obrazu tutaj

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.

wprowadź opis obrazu tutaj

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.

Enzokie
źródło
1
czy istnieje możliwość ustawienia marginesu na zwinięcie tytułu,
Pan G.
@ Mr.G użyj aplikacji: titleMargin = "" na pasku narzędzi.
Emre Akcan
82

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.

Neal Sanche
źródło
Jak zmienić tytuł? Chcę programowo ustawić tytuł na inny tekst.
Niejednoznaczny
1
Prawdopodobnie możesz użyć tej setTitle(String)metody na CollapsingToolbarLayoutinstancji.
Neal Sanche
67

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.

luochenhuan
źródło
1
To nie dla mnie pracę zmieniających kolor tytuł tekstu, ponieważ uważam, że Toolbar.setTitleTextColor()albo app:titleTextColorod Toolbarzmian nie robi kolor paska tytułu, gdy zamknięty wCollapsingToolbarLayout
patrickjason91
1
@ patrickjason91 u must useCollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
abbasalim
14
    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

jeż
źródło
12

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);
sat
źródło
Pamiętaj, aby najpierw ustawić tytuł zwijanego paska narzędzi . Ustaw setCollapsedTitleTypeFace po ustawieniu tytułu zadziałało dla mnie.
pradip tilala
tak, zadziałało dla mnie i powinno działać dla tych, którzy używają folderu „font”.
VipiN Negi
10

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) {
    }
}
AlexMomotov
źródło
10

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>
Ashish Saini
źródło
czy w ogóle istnieje możliwość ustawienia marginesu, aby zwinąć tytuł?
Pan G.
4

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>
Priya Rajan
źródło
1

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)
Hitesh Sahu
źródło