فونت های سفارشی در اندروید

فونت های سفارشی در اندروید

در این آموزش ، نحوه تنظیم فونت های سفارشی را در TextViews ها و دکمه ها توضیح می دهیم.

Android SDK دارای مجموعه ای از فونت های استاندارد است که با استفاده از چند ویژگی XML می توان آنها را بکار برد. در ادامه آنها را بررسی می کنیم:

• android: fontFamily: این مورد برای تغییر فونت های پیش فرض برنامه استفاده می شود. می توانیم فونت را از بین انواع زیر انتخاب کنیم:

casual, monospace, cursive, sans-serif, sans-serif-condensed, sans-serif-smallcaps, serif, serif-monospace

fontFamily پیش فرض sans-serif است.

android: fontFamily به حداقل سطح API 16 نیاز دارد.

• android: typeface: اگر از fontFamily قبلاً استفاده شده باشد ، این ویژگی XML هیچ تأثیری نخواهد داشت (مگر اینکه سطح API کمتر از 15 باشد ، در این صورت ویژگی fontFamily نادیده گرفته خواهد شد). normal یا sans نوع پیش فرض این ویژگی است. در زیر مقادیر قابل قبول این ویژگی را می بینید:

monospace, normal, sans, serif

• android: textStyle: این ویژگی مقادیر normal و bold و italic را به صورت جداگانه یا به صورت ترکیبی (مانند "android:textStyle=”bold|italic) می گیرد. برای ترکیب کردن ، آنها را با کاراکتر پایپ « | » بدون اسپیس به هم وصل کنید.

در ادامه android:fontFamily و android:textStyle را بیشتر بررسی می کنیم و حالات مختلف متن را در یک TextView می ببینیم.

styles.xml که شامل انواع مختلف استایل است در زیر آورده شده است:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <style name="Regular">
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif</item>
    </style>

    <style name="Italic">
    <item name="android:fontFamily">sans-serif</item>
    <item name="android:textStyle">italic</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif</item>
    </style>


    <style name="Bold">
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif</item>
    </style>

    <style name="BoldItalic">
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:textStyle">bold|italic</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif</item>
    </style>

    <style name="RegularCondensed">
        <item name="android:fontFamily">sans-serif-condensed</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif-condensed</item>
    </style>

    <style name="ItalicCondensed">
        <item name="android:fontFamily">sans-serif-condensed</item>
        <item name="android:textStyle">italic</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif-condensed</item>
    </style>


    <style name="BoldCondensed">
        <item name="android:fontFamily">sans-serif-condensed</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">sans-serif-condensed</item>
    </style>

    <style name="Casual">
        <item name="android:fontFamily">casual</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">Casual</item>
    </style>

    <style name="Cursive">
        <item name="android:fontFamily">cursive</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">Cursive</item>
    </style>

    <style name="RegularMono">
        <item name="android:fontFamily">monospace</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">mono space</item>
    </style>

    <style name="ItalicMono">
        <item name="android:fontFamily">monospace</item>
        <item name="android:textStyle">italic</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">monospace</item>
    </style>

    <style name="BoldMono">
        <item name="android:fontFamily">monospace</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">monospace</item>
    </style>

    <style name="RegularMonoSerif">
        <item name="android:fontFamily">serif-monospace</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">serif-monospace</item>
    </style>

    <style name="ItalicMonoSerif">
        <item name="android:fontFamily">serif-monospace</item>
        <item name="android:textStyle">italic</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">serif-monospace</item>
    </style>

    <style name="BoldMonoSerif">
        <item name="android:fontFamily">serif-monospace</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">28sp</item>
        <item name="android:text">serif-monospace</item>
    </style>



</resources>

لایوت activity_main.xml را در زیر می بینید:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    android:orientation="vertical"
    tools:context="com.journaldev.customfonts.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Regular"
         />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Italic"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/RegularCondensed" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/ItalicCondensed"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/BoldCondensed"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Casual"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Cursive"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/RegularMono"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/ItalicMono"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/BoldMono"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/RegularMonoSerif" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/ItalicMonoSerif"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/BoldMonoSerif"
        />

</LinearLayout>

برای تنظیم فونت های سفارشی بر روی یک شی TextView / Button / EditText ، از ویژگی Typeface استفاده می شود.

کلاس Typeface نوع و استایل ذاتی یک فونت را مشخص می کند.

برای تنظیم یک نوع فونت روی یک TextView از متد setTypeface استفاده می کنیم.

در ادامه ثابت های Typeface را که می توان بکار برد می بینید.

• BOLD
• BOLD_ITALIC
• ITALIC
• NORMAL

برای تنظیم فونت های سفارشی در View ها ما ، ابتدا باید فایل فونت ها را به پروژه خود اضافه کنیم.

فایل فونت ها به طور کلی در دو نوع ttf (True Type Font) و (Open Type Font) otf ارائه می شوند.

ساختار پروژه

در تصویر زیر ساختار این پروژه را می بینید. پوشه جدیدی به نام assets در داخل دایرکتوری main برای نگهداری فایل فونت ها اضافه شده است.

پیاده سازی

ما لایوت دیگری به نام activity_custom_fonts.xml برای تنظیم فونت های سفارشی در View ی خود ایجاد کرده ایم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    android:orientation="vertical"
    tools:context="com.journaldev.customfonts.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Bold"
        android:textSize="28sp"
        android:id="@+id/ambleBold"
         />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Light"
        android:textSize="28sp"
        android:id="@+id/ambleLight"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Regular"
        android:textSize="28sp"
        android:id="@+id/ambleRegular" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OpenSans Regular"
        android:textSize="28sp"
        android:id="@+id/opRegular" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OpenSans-Italic"
        android:id="@+id/opItalic"
        android:textSize="28sp"
        />

    <Button android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Pacifico"
        android:id="@+id/pacifico"/>


</LinearLayout>

تنظیم فونت های سفارشی خود را در کد جاوا انجام داده ایم. MainActivity.java در زیر آورده شده است:

// Clicksite
// clicksite.ir@gmail.com
public class MainActivity extends AppCompatActivity {


    TextView ambleBold, ambleLight, ambleRegular, openSansItalic, openSansRegular;
    Button btn;

    private String A_BOLD= "Amble-Bold.ttf";
    private String A_LIGHT="Amble-Light.ttf";
    private String A_REGULAR= "Amble-Regular.ttf";
    private String O_ITALIC= "OpenSans-Italic.ttf";
    private String O_REGULAR="OpenSans-Regular.ttf";
    private String P_REGULAR="Pacifico.ttf";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_fonts);

        ambleBold=(TextView)findViewById(R.id.ambleBold);
        ambleLight=(TextView)findViewById(R.id.ambleLight);
        ambleRegular=(TextView)findViewById(R.id.ambleRegular);
        openSansRegular=(TextView)findViewById(R.id.opRegular);
        openSansItalic=(TextView)findViewById(R.id.opItalic);
        btn=(Button)findViewById(R.id.pacifico);

        ambleBold.setTypeface(Typeface.createFromAsset(getAssets(), A_BOLD));
        ambleLight.setTypeface(Typeface.createFromAsset(getAssets(), A_LIGHT));
        ambleRegular.setTypeface(Typeface.createFromAsset(getAssets(), A_REGULAR));
        openSansRegular.setTypeface(Typeface.createFromAsset(getAssets(), O_REGULAR));
        openSansItalic.setTypeface(Typeface.createFromAsset(getAssets(), O_ITALIC));
        btn.setTypeface(Typeface.createFromAsset(getAssets(), P_REGULAR));


    }
}

در کد بالا متد createFromAsset از کلاس Typeface را فراخوانی کرده ایم تا نمونه جدیدی از Typeface ایجاد کنیم. متد getAssets نمونه ای از AssetManager را می دهد که به عنوان اولین پارامتر ارسال می شود و آدرس مکان فایل فونت ، به عنوان یک رشته در پارامتر دوم ارسال می شود. از آنجا که ما فایل های فونت را در ریشه پوشه assets قرار داده ایم ، ارسال نام فایل های فونت کافی است.

توجه: تنظیم فونت های خارجی با استفاده از android: typeface کار نمی کند

وقتی برنامه اجرا می شود ، به خروجی زیر می رسیم:

آیا تنظیم فونت داخل کد جاوا و به صورت جداگانه برای هر یک از view ها کار زمان بر و زائدی نیست؟

ما به جایگزین بهتری نیاز داریم. پاسخ ما در  View های سفارشی شده است. در بخش بعدی ، ما یک کلاس سفارشی شده TextView ایجاد می کنیم و ویژگی های XML سفارشی را برای تنظیم فونت های خارجی در لایوت XML تعریف می کنیم.

ساختار پروژه به روز شده ما در زیر آورده شده است:

قبل از اینکه CustomTextView.java ی خود را پیاده سازی کنیم ، بیایید کلاس TypeFactory.java را بررسی کنیم.

در زیر کد TypeFactory.java را می بینید:

// Clicksite 
// clicksite.ir@gmail.com
public class TypeFactory {

    private String A_BOLD= "Amble-Bold.ttf";
    private String A_LIGHT="Amble-Light.ttf";
    private String A_REGULAR= "Amble-Regular.ttf";
    private String O_ITALIC= "OpenSans-Italic.ttf";
    private String O_REGULAR="OpenSans-Regular.ttf";

    Typeface ambleBold;
    Typeface ambleLight;
    Typeface ambleRegular;
    Typeface openSansItalic;
    Typeface openSansRegular;

    public TypeFactory(Context context){
        ambleBold = Typeface.createFromAsset(context.getAssets(),A_BOLD);
        ambleLight = Typeface.createFromAsset(context.getAssets(),A_LIGHT);
        ambleRegular = Typeface.createFromAsset(context.getAssets(),A_REGULAR);
        openSansItalic = Typeface.createFromAsset(context.getAssets(),O_ITALIC);
        openSansRegular = Typeface.createFromAsset(context.getAssets(),O_REGULAR);
    }

}

کد فوق در اصل یک فونت سفارشی را برای هر یک از فایل فونت ها ایجاد می کند. اکنون می توانیم از متغیرهای کلاسی در CustomTextView ی خود استفاده کنیم تا متن را متناسب با آن تنظیم کنیم.

کلاس CustomTextView.java در زیر آورده شده است:

// Clicksite 
// clicksite.ir@gmail.com
public class CustomTextView extends TextView {

    private int typefaceType;
    private TypeFactory mFontFactory;

    public CustomTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

        applyCustomFont(context, attrs);
    }

    public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        applyCustomFont(context, attrs);
    }

    public CustomTextView(Context context) {
        super(context);
    }

    private void applyCustomFont(Context context, AttributeSet attrs) {


        TypedArray array = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.CustomTextView,
                0, 0);
        try {
            typefaceType = array.getInteger(R.styleable.CustomTextView_font_name, 0);
        } finally {
            array.recycle();
        }
        if (!isInEditMode()) {
            setTypeface(getTypeFace(typefaceType));
        }

    }

    public Typeface getTypeFace(int type) {
        if (mFontFactory == null)
            mFontFactory = new TypeFactory(getContext());

        switch (type) {
            case Constants.A_BOLD:
                return mFontFactory.ambleBold;

            case Constants.A_LIGHT:
                return mFontFactory.ambleLight;

            case Constants.A_REGULAR:
                return mFontFactory.ambleRegular;

            case Constants.O_LIGHT:
                return mFontFactory.openSansItalic;

            case Constants.O_REGULAR:
                return mFontFactory.openSansRegular;

            default:
                return mFontFactory.ambleBold;
        }
    }

    public interface Constants {
        int A_BOLD = 1,
                A_LIGHT = 2,
                A_REGULAR = 3,
                O_LIGHT = 4,
        O_REGULAR=5;
    }


}

همانطور که در زیر نشان داده شده است ، R.styleable.CustomTextView در داخل فایل attrs.xml تعریف شده است:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomTextView">
        <attr name="font_name">
            <enum value="1" name="ambleBold"/>
            <enum value="2" name="ambleLight"/>
            <enum value="3" name="ambleRegular"/>
            <enum value="4" name="openSansItalic"/>
            <enum value="5" name="openSansRegular"/>
        </attr>
    </declare-styleable>

</resources>

ویژگی font_name ویژگی سفارشی است که از آن در لایوت XML استفاده خواهیم کرد.

لایوت به روز شده activity_custom_fonts.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    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"
    android:orientation="vertical"
    tools:context="com.journaldev.customfonts.MainActivity">

    <com.journaldev.customfonts.CustomTextView
        app:font_name="ambleBold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Bold"
        android:textSize="28sp"
        android:id="@+id/ambleBold"
         />

    <com.journaldev.customfonts.CustomTextView
        app:font_name="ambleLight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Light"
        android:textSize="28sp"
        android:id="@+id/ambleLight"
        />

    <com.journaldev.customfonts.CustomTextView
        app:font_name="ambleRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amble Regular"
        android:textSize="28sp"
        android:id="@+id/ambleRegular" />

    <com.journaldev.customfonts.CustomTextView
        app:font_name="openSansRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OpenSans Regular"
        android:textSize="28sp"
        android:id="@+id/opRegular" />

    <com.journaldev.customfonts.CustomTextView
        app:font_name="openSansItalic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OpenSans-Italic"
        android:id="@+id/opItalic"
        android:textSize="28sp"
        />

    <Button android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Pacifico"
        android:id="@+id/pacifico"/>

</LinearLayout>

کد MainActivity.java اکنون فقط به تنظیم typeface برای دکمه نیاز دارد.

تمرین:

به روشی مشابه  View ی سفارشی شده ی CustomView می توان Button سفارشی شده ی CustomButton را ساخت. این کار را به عنوان تمرین انجام بدید.