در این مطلب آموزشی نحوه استفاده از بسته آیکون های FontAwesome در یک پروژه اندرویدی آموزش داده می شود، FontAwesome از جنبه های گوناگونی موجب صرفه جویی در زمان شما می گردد.

اول از همه با استفاده از این نوع فونت دیگر هیچ گونه نگرانی درباره ابعاد و تراکم های گوناگون صفحات نمایش نخواهید داشت، چنانچه مایل به استفاده از فایل های PNG باشید، لازم است آن را در حداقل چهار نسخه گوناگون از هر آیکونی درج کنید، علاوه بر این ممکن است در برخی از صفحات نمایش HD با تراکم بسیار بالا آیکون ها کمی دانه دار به نظر بیایند، اما با استفاده از FontAwesome تنها کار لازم درج یک فایل TTF است.

ثانیا شما می توانید به طور رایگان از غنی ترین و کامل ترین مجموعه آیکون بهره بگیرید. استفاده گسترده از FontAwesome در وب موجب شده کاربران به سبک آن عادت پیدا کنند، علاوه بر این دیگر به صرف زمان جهت یافتن مجموعه ای از آیکون های زیبا، کامل و رایگان برای استفاده تجاری نیاز نخواهید داشت. البته این ادعا به معنای عدم وجود چنین مجموعه هایی نمی باشد، اما چنین مجموعه هایی به ندرت یافت می شوند.

1. FontAwesome چگونه کار می کند

ایده پشت پرده FontAwesome بسیار ساده است، با این فونت ها به عنوان کاراکتر رفتار می شود. ممکن است شما نیز متوجه شده باشید که برخی از کاراکترهای عجیب مانند متن به کار می روند، به طوریکه به راحتی می توانید کاراکتر β و یا ∑ را با استفاده از یک ویرایشگر متن ساده کپی کنید. امکان تغییر اندازه و رنگ آنها نیز وجود دارد، دلیل این امر در ماهیت متنی این کاراکترها برای مرورگر و ویرایشگر متن نهفته است.

FontAwesome با دربر گرفتن گستره وسیعی از آیکون ها حول این مفهوم گسترش یافته است، می توان FontAwesome را با یک دیکشنری مقایسه کرد که مطابق یونیکد کاراکترهایی را که امکان تایپ آنها وجود ندارند، به صورت یک آیکون به نمایش می گذارد.

می توانید نگاهی به FontAwesome's cheatsheet بیندازید تا موضوع برای شما روشن تر شود، در این قسمت قادر به گزینش یک آیکون از لیست می باشید، به کارکتر یونیکد آن توجه داشته باشید و از آن در یک TextView استفاده کنید، با این کار شما به اندروید می گویید که آن کاراکتر را با استفاده از فونت FontAwesome رندر نماید.

2. درون ریزی فایل فونت

بیایید نگاهی به یک مثال بیندازیم، نخستین کار دانلود و درج فایل TrueType file در پروژه می باشد، به منظور دانلود FontAwesome می توانید به GitHub مراجعه کنید. پس از دانلود FontAwesome یک آرشیو که شامل فایل ها و فولدرهای متعدد است در اختیار شما قرار می گیرد، این مجموعه برای پروژه های وب بسیار کاربردی است. فایل fontawesome-webfont.ttf که در پوشه fonts قرار گرفته مورد توجه ما قرار می گیرد.

در پروژه اندروید خود به قسمت app > src > main مراجعه نمایید، دایکرتوری main باید دربرگیرنده فولدری به نام assets باشد. چنانچه چنین فولدری وجود ندارد، آن را ایجاد کنید. در دایرکتوری assets یک فولدر دیگر به نام fonts بسازید و فایل fontawesome-webfont.ttf را درون این فولدر قرار دهید. توجه داشته باشید که دایرکتوری fonts الزامی نیست، شما می توانید فایل FontAwesome را در فولدر assets نیز قرار دهید، اما بهتر است فایل های مشابه در فولدر اختصاص داده شده به آنها قرار گیرند. زمانی که فایل FontAwesome در دایرکتوری و یا زیر-دایرکتوری مربوطه جای گرفت قادر به ادامه کار خواهید بود.

3. ساخت یک کلاس کمکی

حال که توانستید فایل FontAwesome را در پروژه اندروید خود قرار دهید، می توانید کار با آن را آغاز نمایید. برای این کار لازم است یک کلاس کمکی به منظور تسهیل فرآیند بوجود آورید، نام کلاس موردنظر ما android.graphics.Typeface است. کلاس TypeFace سبک حروف و سبک های ذاتی یک فونت را مشخص می سازد و در چگونگی ظاهر شدن متن در زمان رسم مورد استفاده قرار می گیرد.

لازم است کار را با ساخت یک کلاس کمکی آغاز نمایید، برای این کار یک کلاس جاوای جدید ایجاد کنید و آنرا FontManager بنامید.

public class FontManager {
    public static final String ROOT = "fonts/",
    FONTAWESOME = ROOT + "fontawesome-webfont.ttf";
    public static Typeface getTypeface(Context context, String font) {
        return Typeface.createFromAsset(context.getAssets(), font);
    }    
}

چنانچه مایل به استفاده از سایر سبک های حروف در پروژه هستید، به راحتی می توانید فونت های دیگری را به کلاس کمکی اضافه کنید:

yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));

تمام کار لازم در همین حد است، اما بیایید یک مرحله به پیش برویم. در متد بالا نیاز است تا یک متغیر برای هر TextView که مایل به استفاده از آن به عنوان آیکون هستید ایجاد کنید.

معمولا آیکون ها در یک ViewGroup منفرد جای می گیرند، مانند RelativeLayout و یا LinearLayout. می توانیم متدی بنویسیم که درخت XML پدر را پیمایش کرده و به صورت بازگشتی سبک حروف هر یک از TexView هایی را که می یابد اورراید نماید.

public class FontManager {
    // ...
    public static 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);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }
}

تصور کنید فایل لی اوت چیزی مشابه زیر باشد:

<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="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />
</LinearLayout>

به منظور نشان گذاری سه نمونه TextView به عنوان آیکون، ما متد onCreate را اورراید کرده و قطعه کد زیر را به آن می افزاییم.

Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);

4. استفاده از آیکون های موردنظر

با مراجعه به FontAwesome's GitHub page نگاهی به فونت های در دسترس بیندازید و یا آیکونی را که دوست دارید برگزینید. در زیر سه آیکون area chart icon ،pie chart icon و line chart icon انتخاب شده اند.

در پروژه به فولدر values مراجعه کنید و یک فایل جدید به نام icons.xml در آنجا بسازید. این فایل به منزله دیکشنری است که در صورت یافتن مطابق یونیکد برای یک آیکون خاص آن را به نامی قابل فهم برای انسان نمایش می دهد، به این معنا که لازم است برای هر آیکون یک ورودی ایجاد نماییم.

<resources>
    <string name="fa_icon_areachart"></string>
    <string name="fa_icon_piechart"></string>
    <string name="fa_icon_linechart"></string>
</resources>

کد مربوطه را می توانید در FontAwesome cheatsheet و یا صفحه detail page مربوط به هر آیکون که موردنظر شماست، بیابید.

گام بعدی ارجاع دادن به ورودی های رشته ای در نمونه های TextView لی اوت می باشد، نتیجه نهایی مشابه زیر خواهد بود:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_areachart" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_piechart" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_linechart" />

چنانچه یک ویرایشگر لی اوت مانند اندروید استودیو را باز کنید، مشاهده می کنید که قادر به رندر کردن آیکون ها نمی باشد، اپلیکیشن خود را بیلد کرده و به اجرا در آورید، با این کار آیکون ها به طور صحیح رندر خواهند شد.

اندازه آیکون ها کوچک است، اما تغییر اندازه آنها به راحتی صورت می پذیرد. تنها کار لازم تغییر ویژگی textSize می باشد. تغییر رنگ آیکون هم به سادگی صورت می پذیرد، تنها لازم است ویژگی textColor را ویرایش کنید. همان طور که مشاهده می کنید آیکون ها دارای ظاهری واضح هستند، دلیل این امر این است که آیکون های FontAwesome در زمان اجرا رندر می شوند و به جای فایل های raster از نوع vector می باشند.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_weight="1"
    android:textSize="45sp"
    android:textColor="#9b59b6"
    android:text="@string/fa_icon_areachart" />

نتیجه گیری

در این ترفند نحوه استفاده از مجموعه آیکون های FontAwesome در پروژه اندروید شرح داده شد. FontAwesome یکی از شناخته شده ترین و غنی ترین مجموعه هایی است که به صورت رایگان در اختیار قرار می گیرد، نتیجه کار برخورداری از آیکون های واضح، حتی در صفحات نمایش با رزولوشن بالا است، یکی از مزیت های این نوع فونت ها به امکان تغییر اندازه و رنگ فونت باز می گردد که به سادگی تغییر یک ویژگی XML می باشد.

http://code.tutsplus.com برگرفته از