Android-カスタムフォントの使用


266

カスタムフォントをに適用しましたTextViewが、書体が変更されないようです。

これが私のコードです:

    Typeface myTypeface = Typeface.createFromAsset(getAssets(), "fonts/myFont.ttf");
    TextView myTextView = (TextView)findViewById(R.id.myTextView);
    myTextView.setTypeface(myTypeface);

誰でもこの問題から私を連れ出してくれますか?


1
構文にエラーがあります。エラーがあるはずですmyTextView.setTypeface(myTypeface);
yuttadhammo

このスレッドは、次のようになりますstackoverflow.com/a/14558090/693752
Snicolas

実際の例については、javatechig.com
2013/03/19 /


ここでは、アプリケーション全体のフォントを変更するefficent方法を持っている:stackoverflow.com/questions/18847531/...
サンディエゴパロマー

回答:


230

Mobiletuts +には、Androidのテキストフォーマットに関する非常に優れたチュートリアルがあります。クイックヒント:Androidフォントのカスタマイズ

編集:今自分でテストしました。これが解決策です。fontsというサブフォルダーを使用できますが、フォルダーではなくフォルダーに配置する必要がassetsありresます。そう

アセット/フォント

また、フォントの末尾がフォントファイル自体の末尾がすべて小文字であることを確認してください。言い換えれば、そうでmyFont.TTFあってはなりませんが、myfont.ttf この方法は小文字でなければなりません


ソリューションで私の応答を編集しました。
Octavian A. Damiean

デモプロジェクトを送っていただけませんか?私はassets / fonts / xyz.ttfとassets / xyz.ttfフォルダの両方で試しましたが、そのフォントは使用できません。これは、デフォルトのフォント...表示
ガラガラヘビ

2
確かにここに圧縮されたプロジェクトへのリンクがあります。dl.dropbox.com/u/8288893/customFont.zip
Octavian A. Damiean

5
そのチュートリアルに従っている場合は、必ずパスTypeface.createFromAsset(getAssets()、 "fonts / yourfont.ttf");を使用してください。fontsサブディレクトリに置いた場合
Jameo

ファイル名に「assets /」を含めないでください(createFromAsset関数がassetsディレクトリ内を直接指すため)
topher

55

このスレッドで説明されているほとんどの解決策を試した後、私は誤ってCalligraphy(https://github.com/chrisjenx/Calligraphy)を見つけました。ここで提案されているアプローチと比較した彼のlibの利点は次のとおりです。

  1. 独自のオーバーライドされたTextViewコンポーネントを導入する必要はありません。組み込みのTextViewを使用します
  2. Gradleを使用してライブラリを簡単に含めることができます
  3. ライブラリはフォントの選択を制限しません。好みのものをアセットディレクトリに追加するだけです
  4. カスタムテキストビューを取得するだけでなく、他のすべてのテキストベースのAndroidコンポーネントもカスタムフォントを使用して表示されます。

1
何がある大きさというのは、アプリのサイズに影響を与えるつもりので、そのライブラリのは、重要な問題です。
eRaisedToX 2017

32

私はすでに良い答えがあることを知っていますが、これは完全に機能する実装です。

これがカスタムテキストビューです。

package com.mycompany.myapp.widget;

/**
 * Text view with a custom font.
 * <p/>
 * In the XML, use something like {@code customAttrs:customFont="roboto-thin"}. The list of fonts
 * that are currently supported are defined in the enum {@link CustomFont}. Remember to also add
 * {@code xmlns:customAttrs="http://schemas.android.com/apk/res-auto"} in the header.
 */
public class CustomFontTextView extends TextView {

    private static final String sScheme =
            "http://schemas.android.com/apk/res-auto";
    private static final String sAttribute = "customFont";

    static enum CustomFont {
        ROBOTO_THIN("fonts/Roboto-Thin.ttf"),
        ROBOTO_LIGHT("fonts/Roboto-Light.ttf");

        private final String fileName;

        CustomFont(String fileName) {
            this.fileName = fileName;
        }

        static CustomFont fromString(String fontName) {
            return CustomFont.valueOf(fontName.toUpperCase(Locale.US));
        }

        public Typeface asTypeface(Context context) {
            return Typeface.createFromAsset(context.getAssets(), fileName);
        }
    }

    public CustomFontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

        if (isInEditMode()) {
            return;
        } else {
            final String fontName = attrs.getAttributeValue(sScheme, sAttribute);

            if (fontName == null) {
                throw new IllegalArgumentException("You must provide \"" + sAttribute + "\" for your text view");
            } else {
                final Typeface customTypeface = CustomFont.fromString(fontName).asTypeface(context);
                setTypeface(customTypeface);
            }
        }
    }
}

これがカスタム属性です。これはあなたのres/attrs.xmlファイルに行くはずです:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomFontTextView">
        <attr name="customFont" format="string"/>
    </declare-styleable>
</resources>

そして、これがあなたの使い方です。相対レイアウトを使用してそれをラップしてcustomAttr宣言を表示しますが、それは明らかに、すでに持っているレイアウトであれば何でもかまいません。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:customAttrs="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mycompany.myapp.widget.CustomFontTextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="foobar"
         customAttrs:customFont="roboto_thin" />

</RelativeLayout>

customAttrs私のプロジェクトでは何を参照していますか?
スカイネット

@Skynetは、ルートビューで定義されている名前空間を参照しますxmlns:customAttrs="http://schemas.android.com/apk/res-auto"。これにより、カスタムビューに設定された属性が自動的に取得されます。この場合、attrs.xmlで定義されたcustomFontという属性があります。より簡単に理解する方法xmlns:android="http://schemas.android.com/apk/res/android"は、android属性の名前空間を定義するものを調べることです。したがって、それをa次に変更した場合は、代わりにandroid:textになりますa:text
CodyEngel

14

私は以前これをうまく使いました。実装間の唯一の違いは、アセットでサブフォルダーを使用していなかったことです。しかし、それが何かを変えるかどうかはわかりません。


13

フォントを適切な場所に配置し、フォントファイル自体にエラーがなければ、コードはRATTLESNAKEのように機能するはずです。

ただし、次のようにレイアウトxmlでフォントを定義できれば、はるかに簡単になります。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- This text view is styled with the app theme -->
    <com.innovattic.font.FontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This uses my font in bold italic style" />

    <!-- This text view is styled here and overrides the app theme -->
    <com.innovattic.font.FontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:flFont="anotherFont"
        android:textStyle="normal"
        android:text="This uses another font in normal style" />

    <!-- This text view is styled with a style and overrides the app theme -->
    <com.innovattic.font.FontTextView
        style="@style/StylishFont"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This also uses another font in normal style" />

</LinearLayout>

付属res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <!-- Application theme -->
    <!-- Use a different parent if you don't want Holo Light -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:textViewStyle">@style/MyTextViewStyle</item>
    </style>

    <!-- Style to use for ALL text views (including FontTextView) -->
    <!-- Use a different parent if you don't want Holo Light -->
    <style name="MyTextViewStyle" parent="@android:style/Widget.Holo.Light.TextView">
        <item name="android:textAppearance">@style/MyTextAppearance</item>
    </style>

    <!-- Text appearance to use for ALL text views (including FontTextView) -->
    <!-- Use a different parent if you don't want Holo Light -->
    <style name="MyTextAppearance" parent="@android:style/TextAppearance.Holo">
        <!-- Alternatively, reference this font with the name "aspergit" -->
        <!-- Note that only our own TextView's will use the font attribute -->
        <item name="flFont">someFont</item>
        <item name="android:textStyle">bold|italic</item>
    </style>

    <!-- Alternative style, maybe for some other widget -->
    <style name="StylishFont">
        <item name="flFont">anotherFont</item>
        <item name="android:textStyle">normal</item>
    </style>

</resources>

私はこの目的のために特別にいくつかのツールを作成しました。GitHub からこのプロジェクトを参照するか、全体を説明するこのブログ投稿をご覧ください。


13

それを行うための最良の方法Android Oプレビューリリースからは次のようになります。

これは、android studio-2.4以上を使用している場合にのみ機能します。

  1. resフォルダーを右クリックし、[ 新規]> [Androidリソースディレクトリ]に移動します。[新しい
    リソースディレクトリ]ウィンドウが表示されます。
  2. [リソースの種類]ボックスの一覧で[ フォント ]を選択し、[OK]をクリックします。
  3. フォントフォルダにフォントファイルを追加し、以下の生成【選択フォルダ構造R.font.dancing_scriptR.font.la_laR.font.ba_ba
  4. フォントファイルをダブルクリックして、エディターでファイルのフォントをプレビューします。

次に、フォントファミリを作成する必要があります。

  1. フォントフォルダを右クリックし、[ 新規]> [フォントリソースファイル ]に移動します。[新しいリソースファイル]ウィンドウが表示されます。
  2. ファイル名を入力し、[OK]をクリックします。新しいフォントリソースXMLがエディターで開きます。
  3. 各フォントファイル、スタイル、およびウェイト属性をfontタグ要素で囲みます。次のXMLは、フォント関連の属性をフォントリソースXMLに追加する方法を示しています。

TextViewへのフォントの追加:

   <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/hey_fontfamily"/>

ドキュメントから

フォントの操作

すべての手順が正しいです。


4
ony api> 26((
maXp


これにはかなり大きなステップ#3がありません。どうすればよいですか。
コードウィジェット

12

Androidのカスタムフォントの場合、アセットフォルダー内に「fonts」という名前のフォルダーを作成し、そこに目的のfonts.ttfまたは.otfファイルを配置します。

UIBaseFragmentを拡張する場合:

Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/Arial.ttf");
        tv.setTypeface(font);

それ以外の場合は、アクティビティを拡張します:

Typeface font = Typeface.createFromAsset(getContext().getAssets(), "fonts/Arial.ttf");
        tv.setTypeface(font);

7

https://github.com/neopixl/PixlUIで PixlUIを使用できます

.jarをインポートしてXMLで使用する

 <com.neopixl.pixlui.components.textview.TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"
    pixlui:typeface="GearedSlab.ttf" />

4

SOで提示されたすべてのソリューションに満足できなかったので、私は思いつきました。これはタグの小さなトリックに基づいています(つまり、コード内でタグを使用することはできません)。フォントパスをそこに配置しました。したがって、ビューを定義するときは、次のいずれかを行うことができます。

<TextView
        android:id="@+id/textViewHello1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World 1"
        android:tag="fonts/Oswald-Regular.ttf"/>

またはこれ:

<TextView
        android:id="@+id/textViewHello2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World 2"
        style="@style/OswaldTextAppearance"/>

<style name="OswaldTextAppearance">
        <item name="android:tag">fonts/Oswald-Regular.ttf</item>
        <item name="android:textColor">#000000</item>
</style>

これで、ビューに次のように明示的にアクセス/設定できます:

TextView textView = TextViewHelper.setupTextView(this, R.id.textViewHello1).setText("blah");

または単にすべてを設定します:

TextViewHelper.setupTextViews(this, (ViewGroup) findViewById(R.id.parentLayout)); // parentLayout is the root view group (relative layout in my case)

そして、あなたが尋ねる魔法のクラスは何ですか?アクティビティとフラグメントの両方のヘルパーメソッドを使用して、主に別のSO投稿から接着されます。

import android.app.Activity;
import android.content.Context;
import android.graphics.Typeface;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.HashMap;
import java.util.Map;

public class TextViewHelper {
    private static final Map<String, Typeface> mFontCache = new HashMap<>();

    private static Typeface getTypeface(Context context, String fontPath) {
        Typeface typeface;
        if (mFontCache.containsKey(fontPath)) {
            typeface = mFontCache.get(fontPath);
        } else {
            typeface = Typeface.createFromAsset(context.getAssets(), fontPath);
            mFontCache.put(fontPath, typeface);
        }
        return typeface;
    }

    public static void setupTextViews(Context context, ViewGroup parent) {
        for (int i = parent.getChildCount() - 1; i >= 0; i--) {
            final View child = parent.getChildAt(i);
            if (child instanceof ViewGroup) {
                setupTextViews(context, (ViewGroup) child);
            } else {
                if (child != null) {
                    TextViewHelper.setupTextView(context, child);
                }
            }
        }
    }

    public static void setupTextView(Context context, View view) {
        if (view instanceof TextView) {
            if (view.getTag() != null) // also inherited from TextView's style
            {
                TextView textView = (TextView) view;
                String fontPath = (String) textView.getTag();
                Typeface typeface = getTypeface(context, fontPath);
                if (typeface != null) {
                    textView.setTypeface(typeface);
                }
            }
        }
    }

    public static TextView setupTextView(View rootView, int id) {
        TextView textView = (TextView) rootView.findViewById(id);
        setupTextView(rootView.getContext().getApplicationContext(), textView);
        return textView;
    }

    public static TextView setupTextView(Activity activity, int id) {
        TextView textView = (TextView) activity.findViewById(id);
        setupTextView(activity.getApplicationContext(), textView);
        return textView;
    }
}

4

残念ながら、これに対する適切な解決策はありません。

私はカスタムTextViewの使用に関する多くの記事を見てきましたが、フォントを実装できるのはテキストビューだけではなく、開発者がアクセスできない他のビューに隠れているテキストビューがあることを彼らが忘れていることです。Spannableを使い始めるつもりもありません。

次のような外部フォントユーティリティを使用できます。

書道フォントツール

しかし、それの作成、さらにはこのユーティリティのアプリケーションのすべてのビューの上に、このループは、あなたは、Googleが自分のビルドツールを更新するとき、それは非推奨のプロパティをターゲットにする必要があるため、これは時折クラッシュするという問題を持っている(ViewPagerは通常のフォントをレンダリング)いくつかのビューをミス。また、JavaのReflectionを使用しているため、処理が少し遅くなります。

これを修正するのは本当にGoogle次第です。Androidでより良いフォントのサポートが必要です。iOSのソリューションを見ると、文字通り100種類のフォントが組み込まれていて、そこから選択できます。カスタムフォントが必要ですか?TFFを差し込むだけで使用できます。

現時点では、Googleが提供するサービスに限定されていましたが、これは非常に制限されていますが、幸いモバイル向けに最適化されています。


2

スーパーへの呼び出しとsetContentView()への呼び出しの、上のコードを必ずonCreate()に貼り付けてください。この細かいディテールのため、しばらくの間、電話を切ることができませんでした。


2

アンドロイド8.0アプリケーションでカスタムフォントを使用して容易になりましたdownloadable fontsres/font/ folderプロジェクトフォルダーのに直接フォントを追加できます。これにより、Android Studioでフォントが自動的に使用可能になります。

名前がfontでタイプがFontに設定されたresの下のフォルダー

次に、fontFamily属性をフォントのリストに設定するか、[その他]をクリックして、選択したフォントを選択します。これにより、TextViewに行追加さtools:fontFamily="@font/your_font_file"れます。

これにより、自動的にいくつかのファイルが生成されます。

1.値フォルダに作成されますfonts_certs.xml

2.マニフェストでは、次の行を追加します。

  <meta-data
            android:name="preloaded_fonts"
            android:resource="@array/preloaded_fonts" /> 

3。 preloaded_fonts.xml

<resources>
    <array name="preloaded_fonts" translatable="false">
        <item>@font/open_sans_regular</item>
        <item>@font/open_sans_semibold</item>
    </array>
</resources>

2

簡単でシンプルなEasyFontsサードパーティライブラリを使用して、さまざまなカスタムフォントをに設定できますTextView。このライブラリを使用することで、フォントをダウンロードして、assets / fontsフォルダーに追加することを心配する必要はありません。Typefaceオブジェクトの作成についても。

の代わりに

Typeface myTypeface = Typeface.createFromAsset(getAssets(), "fonts/myFont.ttf");
TextView myTextView = (TextView)findViewById(R.id.myTextView);
myTextView.setTypeface(myTypeface);

単に:

TextView myTextView = (TextView)findViewById(R.id.myTextView);
myTextView.setTypeface(EasyFonts.robotoThin(this));

このライブラリは、次のフォントも提供します。

  • Roboto
  • ドロイドセリフ
  • ドロイドロボット
  • 自由
  • 楽しいライザー
  • Android Nation
  • グリーンアボカド
  • 認識

1

同じ問題があり、TTFが表示されませんでした。フォントファイルを変更しましたが、同じコードで機能します。


1

ネットワークからフォントをロードしたり、簡単にスタイルを設定したりする場合は、次を使用できます。

https://github.com/shellum/fontView

例:

<!--Layout-->
<com.finalhack.fontview.FontView
        android:id="@+id/someFontIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

//Java:
fontView.setupFont("http://blah.com/myfont.ttf", true, character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

1

7年後、ライブラリ26 ++ textViewを使用して、アプリ全体または必要なものを簡単に変更できandroid.supportます。

例えば:

フォントパッケージapp / src / res / fontを作成し、そこにフォントを移動します。

ここに画像の説明を入力してください

そしてあなたのアプリのテーマにそれをfontFamilyとして追加するだけです:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   . . . ...
    <item name="android:fontFamily">@font/demo</item>
</style>

textViewのみで使用する例:

<style name="fontTextView" parent="@android:style/Widget.TextView">
    <item name="android:fontFamily">monospace</item>
</style>

そしてあなたのメインテーマに追加してください:

<item name="android:textViewStyle">@style/fontTextView</item>

現在、8.1から4.1まで動作しています。APIJelly Beanそしてそれは広範囲です。


1

回答の更新: Android 8.0(APIレベル26)には、XMLのフォントという新機能が導入されています。Android 4.1(APIレベル16)以降を実行しているデバイスでFonts in XML機能を使用するだけで、サポートライブラリ26を使用できます。

このリンクを参照してください


古い答え

フォントをカスタマイズする方法は2つあります。

!!! assets / fonts / iran_sans.ttfにある私のカスタムフォント



方法1: 反射Typeface.class ||| 最良の方法

クラスのFontsOverride.setDefaultFont()を呼び出してApplicationを拡張します。このコードにより、Toastsフォントを含め、すべてのソフトウェアフォントが変更されます。

AppController.java

public class AppController extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        //Initial Font
        FontsOverride.setDefaultFont(getApplicationContext(), "MONOSPACE", "fonts/iran_sans.ttf");

    }
}

FontsOverride.java

public class FontsOverride {

    public static void setDefaultFont(Context context, String staticTypefaceFieldName, String fontAssetName) {
        final Typeface regular = Typeface.createFromAsset(context.getAssets(), fontAssetName);
        replaceFont(staticTypefaceFieldName, regular);
    }

    private static void replaceFont(String staticTypefaceFieldName, final Typeface newTypeface) {
        try {
            final Field staticField = Typeface.class.getDeclaredField(staticTypefaceFieldName);
            staticField.setAccessible(true);
            staticField.set(null, newTypeface);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}



方法2: setTypefaceを使用する

特別なビューの場合は、setTypeface()を呼び出してフォントを変更します。

CTextView.java

public class CTextView extends TextView {

    public CTextView(Context context) {
        super(context);
        init(context,null);
    }

    public CTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public CTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context,attrs);
    }

    public void init(Context context, @Nullable AttributeSet attrs) {

        if (isInEditMode())
            return;

        // use setTypeface for change font this view
        setTypeface(FontUtils.getTypeface("fonts/iran_sans.ttf"));

    }
}

FontUtils.java

public class FontUtils {

    private static Hashtable<String, Typeface> fontCache = new Hashtable<>();

    public static Typeface getTypeface(String fontName) {
        Typeface tf = fontCache.get(fontName);
        if (tf == null) {
            try {
                tf = Typeface.createFromAsset(AppController.getInstance().getApplicationContext().getAssets(), fontName);
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
            fontCache.put(fontName, tf);
        }
        return tf;
    }

}



0
  • プロジェクトを開き、選択プロジェクトの左上に
  • アプリ -> src- > メイン
  • 右クリックしてメインに移動し、アセットとしてディレクトリ名を作成します
  • 右クリックして割り当て、フォントの新しいディレクトリ名を作成します
  • あなたはフリーフォントのようなフリーフォントを見つける必要があります
  • Textviewに渡して、Activityクラスで呼び出します
  • fontsフォルダー内にフォントをコピーする
  • TextView txt = (TextView) findViewById(R.id.txt_act_spalsh_welcome); Typeface font = Typeface.createFromAsset(getAssets(), "fonts/Aramis Italic.ttf"); txt.setTypeface(font);

フォントの名前は正しく、楽しいものでなければなりません


0

はい、Dipaliが言ったように、ダウンロード可能なフォントはとても簡単です。

これがあなたのやり方です...

  1. を配置しTextViewます。
  2. プロパティペインで、fontFamilyドロップダウンを選択します。そこにない場合は、キャレットを探します(>をクリックして展開しますtextAppearance)。
  3. 展開font-familyのドロップダウン。
  4. 小さなリストで、表示されるまで下にスクロールします more fonts
  5. 検索できるダイアログボックスが開きます Google Fonts
  6. 上部の検索バーを使用して、好きなフォントを検索します
  7. フォントを選択します。
  8. 好みのフォントのスタイルを選択します(太字、通常、イタリックなど)
  9. 右側のペインで、ラジオボタンを選択します Add font to project
  10. OKをクリックします。これで、TextViewに好きなフォントができました!

ボーナス:選択したフォントを使用して、アプリケーション内のすべてのテキストにスタイルを設定する場合は<item name="android:fontfamily">@font/fontnamehere</item>styles.xml


あなたは私の答えに感謝するべきでした!:)
Dipali s。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.