Jak dodać ikonę do przycisku używając czcionki FontAwesome?

Użycie czcionki zamiast ikony obrazu (w formacie jpg czy png) w komponentach layoutu niesie ze sobą dwie zasadnicze korzyści. Pierwszą jest fakt, że ikonę taką możemy formatować tak jak zwykły tekst, czyli pogrubiać, pochylać, zmieniać jej rozmiar, a także dowolnie zmieniać jej kolor.

Drugą zaletą użycia graficznej czcionki nad użyciem obrazu jest to, że nie musimy obawiać się o działanie aplikacji na urządzeniach o różnych rozdzielczościach ekranu, a co za tym idzie nie musimy dodawać tych samych plików w różnych rozdzielczościach do naszego projektu. Dzieje się tak ponieważ ikony w czcionkach reprezentują grafikę wektorową, a co za tym idzie mogą być dowolnie skalowane bez efektów straty jakości, rozmazania i pikselozy.

Aby dodać ikony do przycisków, lub jak w moim przypadku do TextView działających jak przyciski potrzebujemy wykonać kilka kroków:

  1. Pobrać ze strony fontawesome.io plik zawierający czcionkę, wypakować plik z rozszerzeniem *.ttf do folderu Assets w eksploratorze plików naszego projektu, następnie w Solution Explorerze wybieramy PPM na Assets -> Add… -> Existing Item… i wskazujemy na plik font-awesome.ttf
  2. Stworzyć nową klasę FontAwesomeManager. Będzie ona posiadać tylko jedną, statyczną metodę zwracającą obiekt klasy Typeface z pakietu Android.Graphics:
    public static Android.Graphics.Typeface GetTypeFace(Context context)
    {
    return Android.Graphics.Typeface.CreateFromAsset(context.ApplicationContext.Assets, "font-awesome.ttf");
    }
    
  3. W kolejnym kroku dodać do pliku Strings.xml (jeśli go nie ma, to należy go utworzyć) w folderze values skrótów odpowiadających ikonom w czcionce z tej ściągi: http://fontawesome.io/cheatsheet/
    Robimy to na wzór:
  4. Następnie stworzyć plik wyglądu axml i umieścić w nim 3x LinearLayout, w każdym z nich po dwa TextView. W efekcie plik powinien mieć podobną postać:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:padding="15dp"
    android:id="@+id/layoutFacebook"
    android:gravity="center_horizontal">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_facebook"
    android:layout_alignParentLeft="true"
    android:id="@+id/iconFacebook"
    android:textSize="32sp" />
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="\twith Facebook"
    android:textSize="20sp" />
    </LinearLayout>
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:padding="15dp"
    android:id="@+id/layoutTwitter"
    android:gravity="center_horizontal">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_twitter"
    android:layout_alignParentLeft="true"
    android:id="@+id/iconTwitter"
    android:textSize="32sp" />
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="\twith Twitter"
    android:textSize="20sp" />
    </LinearLayout>
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:padding="15dp"
    android:id="@+id/layoutGoogle"
    android:gravity="center_horizontal">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_google_plus"
    android:layout_alignParentLeft="true"
    android:id="@+id/iconGoogle"
    android:textSize="32sp" />
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="\twith Google+"
    android:textSize="20sp" />
    </LinearLayout>
    </LinearLayout>
    
  5. Przejść do klasy w której wczytywany jest plik layoutu. W moim przypadku jest to LoginManagerDialogFragment dziedziczący po DialogFragment. Stworzyć w nim globalne referencje do trzech TextView które przedstawiać będą ikony obok napisów a także referencje do trzech LinearLayout które będą reagowały na wciśnięcie przez użytkownika. W metodzie OnCreateView przy pomocy metody SetTypeface ze stworzonej klasy FontAwesomeManeager będzie ustawiana czcionka dla wybranych referencji TextView.
  6. W ostatnim kroku do kontenerów LinearLayout pełniących funkcję przycisków należy dodać reakcje na kliknięcia. W efekcie plik LoginManagerDialogFragment ma postać:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;using Android.App;
    using Android.Content;
    using Android.OS;
    using Android.Runtime;
    using Android.Util;
    using Android.Views;
    using Android.Widget;
    
    namespace OutLoudv2.Droid
    {
    public class LoginManagerDialogFragment : DialogFragment
    {
    TextView logoFacebook;
    TextView logoTwitter;
    TextView logoGoogle;
    LinearLayout layoutFacebook;
    LinearLayout layoutTwitter;
    LinearLayout layoutGoogle;
    public override void OnCreate(Bundle savedInstanceState)
    {
    base.OnCreate(savedInstanceState);
    }
    
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
    var view = inflater.Inflate(Resource.Layout.LoginManagerLayout, container, false);
    logoFacebook = view.FindViewById<TextView>(Resource.Id.iconFacebook);
    logoTwitter = view.FindViewById<TextView>(Resource.Id.iconTwitter);
    logoGoogle = view.FindViewById<TextView>(Resource.Id.iconGoogle);
    
    layoutFacebook = view.FindViewById<LinearLayout>(Resource.Id.layoutFacebook);
    layoutTwitter = view.FindViewById<LinearLayout>(Resource.Id.layoutTwitter);
    layoutGoogle = view.FindViewById<LinearLayout>(Resource.Id.layoutGoogle);
    
    //ustawiamy czcionkę w TextView
    logoFacebook.SetTypeface(FontAwesomeManager.GetTypeFace(inflater.Context), Android.Graphics.TypefaceStyle.Bold);
    logoTwitter.SetTypeface(FontAwesomeManager.GetTypeFace(inflater.Context), Android.Graphics.TypefaceStyle.Bold);
    logoGoogle.SetTypeface(FontAwesomeManager.GetTypeFace(inflater.Context), Android.Graphics.TypefaceStyle.Bold);
    
    //dodajemy reakcję na kliknięcie
    layoutFacebook.Click += delegate
    {
    var activity = new Intent(this.Activity, typeof(FacebookLoginActivity));
    StartActivity(activity);
    };
    
    layoutTwitter.Click += delegate
    {
    var activity = new Intent(this.Activity, typeof(TwitterLoginActivity));
    StartActivity(activity);
    };
    
    layoutGoogle.Click += delegate
    {
    var activity = new Intent(this.Activity, typeof(GoogleLoginActivity));
    StartActivity(activity);
    };
    
    return view;
    }
    
    }
    }
    

    To wszystko! Wielkości ikon i tekstu można zmieniać niezależnie, tak samo jak ich kolory!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*