web-dev-qa-db-ja.com

CollapsingToolbarLayoutの書体とサイズを変更するには？

CollapsingToolbarLayoutフォントサイズとその書体を変更したい。どうすればそれを達成できますか？

enter image description here

androidfontstoolbarfont-sizeandroid-collapsingtoolbarlayout
79
AlexMomotov

私には解決策があるように見えます：

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
AlexMomotov

更新

コードに飛び込む前に、まずtextSizeのCollapsingToolbarLayoutを決定しましょう。 Googleはmaterial.ioというWebサイトを公開しました。このWebサイトでは、 タイポグラフィ の処理方法に関する最良の方法についても説明しています。

「見出し」カテゴリに関する記事では、spで使用する推奨フォントサイズについても説明しています。

enter image description here

記事では推奨されるCollapsingToolbarLayout'sexpandedサイズについては言及していませんが、ライブラリcom.Android.support:designはこの場合TextAppearanceを提供します。ソースを少し掘り下げてみると、サイズは34spであることがわかりました（記事には記載されていません）。

では、折りたたみサイズはどうですか？幸いなことに、この記事には何かが記載されており、20spです。

enter image description here

そして、これまでのところcollpasedモードに適合するTextAppearanceはTextAppearance.AppCompat.Titleですが、 expandedモード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

// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

コトリン

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

Typerライブラリが更新されたため、これは2019年の更新です！私は図書館の著者でもあります。

125
Enzokie

CollapsingToolbarLayoutで新しいパブリックメソッドを使用して、折りたたみタイトルと展開タイトルの書体を次のように設定できます。

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

これはデザインサポートライブラリ23.1.0に追加されたようで、非常に歓迎される追加です。

80
Thorinside

次のようなことができます：

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

対応するtextviewスタイルは次のとおりです：28sp＃000 bold

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

参照用に here も参照してください。

53
luochenhuan
    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が正しく機能しない

10
hedgehog

コードはこちら

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

ここにすべての答えを追加するには、AppThemeでスタイルを参照して適用しようとした場所に関係なく、xmlで機能しませんでした。現在、サポートライブラリ27.1.1を使用しています

プログラムでのみ機能しました。

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

フォントサイズまたは親を変更します。

<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>
4
Priya Rajan

Android 8.0（APIレベル26）は、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)
0
Hitesh Sahu