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"></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 Button i TextView. Zobacz pierwsze na efekt:
Nieciekawie 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.