ネイティブAndroidアプリケーションで「フォントオーサム」のアイコンとシンボルを使用する方法

私のアプリケーションでFont Awesomeを使用しようとしています。を使用してフォントを統合することができましたTypeface.createFromAsset()が、このフォントによって提供されるアイコンも使用したいのですが、これまではできませんでした。

この特定のフォントには、Unicode Private Use Area（PUA）内に、メディアプレーヤーコントロール、ファイルシステムアクセス、矢印などのアイコンが含まれています。

Androidでアイコンや記号を含むフォントを使用したことはありますか？

私のAndroidアプリでは、Font Awesomeがうまく機能しているようです。私は次のことをしました：

1. fontawesome-webfont.ttf私のassestsフォルダにコピーしました
2. このページを使用して、必要なアイコンの文字エンティティを見つけました：http : //fortawesome.github.io/Font-Awesome/cheatsheet/

3. 各アイコンのエントリをstrings.xmlに作成しました。例えば心のために：

   <string name="icon_heart">&#xf004;</string>

4. 私のXMLレイアウトのビューで言及されたエントリを参照しました：

    <Button
        android:id="@+id/like"
        style="?android:attr/buttonStyleSmall"
        ...
        android:text="@string/icon_heart" />

5. フォントをonCreateメソッドにロードし、適切なビューに設定します。

   Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
   ...
   Button button = (Button)findViewById( R.id.like );
   button.setTypeface(font);

IcoMoonを試してください：http ://icomoon.io

• 必要なアイコンを選択してください
• 各アイコンに文字を割り当てる
• フォントをダウンロード

たとえば、再生アイコンを選択し、「P」の文字を割り当て、ファイルicomoon.ttfをアセットフォルダにダウンロードしたとします。これは、アイコンを表示する方法です。

xml：

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

java：

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

私は美しいAndroidアプリの作成について講演しました。これには、アイコンフォントの使用に関する説明と、アイコンをより美しくするためのグラデーションの追加が含まれます。http： //www.sqisland.com/talks/beautiful-android

アイコンフォントの説明は、スライド34から始まります。http： //www.sqisland.com/talks/beautiful-android/#34

遅すぎるかもしれませんが、私は同じ必要性を持っていたので、これを公開しましたhttps://github.com/liltof/font-awsome-for-android これは、Keith Corwinが言ったように、素晴らしいandroidの準備ができたフォントのxmlバージョンです。

それが他の人を助けることを願っています。

上記のように素晴らしい例であり、うまく機能します：

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" );

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

だが！>これは、xmlから設定したボタン内の文字列の場合に機能します。

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

動的に追加する必要がある場合は、これを使用できます。

String iconHeart = "";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

string.xmlに文字列を追加せずにプログラムによるsetTextが必要な場合

こちらの16進コードをご覧ください。

http://fortawesome.github.io/Font-Awesome/cheatsheet/

置換＆＃xf066; 〜0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));

この目的のために設計された小さくて便利なライブラリがあります：

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

Google Playでデモを入手してください。

レイアウトにフォントベースのアイコンを簡単に追加できます：

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

あなたはDrawablexmlからfont-iconを膨らませることができます：

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

Javaコード：

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

リンク：

• プロジェクトページ
• Githubリポジトリ

プログラムでtextプロパティを設定するために、このヘルパークラスをC＃（Xamarin）で作成しました。それは私にとってかなりうまくいきます：

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

Javaに変換するのは簡単だと思います。それが誰かを助けることを願っています！

Font Awesomeに使用するライブラリの1つは次のとおりです。

https://github.com/Bearded-Hen/Android-Bootstrap

具体的には

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

ドキュメントは理解しやすいです。

最初に、必要な依存関係をbuild.gradleに追加します。

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

次に、これをXMLに追加できます。

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

ただし、上記のコード例を使用する場合は、これをルートレイアウトに必ず追加してください。

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

FontViewライブラリを使用すると、通常の/ Unicodeフォント文字をアプリのアイコン/グラフィックとして使用できます。アセットまたはネットワークの場所を介してフォントをロードできます。

このライブラリの利点は次のとおりです。

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

例：

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

レイアウトxmlファイルで直接使用でき、を使用する必要のない別の優れたソリューションがありますsetTypeface。

Joan ZapataのIconifyです。あなたは読むことができ、ここでの新機能をアイコン化v2の。これには、build.gradleファイルに依存関係を追加するだけで使用できる9つの異なるフォントライブラリが含まれています。

レイアウトxmlファイルでは、次のウィジェットから選択できます。

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

最初にアセットフォルダーを作成し、fontawesomeアイコン（.ttf）をコピーします。

アプリ->右クリック->新規->フォルダー->アセットフォルダー

次のステップダウンロード.ttfファイルのダウンロード方法？ ここをクリックして->抽出をダウンロードしてWebフォントを開いたら、ダウンロードボタンをクリックします。最後に、真のテキストスタイル（ttf）貼り付けアセットフォルダを選択します。

AndroidでXMLとJavaファイルを設計する方法は？

app-> res-> values string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

Unicodeの1つのフォントのこの例は、ここをクリックしてください

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

出力：

出力画像

私はパーティーに少し遅れましたが、これを行うためのカスタムビューを作成しました。デフォルトではentypoに設定されていますが、任意のアイコンフォントを使用するように変更できます：github.com/MarsVard/IconViewで確認してください

//ライブラリの編集は古く、サポートされていません...新しいものはこちらhttps://github.com/MarsVard/IonIconView

フォントの素晴らしいアイコンがいくつか必要な場合は、http：//fa2png.ioを使用して通常のピクセル画像を生成することもできます。しかし、新しいアイコン/ボタンを定期的に追加する場合は、.ttfバージョンをより柔軟にすることをお勧めします。

誰かがそれをプログラム的に追加する方法を疑問に思っている場合は、この方法で行う必要があります。

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part

すべての答えは素晴らしいですが、ライブラリを使用したくなかったので、1行のJavaコードを使用する各ソリューションは、私ActivitiesをFragments混乱させました。だから私はTextView次のようにクラスを上書きしました：

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

フォントttfファイルをassetsフォルダーにコピーする必要があります。このチートシートを使用して、各アイコン文字列を見つけます。

お役に立てれば。