Jak używać ikon i symboli z „Font Awesome” w natywnej aplikacji na Androida

153

Próbuję użyć Font Awesome w mojej aplikacji, udało mi się zintegrować czcionkę przy użyciu Typeface.createFromAsset(), ale chcę również użyć ikon dostarczonych przez tę czcionkę, ale jak dotąd nie byłem w stanie tego zrobić.

Ta konkretna czcionka zawiera ikony wewnątrz obszaru prywatnego użytku Unicode (PUA), na przykład kontrolki odtwarzacza multimedialnego, dostęp do systemu plików, strzałki itp.

Czy ktoś używał czcionek zawierających ikony i symbole na Androida, czy to w ogóle możliwe?

Julian Suarez
źródło
2
Zaktualizowałem link
Julian Suarez
23
Nie zgadzam się, że to nie jest tematem dla Stack Overflow. Wydaje mi się, że pasuje do tych wytycznych ( stackoverflow.com/help/on-topic ), ponieważ dotyczy konkretnego problemu programistycznego (jak zastosować konkretny zestaw ikon opartych na czcionkach na określonej platformie mobilnej) i jest praktyczny problem, na który można odpowiedzieć (zobacz moją odpowiedź poniżej, która moim zdaniem to ilustruje).
Keith Corwin
Sprawdź to repozytorium, aby zaimplementować niesamowite czcionki na Androida github.com/bperin/FontAwesomeAndroid
Brian
sprawdź tę bibliotekę: blog.shamanland.com/p/android-fonticon-library.html , jest dostępna w Maven Central. zobacz aplikację demonstracyjną: play.google.com/store/apps/ ...
Oleksii K.

Odpowiedzi:

307

Wygląda na to, że Font Awesome działa dobrze w mojej aplikacji na Androida. Zrobiłem co następuje:

  1. Skopiowano fontawesome-webfont.ttfdo mojego folderu z testami
  2. Znalazłem jednostki postaci dla ikon, które chciałem, używając tej strony: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Utworzono wpis w strings.xml dla każdej ikony. Np. Na serce:

    <string name="icon_heart">&#xf004;</string>
  4. Odwołałem się do tego wpisu w widoku mojego układu xml:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Załadowałem czcionkę w mojej metodzie onCreate i ustaw ją dla odpowiednich widoków:

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
Keith Corwin
źródło
46
Świetny pomysł. Uważaj jednak na problemy z pamięcią podczas ciągłego tworzenia nowego kroju dla każdej ikony. Zamiast tego użyj czegoś takiego, jak Hashtableponowne użycie kroju pisma ikony, jak zasugerowano tutaj: code.google.com/p/android/issues/detail?id=9904#c7
saschoar
1
robię to w ten sposób: stackoverflow.com/questions/2973270/ ...
Informatic0re
4
Stworzyłem w tym celu projekt: bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re
1
Mam pewne problemy z moim kodem: jeśli zadeklaruję ciąg w strings.xmltaki sposób, jak <string name="faicon">&#xf001;</string>wtedy ustawię tekst w moim kodzie, wszystko będzie dobrze. Ale kiedy spróbuję mTextView.setText("&#xf004;");, pokaż tylko surowy tekst. Czy ktoś mógłby pomóc? thks
vtproduction
2
Dodaj dynamiczny ciąg do widoku tekstowego, taki jak ten text.setText (Html.fromHtml ("& # xf000;"));
rana_sadam
29

Wypróbuj IcoMoon: http://icomoon.io

  • Wybierz żądane ikony
  • Przypisz znaki do każdej ikony
  • Pobierz czcionkę

Powiedzmy, że wybrałeś ikonę odtwarzania, przypisałeś jej literę „P” i pobrałeś plik icomoon.ttfdo folderu zasobów. Oto jak pokazujesz ikonę:

xml:

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

Jawa:

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

Wygłosiłem wykład na temat tworzenia pięknych aplikacji na Androida, w tym wyjaśnienia dotyczące używania czcionek ikon oraz dodawania gradientów, aby ikony były jeszcze ładniejsze: http://www.sqisland.com/talks/beautiful-android

Objaśnienie czcionek ikon zaczyna się na slajdzie 34: http://www.sqisland.com/talks/beautiful-android/#34

chiuki
źródło
10

Może za późno, ale miałem taką samą potrzebę, więc opublikowałem to https://github.com/liltof/font-awsome-for-android To jest niesamowita wersja czcionki XML gotowa do użytku na Androida, tak jak powiedział Keith Corwin

Mam nadzieję, że pomoże to innym.

liltof
źródło
1
Witamy w SO. Widziałem, że twój kod nie jest zbyt długi. Dlaczego nie opublikujesz tego w tej odpowiedzi? Linki mogą z czasem ulec awarii.
Andre Silva
Używam tego wspaniałego pliku .xml od tygodni. Ale teraz zdałem sobie sprawę, że pomija fa_times. Czy możesz to zaktualizować? Edycja: och, to jest fa_remove. lub icon_remove w swoim pliku.
mobilGelistirici
Jak dodać tekst, a także ikonę w przycisku za pomocą niesamowitej czcionki? Na przykład dodaj do rysowania lewy lub prawy przycisk.
Siddharth_Vyas
9

Jak wyżej jest świetnym przykładem i działa świetnie:

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

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

ALE! > to zadziała, jeśli ciąg wewnątrz przycisku ustawisz z xml:

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

Jeśli chcesz dodać go dynamicznie, możesz użyć tego:

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");
user1540907
źródło
najlepszy sposób na świecie! Dzięki daję + głosowanie _ po prostu przycisk uwaga jest TextView i zastąpić String.valueOf z get ciąg
Erfan
Wreszcie rozwiązanie do używania niesamowitych czcionek. Wielkie dzięki!
Clamorious
4

Jeśli chcesz programistyczny setText bez dodawania ciągu do string.xml

zobacz jego kod szesnastkowy tutaj:

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

zastąp & # xf066; do 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));
Haryanto
źródło
4

Do tego celu służy mała i przydatna biblioteka :

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

Pobierz wersję demonstracyjną w Google Play .

wprowadź opis obrazu tutaj

Możesz łatwo dodać ikonę opartą na czcionkach do swojego układu:

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

Możesz nadmuchać font-icon jak Drawablez xml:

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

Kod Java:

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

Spinki do mankietów:

Oleksii K.
źródło
naprawdę dobra biblioteka, dziękuję. nadmuchiwane definicje xml są jednak trochę uciążliwe, wolę bezpośrednio używać FontIconView
hotzen
Przetestowałem to na Lenovo z Androidem 4.2.2 i ikony się nie pojawiają, co może być?
Ollie Strevel
Wypróbuj najnowszą wersję0.1.9
Oleksii K.
2

Zrobiłem tę klasę pomocniczą w C # (Xamarin), aby programowo ustawić właściwość text. Jak dla mnie działa całkiem nieźle:

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
}

Myślę, że konwersja na Javę powinna być łatwa. Mam nadzieję, że to komuś pomoże!

Andres Sepulveda
źródło
2

Jedna z bibliotek, których używam dla Font Awesome, to:

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

Konkretnie,

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

Dokumentacja jest łatwa do zrozumienia.

Najpierw dodaj potrzebne zależności w pliku build.gradle:

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

Po drugie, możesz dodać to w swoim 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"
/>

ale upewnij się, że dodałeś to w swoim głównym układzie, jeśli chcesz użyć powyższego przykładu kodu:

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"
Abdul Rahman A Samad
źródło
Postępowałem zgodnie z tym, ale otrzymałem błąd: Błąd: (54) Nie znaleziono identyfikatora zasobu dla atrybutu „fa_icon” w pakiecie „xxx.yyy”
Hajjat
@Hajjat, aby z tego skorzystać, musisz użyć wersji 1.2.3. Właśnie zaktualizowałem kod, aby to odzwierciedlić. Spróbuj.
Abdul Rahman A Samad
1

Biblioteka FontView umożliwia używanie znaków czcionek normalnych / Unicode jako ikon / grafiki w aplikacji. Może załadować czcionkę za pośrednictwem zasobów lub lokalizacji sieciowej.

Zaletą tej biblioteki jest to, że:

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

Przykład:

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);
Shellum
źródło
Czy buforuje obiekt Typeface w pamięci? Istnieje znany potencjał wycieku pamięci podczas obsługi czcionek w systemie Android.
TheRealChx101
1

Jest jeszcze jedno fajne rozwiązanie, którego możesz użyć bezpośrednio w swoich plikach układu xml i nie musisz go używać setTypeface.

To Iconify Joana Zapaty . Tutaj możesz przeczytać , co nowego w Iconify v2 . Zawiera 9 różnych bibliotek czcionek, których możesz po prostu użyć, dodając zależności do pliku build.gradle pliku .

W plikach xml układu można wybierać między tymi widżetami:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton
gus27
źródło
1

Najpierw utwórz folder zasobów i skopiuj ikonę fontawesome (.ttf). Jak utworzyć folder zasobów?

aplikacja -> prawy przycisk myszy -> nowy -> folder -> folder zasobów

następny krok pobierz jak pobrać plik .ttf? kliknij tutaj -> i kliknij przycisk pobierania po pobraniu, wypakuj i otwórz czcionki internetowe. na koniec wybierz folder zasobów wklejanych w stylu prawdziwego tekstu (ttf).

jak zaprojektować plik xml i java w systemie Android?

aplikacja -> res -> wartości string.xml

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

ten przykład jednej czcionki więcej Unicode kliknij tutaj

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

Wynik:

Obraz wyjściowy

Manoj Kumar T
źródło
0

Trochę spóźniłem się na imprezę, ale napisałem niestandardowy widok, w którym możesz to zrobić, domyślnie jest ustawiony na entypo, ale możesz go zmodyfikować, aby użyć dowolnego iconfont: sprawdź tutaj: github.com/MarsVard/IconView

// edycja biblioteki jest stara i nie jest już obsługiwana ... nowa tutaj https://github.com/MarsVard/IonIconView

Mars
źródło
Twoja biblioteka nie buforuje kroju pisma, a zamiast tego tworzy go za każdym razem, gdy widok jest renderowany.
Fernando Camargo
1
@FernandoCamargo ma rację, ta biblioteka jest stara i powinna zostać zaktualizowana dzięki lepszemu buforowaniu ... oto nowa biblioteka z lepszą wydajnością github.com/MarsVard/IonIconView
Mars
0

Jeśli potrzebujesz tylko kilku niesamowitych ikon czcionek, możesz również użyć http://fa2png.io do wygenerowania normalnych obrazów pikselowych. Ale jeśli regularnie dodajesz nowe ikony / przyciski, polecam wersję .ttf jako bardziej elastyczną.

j7nn7k
źródło
0

Jeśli ktoś się zastanawia, jak dodać to programowo, musisz to zrobić w ten sposób.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part
Wieża Jimmy
źródło
0

Ponieważ wszystkie odpowiedzi są świetne, ale nie chciałem korzystać z biblioteki, a każde rozwiązanie z tylko jednym wierszem kodu java sprawiło, że mój Activitiesi Fragmentsbardzo bałaganił. Więc przepisałem TextViewklasę w następujący sposób:

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

co powinieneś zrobić, to skopiować ttfplik czcionki do assetsfolderu i skorzystać z tego ściągawki do znalezienia każdego ciągu ikon.

mam nadzieję że to pomoże.

Pouya Danesh
źródło