Ikony FontAwesome w Androidzie

Font Awesome to pakiet z ikonami specjalnie przystosowanymi do użytku na stronach www. Ale też można je zastosować w aplikacjach androidowych. Myślę, że warto z tego pakietu korzystać ponieważ pozwala nam na oszczędzanie czasu. Kolejnym argumentem za jest to, że nie musimy się martwić o wielkość ekranu. Ikony same się skalują. Jeżeli używamy ikon typu .png to musimy tworzyć ikony dla każdego rodzaju rozdzielczości (hdpi, xhdpi itd,). Zaoszczędzamy też sporo miejsca ponieważ ładujemy tylko jeden plik .ttf. Użytkownicy są przyzwyczajeni do stylu FontAwesome, ponieważ jest szeroko stosowany w internecie, do tego jest bardzo bogatym pakietem oraz darmowym. Zobaczmy, w jaki prosty sposób można zastosować ikony FontAwesome w Androidzie.

Zaimportowanie ikon

Pobierz ikony z tej strony następnie skopiuj plik fontawesome-webfont.ttf do folderu assets/fonts w Android Studio.

Tworzymy wygląd naszej aplikacji

Plik activity_main.xml może wyglądać następująco:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.myenv.fontawesome.MainActivity">
    <Button
        android:id="@+id/mButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fa_icon_android" />
    <TextView
        android:id="@+id/mButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/mButton"
        android:layout_marginTop="26dp"
        android:layout_marginLeft="26dp"
        android:text="@string/fa_icon_android"
        android:textSize="20dp"
        android:clickable="true"
        />
</RelativeLayout>

Wybierz ikonki które chcesz dodać

Ikonki dodajemy przez atrybut:

android:text="@string/fa_icon_android"

Teraz w pliku ze stringami dodajemy:

<string name="fa_icon_android">&#xf17b;</string>

Teraz bardzo ważna rzecz. Wejdź tutaj. znajdź interesującą Cię ikonkę i wejdź w szczegóły. Dla przykładu: ikonkaandroid — tamm zobaczysz kod Unicode, w naszym przypadku to: “f17b;” przed nim musisz też dodać “&#x” aby zadziałał cały kod.

Kod MainActivity

W naszej klasie MainActivity musimy dodać:

mButton = (Button) findViewById(R.id.mButton);
mButton.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/fontawesome-webfont.ttf"));
mButton2 = (TextView) findViewById(R.id.mButton2);
mButton2.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/fontawesome-webfont.ttf"));
mButton2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(), "Click Android Icon", Toast.LENGTH_LONG).show();
    }
});

Pewnie wcześniej sie zastanawiałeś czemu dodałem kontrolki ButtonTextView. Zobacz pierwsze na efekt:
Ikony fontawesome w androidzieNieciekawie wygląda ten Button. Dlatego użyłem tutaj TextView dzięki któremu przycisk wygląda lepiej, a też pozwala na wywoływanie jakiejś akcji, wyraźnie to widać w kodzie. W sumie moglibyśmy tutaj zakończyć, ale co jeśli mamy dużo ikonek i chcielibyśmy sobie ułatwić sprawę. O co dokładnie chodz? czytaj dalej.

Wiele ikon

Załóżmy, że mamy kilkanaście ikonek i w klasie aktywności musimy każdą ikonę dodać osobno w ten sposób:

mButton = (TextView) findViewById(R.id.mButton);
mButton.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/fontawesome-webfont.ttf"));

i tak x10, nie jest to efektywne. Ikony są często zawarte w jednym ViewGroup, takim jak a RelativeLayout lub LinearLayout. Możemy napisać metodę, która wspina drzewo danego XML nadrzędnego i rekurencyjnie zastępuje typ czcionki każdego TextView znalezionego. Plik MainActivity.java może wyglądać następująco:

public class MainActivity extends AppCompatActivity {
    Button mButton;
    TextView mButton2;
    String FONTAWESOME = "fonts/fontawesome-webfont.ttf";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //...
        Typeface iconFont = Typeface.createFromAsset(this.getAssets(), FONTAWESOME);
        markAsIconContainer(findViewById(R.id.icons_container), iconFont);
    }
    private void markAsIconContainer(View v, Typeface typeface) {
        if (v instanceof ViewGroup) {
            ViewGroup vg = (ViewGroup) v;
            for (int i = 0; i < vg.getChildCount(); i++) {
                View child = vg.getChildAt(i);
                markAsIconContainer(child, typeface);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }
}

Teraz plik z wyglądem może wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.myenv.fontawesome.MainActivity">
   <!--...-->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/icons_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/mButton2"
        android:layout_marginTop="20dp"
        tools:context=".MainActivity">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:textSize="30dp"
            android:text="@string/fa_icon_battery" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:textSize="30dp"
            android:text="@string/fa_icon_mobile" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:textSize="30dp"
            android:text="@string/fa_icon_settings" />
    </LinearLayout>
</RelativeLayout>

Sporo zaoszczędziliśmy miejsca z pisaniem kodu 🙂 Oczywiście też możemy kolorować ikonki: Przyznacie pewnie rację, że bardzo ciekawy sposób na prezentacje ikonek, Oczywiście możemy tak dodawać inne pliki .ttf. Na pewno te ikonki nie są zgodne z Meterial Design. Cały projekt można znaleźć na github.

Co dalej?

  • Zapisz się na newsletter aby otrzymywać jeszcze więcej materiałów
  • Polub stronę MYENV na Facebooku oraz śledź mnie na Twitterze
  • Zachęcam do komentowania i pisania propozycji tematów, o których chcesz przeczytać
  • Poleć ten wpis za pomocą poniższych przycisków. Będę Ci za to bardzo wdzięczny 🙂
  • Życzę Ci miłego dnia i miłego kodowania 🙂
Menu