Làm cách nào để thay đổi kích thước và kiểu chữ CollapsingToolbarLayout?

86

Tôi muốn thay đổi CollapsingToolbarLayoutkích thước phông chữ và kiểu chữ của nó. Làm thế nào tôi có thể đạt được điều đó?

nhập mô tả hình ảnh ở đây

android  fonts  toolbar  font-size  android-collapsingtoolbarlayout 
— AlexMomotov
nguồn
3
đã thử setCollapsedTitleTextAppearance (); và setCollapsedTitleTextColor (); chức năng ?
— Abhishek,
@abhishek, nó không phải là thứ tôi đang tìm kiếm. Tôi không thể thay đổi kiểu chữ qua xml.
— AlexMomotov,

Câu trả lời:

139

Cập nhật

Trước khi chúng ta đi sâu vào mã, trước tiên hãy quyết định mã textSizecủa chúng ta CollapsingToolbarLayout. Google đã xuất bản một trang web có tên material.io, trang web này cũng giải thích cách tốt nhất về cách xử lý Typography .

Bài viết đã đề cập đến danh mục "Tiêu đề" cũng giải thích kích thước phông chữ được khuyến nghị sử dụng sp.

nhập mô tả hình ảnh ở đây

Mặc dù bài báo không bao giờ đề cập đến đề xuất CollapsingToolbarLayout's mở rộng kích thước nhưng thư viện com.android.support:designcung cấp một TextAppearancecho trường hợp của chúng tôi. Với một số đào bằng nguồn thì nó chỉ ra rằng kích thước đó 34sp(không được đề cập trong bài viết).

Vậy kích thước thu gọn thế nào? May mắn thay, bài báo đã đề cập đến điều gì đó và đúng như vậy 20sp.

nhập mô tả hình ảnh ở đây

Và điều tốt nhất TextAppearancecho đến nay phù hợp với chế độ collpased là TextAppearance.AppCompat.Titletrong khi chế độ mở rộng của chúng tôi TextAppearancelà TextAppearance.Design.CollapsingToolbar.Expanded.

Nếu bạn quan sát tất cả các ví dụ của chúng tôi ở trên, tất cả chúng đều sử dụng phiên bản THƯỜNG XUYÊN của phông chữ có thể nói là Roboto regularsẽ thực hiện nhiệm vụ trừ khi bạn có yêu cầu cụ thể.

Có thể quá nhiều công việc tải xuống các phông chữ tại sao không sử dụng một thư viện có tất cả các phông chữ Roboto cần thiết? Vì vậy, tôi giới thiệu một thư viện thư pháp cho Roboto, ví dụ như 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)
}

Đây là bản cập nhật năm 2019 vì thư viện Typer được cập nhật! Tôi cũng là tác giả của thư viện.

— Enzokie
nguồn
1
vẫn có cách nào đó để đặt lợi nhuận cho tiêu đề thu gọn,
— Mr.G
@ Mr.G sử dụng ứng dụng: titleMargin = "" trên Thanh công cụ của bạn.
— Emre Akcan
82

Bạn có thể sử dụng các phương pháp công khai mới, CollapsingToolbarLayoutđể đặt kiểu chữ cho tiêu đề thu gọn và mở rộng, như sau:

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

Điều này dường như đã được thêm vào thư viện hỗ trợ thiết kế 23.1.0 và là một bổ sung rất được hoan nghênh.

— Neal Sanche
nguồn
Làm thế nào để bạn thay đổi Tiêu đề? Tôi muốn đặt Tiêu đề thành một văn bản khác theo lập trình.
— Equivocal
1
Bạn có thể sử dụng setTitle(String)phương thức trên CollapsingToolbarLayoutphiên bản này.
— Neal Sanche
67

Bạn có thể làm điều gì đó như sau:

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

Kiểu textview tương ứng có thể là:

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

cũng xem tại đây để tham khảo.

— luochenhuan
nguồn
1
Điều này đã làm việc cho tôi thay đổi màu sắc tiêu đề văn bản, vì tôi thấy rằng Toolbar.setTitleTextColor()hoặc app:titleTextColorcác Toolbarthay đổi doesnt màu sắc của tiêu đề của thanh công cụ khi kèm theo trongCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 u phải sử dụngCollapsingToolbarLayout 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>

Tham khảo tại đây CollapsingToolbarLayout setTitle không hoạt động chính xác

— nhím
nguồn
12

Để thêm vào tất cả các câu trả lời ở đây, Nó không hoạt động với tôi trong xml cho dù tôi đã cố gắng áp dụng ở đâu, trong AppTheme, tham chiếu theo kiểu. Tôi hiện đang sử dụng thư viện hỗ trợ 27.1.1

Nó chỉ hoạt động theo chương trình. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— Đã ngồi
nguồn
Đảm bảo đặt tiêu đề thanh công cụ Thu gọn trước . Đặt setCollapsedTitleTypeFace sau khi đặt tiêu đề phù hợp với tôi.
— pradip Tilala
vâng nó đã làm việc cho tôi và sẽ hoạt động cho những người sử dụng thư mục 'font'.
— VipiN Negi
10

Có vẻ như tôi có giải pháp:

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
nguồn
10

Mã ở đây

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

Thêm các dòng mã này trong bố cục CollapsingToolbarLayout

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

Và mã được đưa ra bên dưới, trong style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
nguồn
có cách nào để đặt lề để thu gọn tiêu đề không?
— Mr.G
4

Thay đổi kích thước phông chữ hoặc phụ huynh.

<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
nguồn
1

Android 8.0 (API cấp 26) đã giới thiệu một tính năng mới, Phông chữ trong XML

Giờ đây, bạn có thể xác định phông chữ dưới dạng tài nguyên https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Đặt phông chữ của bạn vào res-> font->thư mục
  • Xác định 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>

bộ tiếp theo

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.