CollapsingToolbarLayout yazı tipi ve boyutu nasıl değiştirilir?

Yanıtlar:

139

Güncelleme

Koda dalmadan önce ilk önce textSizebizim için karar verelim CollapsingToolbarLayout. Google adlı bir web sitesi yayınladı material.io, bu web sitesi aynı zamanda Tipografi ile nasıl başa çıkılacağını açıklıyor .

Makalede, kullanılması önerilen yazı tipi boyutunu da açıklayan "Başlık" kategorisinden bahsediliyor sp.

görüntü açıklamasını buraya girin

Makale tavsiye bahsetmedi rağmen CollapsingToolbarLayout's genişletilmiş boyut ama kütüphane com.android.support:designbir sağlar TextAppearancebizim durumumuzda için. Kaynakla biraz kazı yapıldığında, boyutun 34sp(makalede belirtilmemiştir) olduğu ortaya çıktı .

Peki ya daraltılmış boyut? Neyse ki makale bir şeyden bahsetti ve öyle 20sp.

görüntü açıklamasını buraya girin

Ve en iyi TextAppearanceyer uyuyor bugüne kadar olduğu collpased modda olduğu TextAppearance.AppCompat.Titlebizim ise genişletilmiş mod TextAppearanceolduğunu TextAppearance.Design.CollapsingToolbar.Expanded.

Tüm örneklerimizi gözlemlerseniz, hepsinin , belirli gereksinimleriniz olmadıkça görevi yerine getireceğini söylemek güvenli olan yazı tipinin DÜZENLİ versiyonunu kullanır Roboto regular.

Yazı tiplerini indirmek çok fazla iş olabilir, neden gerekli tüm Roboto yazı tiplerini içeren bir kitaplık kullanmayasınız? Bu yüzden Roboto için bir kaligrafi kitaplığı tanıtıyorum, örneğin 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

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

Bu, Typer kitaplığı güncellendiği için bir 2019 güncellemesidir! Ben de kütüphanenin yazarıyım.

— Enzokie
kaynak
1
başlığı daraltmak için marj belirleyecek bir şey var mı,
— G
@ Mr.G araç çubuğunuzda app: titleMargin = "" kullanın.
— Emre Akcan
83

CollapsingToolbarLayoutDaraltılmış ve genişletilmiş başlığın yazı tipini ayarlamak için yeni genel yöntemleri kullanabilirsiniz , örneğin:

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

Bu, 23.1.0 tasarım destek kitaplığına eklenmiş gibi görünüyor ve çok hoş bir ek.

— Neal Sanche
kaynak
Başlığı nasıl değiştirirsiniz? Başlığı programlı olarak farklı bir metne ayarlamak istiyorum.
— Equivocal
1
Muhtemelen örnekte setTitle(String)yöntemi kullanabilirsiniz CollapsingToolbarLayout.
— Neal Sanche
67

Bunun gibi bir şey yapabilirsiniz:

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

İlgili metin görüntüleme stili şunlar olabilir:

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

ayrıca referans için buraya bakın .

— Luochenhuan
kaynak
1
Bunu bulmak, bu durum başlık metin rengini değiştirme benim için çalışma yaptı Toolbar.setTitleTextColor()ya app:titleTextColorait Toolbardoesnt değişikliği araç çubuğunun başlık rengi etrafı sarıldığındaCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 kullanmanız gerekirCollapsingToolbarLayout 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>

Referans burada CollapsingToolbarLayout setTitle düzgün çalışmıyor

— kirpi
kaynak
13

Buradaki tüm cevaplara eklemek için, AppTheme'de, stillere atıfta bulunarak, nereye başvurmaya çalışsam da xml'de benim için işe yaramadı. Şu anda 27.1.1 destek kitaplığını kullanıyorum

Yalnızca programatik olarak çalıştı. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— oturdu
kaynak
Öncelikle Daraltma araç çubuğu başlığını ayarladığınızdan emin olun . Benim için çalışan başlığı ayarladıktan sonra setCollapsedTitleTypeFace'i ayarlayın .
— Pradip Tilala
evet benim için çalıştı ve 'yazı tipi' klasörünü kullananlar için çalışmalı.
— VipiN Negi
10

Görünüşe göre bir çözümüm var:

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

Kod burada

 <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 düzenine bu kod satırlarını ekleyin

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

Aşağıda, style.xml'de verilen kod

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
kaynak
başlığı daraltmak için kenar boşluğunu ayarlamanın bir yolu var mı?
— G
4

Yazı tipi boyutunu veya ebeveyni değiştirin.

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

Android 8.0 (API seviyesi 26), XML'de Yazı Tipleri adlı yeni bir özellik sunuyor

Artık yazı tiplerini kaynak olarak tanımlayabilirsiniz https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Yazı tiplerinizi koyun res-> font-> klasöre
  • Font.xml'yi tanımlayın
   <?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>

sonraki set

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.