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

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?

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

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

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.

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 = "";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

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

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 .

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:

• Strona projektu
• Repozytorium Github

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!

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"

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

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

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

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

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

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

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.