Bagaimana cara mengubah jenis huruf dan ukuran CollapsingToolbarLayout?


Jawaban:


139

Memperbarui

Sebelum kita menyelami kode, mari kita putuskan dulu textSizeuntuk kita CollapsingToolbarLayout. Google menerbitkan situs web bernama material.io, situs web ini juga menjelaskan cara terbaik tentang cara menangani Tipografi .

Artikel tersebut menyebutkan tentang kategori "Judul" yang juga menjelaskan ukuran font yang disarankan untuk digunakan sp.

masukkan deskripsi gambar di sini

Meskipun artikel tersebut tidak pernah menyebutkan ukuran CollapsingToolbarLayout's diperluas yang direkomendasikan tetapi perpustakaan com.android.support:designmenyediakan TextAppearanceuntuk kasus kami. Dengan beberapa penggalian dengan sumbernya ternyata ukurannya 34sp(tidak disebutkan dalam artikel).

Jadi bagaimana dengan ukuran yang runtuh? Untungnya artikel tersebut menyebutkan sesuatu dan memang benar 20sp.

masukkan deskripsi gambar di sini

Dan yang terbaik TextAppearancesejauh yang cocok di collpased mode TextAppearance.AppCompat.Titlesementara kami diperluas modus TextAppearanceadalah TextAppearance.Design.CollapsingToolbar.Expanded.

Jika Anda mengamati semua contoh kami di atas semuanya menggunakan versi REGULER dari font yang aman untuk mengatakan itu Roboto regularakan melakukan tugas kecuali Anda memiliki persyaratan khusus.

Mungkin terlalu banyak pekerjaan mengunduh font itu sendiri mengapa tidak menggunakan perpustakaan yang memiliki semua font Roboto yang dibutuhkan? Jadi saya memperkenalkan perpustakaan kaligrafi untuk Roboto misalnya 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)
}

Ini adalah pembaruan 2019 karena perpustakaan Typer diperbarui! Saya juga penulis perpustakaan.


1
apakah ada cara untuk mengatur margin untuk menciutkan judul,
Mr.G

@ Mr.G menggunakan app: titleMargin = "" di Toolbar Anda.
Emre Akcan

83

Anda bisa menggunakan metode publik baru, di CollapsingToolbarLayoutuntuk menyetel jenis huruf untuk judul yang diciutkan dan diperluas, seperti:

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

Ini tampaknya telah ditambahkan di pustaka dukungan desain 23.1.0, dan merupakan tambahan yang sangat disambut baik.


Bagaimana Anda mengubah Judul? Saya ingin mengatur Judul ke teks yang berbeda secara terprogram.
Equivocal

1
Anda mungkin dapat menggunakan setTitle(String)metode ini pada CollapsingToolbarLayoutinstance.
Neal Sanche

67

Anda bisa melakukan sesuatu seperti ini:

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

Gaya textview yang sesuai bisa jadi:

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

lihat juga di sini untuk referensi.


1
Ini melakukan pekerjaan untuk saya mengubah warna teks judul, karena saya menemukan bahwa Toolbar.setTitleTextColor()atau app:titleTextColordari Toolbarperubahan doesnt warna judul toolbar ketika tertutup diCollapsingToolbarLayout
patrickjason91

1
@ patrickjason91 kamu harus menggunakanCollapsingToolbarLayout 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>

Referensi di sini CollapsingToolbarLayout setTitle tidak berfungsi dengan benar


13

Untuk menambah semua jawaban di sini, Itu tidak berhasil untuk saya di xml di mana pun saya mencoba menerapkan, di AppTheme, mereferensikan dalam gaya. Saya saat ini menggunakan pustaka dukungan 27.1.1

Ini hanya bekerja secara programatik.

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

Pastikan untuk menyetel judul toolbar Menciutkan terlebih dahulu . Setel setCollapsedTitleTypeFace setelah pengaturan judul berhasil untuk saya.
Pradip Tilala

ya itu berhasil untuk saya dan harus bekerja untuk siapa yang menggunakan folder 'font'.
VipiN Negi

10

Sepertinya saya punya solusi:

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

10

Kode ada di sini

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

Tambahkan baris kode ini di tata letak CollapsingToolbarLayout

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

Dan kode yang diberikan di bawah ini, dalam style.xml

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

apakah ada cara untuk mengatur margin untuk menciutkan judul?
Tn. G

4

Ubah ukuran font atau induk.

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

1

Android 8.0 (API level 26) telah memperkenalkan fitur baru, Font dalam XML

Sekarang Anda dapat menentukan font sebagai sumber daya https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Masukkan font Anda ke dalam res-> font->folder
  • Tentukan 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>

set berikutnya

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.