تصميم تطبيق متعدد اللغات بإستخدام مجموعة متنوعة من الخطوط
في معظم التطبيقات التي قمنا ببرمجتها يتضمن التصميم مجموعة متنوعة من الخطوط، لنكون أكثر تحديدًا خط واحد مع أربع أصناف؛ خفيف، و عادي، ومتوسط، و عريض.ولا نحتاج أن نذكر أن التطبيق نفسه سيكون ثنائي اللغة، أي إضافة أربع خطوط أخرى لإصدار اللغة الإنجليزية من التطبيق!
اعادة تعيين خط مخصص في الأندرويد يعتبر مهلك تمامًا، ولم تكن هناك طريقة لتعيين الخطوط بخلاف الطريقة البرمجية، ولكن الآن منذ إدخال Android Oreo عام 2017، أتاح لنا فريق الأندرويد تعيين الخطوط المخصصة كما نفعل مع attributes في XML.
سنتناول في هذا المقال بعض الطرق المختلفة لتخصيص الخطوط والتركيز أكثر على الطريقة الأسهل حاليًا.
لنفترض أن لدينا TextView الذي نريد تعيين نصه على خط عريض مخصص!
قديماً ، يمكن للمرء إنشاء assets folder، و تحميل ملفات الخطين - ويقول ar_bold و en_bold- في هذا المجلد.
وتعيين الخط إلى TextView برمجيا مثل ذلك:
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), “your_font”;
setTypeface(tf);
لا نحتاج أن ننبهك أنك يجب أن تتأكد من لغة التطبيق الحالية أولاً لتحميل الخط الصحيح!
كانت هذه الخطوة مطلوبة لكل view في التطبيق، وبالتالي كان يقوم المطورون بإنشاء Custom Views الخاصة بهم وجعلها ترث من ال View المماثلة لها، وتعيين الخطوط المخصصة على هذا ال Custom View، كمثال CusomtTextView الذي يرث من TextView ويستخدمه في التطبيق بأكمله بدلاً من TextView.
طريقة أخرى كان الكثير من المطورين يتبعونها أيضًا، وهي استخدام مكتبة تابعة لجهة خارجية third party library تعمل على تبسيط العملية تمامًا، من بينها مكتبة Calligraphy.
يمكنك تفحصها من على Github.
ومع ذلك، ليس هناك حاجة لاستخدام بعض المكتبات الخارجية external library إذا كان هناك وسيلة native وتعتبر أهم طريقة للقيام بذلك، أليس كذلك؟
كما سبق ذكره، منذ إدخال Android Oreo ، كانت هناك طريقة بسيطة للغاية لتعيين الخطوط المخصصة ، من خلال Xml مثل أي سمة attribute أخرى.
ومع ذلك، هناك بعض الطرق المختلفة لتحقيق هذا التأثير، لقد جربنا كثيرًا حتى توصلنا في النهاية إلى أفضل طريقة تلبي هدفنا، وخطوطًا مختلفة في التطبيقات متعددة اللغات للحصول على وجهات نظر مختلفة.
فى البداية، تحتاج إلى تعريف الخطوط كمصادر على النحو التالي:
١. انقر بزر الماوس الأيمن على مجلد res وانتقل إلى New > Android resource directory.
تظهر نافذة دليل الموارد الجديدة New Resource Directory .
٢. في قائمة نوع المورد resource، حدد الخط، ثم انقر فوق موافق.
ستحتاج إلى إنشاء العديد من الأدلة directories مثل عدد اللغات التي سيدعمها تطبيقك.
في كل منها نقوم بتضمين الخطوط الأربعة المختلفة، كل خط يتم تسميته تمامًا كأنه نظيره counterpart في الدليل الآخر تمامًا كما يلي:
في ملف styles.xml الخاص بنا، نحدد أربعة أنماط مختلفة، نمط لكل خط!
في كل نمط ، نقوم بتعيين السمة fontFamily إلى الخط المطابق من دليل الخطوط. على سبيل المثال ، سيكون BoldFontStyle الخاص بنا على النحو التالي:
<style name="BoldFontStyle">
<item name="fontFamily">@font/bold</item>
</style>
وفي root style، قمنا بتعيين سمة fontFamily إلى وزن الخط font weight الذي ترغب في تضخيمه في التطبيق بالكامل، وفي أغلب الأحيان قمنا بتعيينه على الخط العادي regular font.
يمكن أن تكون هذه الأنماط الأربعة أنماطًا رئيسية parent styles لأي نمط آخر، أي إذا كانت بعض الأزرار buttons تحتاج إلى نمط مخصص بسمات معينة بينما يحتاج الخط إلى أن يكون غامقًا، فيمكنك إنشاء نمطك المخصص مع أي سمات تريدها وتثريها من parent BoldFontStyle.
اعتمادا على الموارد resources التي يجري تحميلها، سواء كانت عربية أو إنجليزية، سيتم تحميل الخطوط الصحيحة وتضخيمها!
كما ذكرنا سابقًا، قد يكون هناك بعض الطرق الأخرى لتعيين الخط المخصص، لكننا جربنا كثيرًا حتى وصلنا في النهاية إلى الرضا بهذه الطريقة.
هناك بعض القيود على الرغم من ذلك، لا يمكن لبعض المشاهدات views تحميل الخطوط بهذه الطريقة، من بينها CheckBox و Switch. تم الإبلاغ عن هذه المشكلة issue على تعقب الأخطاء الروبوت Android bug tracker، وإذا كنت غريبة يمكنك التحقق من حالتها على Issuetracker.
للأسف، حتى يتم حل هذه القضايا issues، لضبط الخط برمجيا لهذه views!
ومع ذلك، لا تحتاج إلى مضاعفة الخط في أي أصول assets أخرى مباشرة مثل الأصول، فلا يزال بإمكانك تطبيق الخط برمجيًا من دليل الخطوط بفضل مكتبة دعم Android 26.
بشكل عام، يمكنك تعيين خط مخصص لأي طريقة عرض برمجية على النحو التالي:
Typeface typeface = ResourcesCompat.getFont(this, R.font.your_font);
fontText.setTypeface(typeface);
تذكر رغم ذلك، يجب عليك التحقق من الموارد واللغات التي يتم تحميلها لتعيين الخط الصحيح أو سيكون هناك بعض الأعطال في وقت التشغيل.
يجب عليك التحقق من اللغة التي تم ضبطها حاليًا اعتمادًا على طريقة تطبيقك لها. نحن نفعل ذلك عادةً باستخدام طريقة سطر واحد one-line-method، وحسب اللغة التي نستخدمها في تحميل الخط المقابل.
fun isArabicLanguage() = Locale.getDefault().language == “ar”