[android] CollapsingToolbarLayout 서체 및 크기를 변경하는 방법은 무엇입니까?

Question 1

CollapsingToolbarLayout글꼴 크기와 서체 를 변경하고 싶습니다 . 어떻게 할 수 있습니까?

Question 2

최신 정보

우리는 코드의하자로 다이빙을하기 전에 먼저 결정있어 textSize우리를 위해 CollapsingToolbarLayout. Google은라는 웹 사이트를 게시했습니다 material.io.이 웹 사이트는 또한 타이포그래피 를 다루는 가장 좋은 방법을 설명합니다 .

에서 사용할 권장 글꼴 크기를 설명하는 “제목”범주에 대해 언급 한 문서입니다 sp.

이 기사에서는 권장되는 CollapsingToolbarLayout's 확장 크기를 언급하지 않았지만 라이브러리 com.android.support:design는 TextAppearance우리의 경우를 제공합니다 . 소스를 파헤 치면 크기가 34sp(기사에 언급되지 않음) 밝혀졌습니다 .

그렇다면 접힌 크기는 어떻습니까? 운 좋게도 기사는 무언가를 언급했고 그것은입니다 20sp.

그리고 최고의 TextAppearance에 맞는 지금까지 있다는 접힌 모드가되어 TextAppearance.AppCompat.Title우리의 동안 확장 된 모드 TextAppearance입니다 TextAppearance.Design.CollapsingToolbar.Expanded.

위의 모든 예제를 살펴보면 모든 예제 는 특정 요구 사항이없는 한 작업을 수행 할 것이라고 말할 수 있는 일반 버전의 글꼴을 사용합니다 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 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)
}

_{Typer 라이브러리가 업데이트 되었기 때문에 이것은 2019 년 업데이트입니다! 저는 도서관의 저자이기도합니다.}

Question 3

다음과 같이 새로운 공개 방법을 사용하여 CollapsingToolbarLayout축소 및 확장 제목의 서체를 설정할 수 있습니다.

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

이것은 디자인 지원 라이브러리 23.1.0에 추가 된 것으로 보이며 매우 환영받는 추가입니다.

Question 4

다음과 같이 할 수 있습니다.

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

해당하는 textview 스타일은 다음과 같습니다.

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

또한 여기 를 참조하십시오.

Question 5

    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이 제대로 작동하지 않습니다.

Question 6

여기에 모든 답변을 추가하기 위해 AppTheme에서 스타일을 참조하여 적용하려는 위치에 관계없이 xml에서 작동하지 않았습니다. 현재 지원 라이브러리 27.1.1을 사용하고 있습니다.

프로그래밍 방식으로 만 작동했습니다.

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

Question 7

해결책이있는 것 같습니다.

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

Question 8

코드는 여기

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