จะเปลี่ยนแบบอักษรและขนาด CollapsingToolbarLayout ได้อย่างไร


87

ฉันต้องการเปลี่ยนCollapsingToolbarLayoutขนาดตัวอักษรและแบบอักษร ฉันจะบรรลุเป้าหมายนั้นได้อย่างไร?

ป้อนคำอธิบายภาพที่นี่


3
พยายาม setCollapsedTitleTextAppearance (); และ setCollapsedTitleTextColor (); ฟังก์ชัน?
Abhishek

@abhishek ไม่ใช่สิ่งที่ฉันกำลังมองหา ฉันไม่สามารถเปลี่ยนแบบอักษรผ่าน xml
AlexMomotov

คำตอบ:


139

อัปเดต

ก่อนที่เราจะดำน้ำในรหัส Let 's แรกตัดสินใจสำหรับเราtextSize CollapsingToolbarLayoutGoogle การเผยแพร่เว็บไซต์ที่เรียกว่าmaterial.ioเว็บไซต์นี้ยังได้อธิบายถึงวิธีที่ดีที่สุดเกี่ยวกับวิธีการจัดการกับการพิมพ์

บทความกล่าวถึงหมวดหมู่ "หัวเรื่อง" ซึ่งอธิบายขนาดแบบอักษรที่แนะนำให้ใช้spด้วย

ป้อนคำอธิบายภาพที่นี่

แม้ว่าบทความไม่เคยพูดถึงขนาดCollapsingToolbarLayout's ขยายที่แนะนำแต่ไลบรารีcom.android.support:designมีTextAppearanceไว้สำหรับกรณีของเรา ด้วยการขุดบางแหล่งปรากฎว่ามีขนาด34sp (ไม่ได้กล่าวถึงในบทความ)

แล้วขนาดที่ยุบล่ะ? โชคดีที่บทความกล่าวถึงบางสิ่งและเป็น20spเช่นนั้น

ป้อนคำอธิบายภาพที่นี่

และสิ่งที่ดีที่สุดTextAppearanceที่เหมาะกับโหมดcollpasedคือ TextAppearance.AppCompat.Titleในขณะที่โหมดขยายของเราTextAppearanceคือTextAppearance.Design.CollapsingToolbar.Expandedคือ

หากคุณสังเกตตัวอย่างทั้งหมดของเราข้างต้นทั้งหมดนี้ใช้แบบอักษรรุ่นREGULARซึ่งสามารถพูดได้อย่างปลอดภัย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

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

นี่เป็นการอัปเดตปี 2019 เนื่องจากมีการอัปเดตไลบรารี Typer! ฉันยังเป็นผู้เขียนห้องสมุด


1
มีการกำหนดระยะขอบเพื่อยุบชื่อหรือไม่
Mr.G

@ Mr.G ใช้แอป: titleMargin = "" บน Toolbar ของคุณ
Emre Akcan

83

คุณสามารถใช้วิธีการสาธารณะใหม่CollapsingToolbarLayoutเพื่อตั้งค่าแบบอักษรสำหรับหัวเรื่องที่ยุบและขยายได้ดังนี้:

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

สิ่งนี้ดูเหมือนจะถูกเพิ่มเข้ามาในไลบรารีการสนับสนุนการออกแบบ 23.1.0 และเป็นการเพิ่มที่น่ายินดี


คุณจะเปลี่ยนชื่อเรื่องได้อย่างไร? ฉันต้องการตั้งชื่อเรื่องเป็นข้อความอื่นโดยทางโปรแกรม
Equivocal

1
คุณอาจใช้setTitle(String)วิธีการบนCollapsingToolbarLayoutอินสแตนซ์
Neal Sanche

67

คุณสามารถทำสิ่งนี้:

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>

ดูข้อมูลอ้างอิงได้ที่นี่


1
นี้ได้ทำงานสำหรับฉันในการเปลี่ยนสีของตัวอักษรชื่อตั้งแต่ฉันพบว่าToolbar.setTitleTextColor()หรือapp:titleTextColorการToolbarเปลี่ยนแปลงไม่ได้สีของชื่อของแถบเครื่องมือเมื่อล้อมรอบในCollapsingToolbarLayout
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>

อ้างอิงที่นี่CollapsingToolbarLayout setTitle ทำงานไม่ถูกต้อง


13

หากต้องการเพิ่มคำตอบทั้งหมดที่นี่มันใช้งานไม่ได้สำหรับฉันใน xml ไม่ว่าฉันจะพยายามสมัครที่ไหนก็ตามใน AppTheme การอ้างอิงในสไตล์ ฉันกำลังใช้ไลบรารีสนับสนุน 27.1.1

มันทำงานตามโปรแกรมเท่านั้น

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

ให้แน่ใจว่าจะตั้งชื่อแถบเครื่องมือยุบแรก ตั้งsetCollapsedTitleTypeFaceหลังจากตั้งชื่อเรื่องที่ใช้ได้สำหรับฉัน
ประดับทิลาลา

ใช่มันใช้งานได้สำหรับฉันและควรใช้ได้กับผู้ที่ใช้โฟลเดอร์ 'ฟอนต์'
VipiN Negi

10

ดูเหมือนว่าฉันจะมีทางออก:

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

รหัสอยู่ที่นี่

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

มีการกำหนดระยะขอบเพื่อยุบชื่อหรือไม่
Mr.G

4

เปลี่ยนขนาดฟอนต์หรือพาเรนต์

<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 ระดับ 26) ได้เปิดตัวฟีเจอร์ใหม่ Fonts ใน 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)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.