تخصيص نصوص TabLayout في تطبيق Android: دليل شامل

في سياق استخدام مكتبة دعم تصميم Android وتحديداً عند استخدام عنصر TabLayout، يمكنك بسهولة تخصيص نصوص التبويبات لتظهر بخط عريض من خلال الاستفادة من خواص التنسيق المتاحة في XML. في الكود المقدم، يتم استخدام عنصر TabLayout بالاعتماد على السمات المحددة لتحديد الألوان والارتفاعات والخصائص البصرية الأخرى للتبويبات.

لجعل نصوص التبويبات عريضة في XML، يمكنك استخدام الخاصية app:tabTextAppearance لتحديد مظهر النص. في هذا السياق، سنقوم بتعديل الكود ليتم مظهر النص بشكل عريض. يمكنك إضافة سطر جديد في XML لتحديد مظهر النص كما يلي:

xmlCopy code
<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    app:tabTextColor="@color/white"
    app:tabSelectedTextColor="@color/white"
    app:tabIndicatorColor="@color/accent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="3dp"
    app:tabTextAppearance="@style/TabTextAppearance" />

ثم يجب تعريف هذا المظهر في ملف الموارد styles.xml. قم بإضافة السطور التالية:

xmlCopy code
<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bolditem>
style>

بهذا التعديل، يتم تحديد مظهر النص ليكون عريضًا باستخدام الخاصية android:textStyle وتعيينها إلى “bold”. يمكنك تخصيص المظهر بمزيد من الخصائص حسب احتياجات تصميم التطبيق الخاص بك.

هذا التعديل يجعل نصوص التبويبات تظهر بخط عريض وبالتالي تحقيق المظهر المطلوب لجعل النصوص عريضة.

بالطبع، سنقدم المزيد من المعلومات لتعزيز فهمك حول تخصيص وتنسيق عناصر TabLayout في تطبيق Android الخاص بك.

1. تخصيص الألوان:
   يمكنك أيضًا تخصيص لون النصوص ولون التبويب المحدد ولون المؤشر بطريقة أكثر تفصيلاً. في مثال الكود السابق، تم استخدام @color/white كلون للنصوص المختارة وغير المختارة، و@color/accent كلون للمؤشر. يمكنك تعديل قيم هذه الألوان حسب تصميم التطبيق الخاص بك.

2. تخصيص الحجم:
   يمكنك أيضًا تغيير حجم النصوص بإضافة خاصية app:tabTextSize إلى عنصر TabLayout في XML. على سبيل المثال:

   xmlCopy code
   <android.support.design.widget.TabLayout
       android:id="@+id/sliding_tabs"
       android:layout_width="match_parent"
       app:tabTextColor="@color/white"
       app:tabSelectedTextColor="@color/white"
       app:tabIndicatorColor="@color/accent"
       android:layout_height="wrap_content"
       app:tabIndicatorHeight="3dp"
       app:tabTextAppearance="@style/TabTextAppearance"
       app:tabTextSize="16sp" />
   

   هنا، تم تحديد حجم النص باستخدام app:tabTextSize وتعيينه إلى “16sp”.

3. تحديد نوع الخط:
   إذا كنت ترغب في تغيير نوع الخط، يمكنك استخدام خاصية app:tabTypeface لتحديد Typeface خاص بالخط. على سبيل المثال:

   xmlCopy code
   <android.support.design.widget.TabLayout
       android:id="@+id/sliding_tabs"
       android:layout_width="match_parent"
       app:tabTextColor="@color/white"
       app:tabSelectedTextColor="@color/white"
       app:tabIndicatorColor="@color/accent"
       android:layout_height="wrap_content"
       app:tabIndicatorHeight="3dp"
       app:tabTextAppearance="@style/TabTextAppearance"
       app:tabTypeface="monospace" />
   

   هنا، تم تحديد نوع الخط باستخدام app:tabTypeface وتعيينه إلى “monospace”.

4. استخدام متغيرات الموارد:
   يمكنك استخدام متغيرات الموارد لجعل تصميمك أكثر تكاملًا وقابلية للصيانة. على سبيل المثال، استخدام @dimen/tab_text_size لتحديد حجم النص بدلاً من قيمة ثابتة.

   xmlCopy code
   <resources>
       <dimen name="tab_text_size">16spdimen>
   resources>
   
   
   <android.support.design.widget.TabLayout
       ...
       app:tabTextSize="@dimen/tab_text_size" />
   

   هذا يسمح لك بتغيير حجم النص بسهولة في ملفات الموارد بدلاً من تحرير القيم مباشرة في XML.

باستخدام هذه التقنيات، يمكنك تحقيق تخصيص كبير وفقًا لاحتياجات تصميم تطبيقك مع TabLayout.