شعار يوتيوب علي شاشة بدء التطبيقات

في كل تطبيق غالبًا، سيطلب منك العميل الشاشة التي تعرض وتسلط الضوء على شعار العلامة التجارية، والتى كانت عرفا فى تطبيق المشاريع، وقد كان معروفًا أكثر باسم شاشات Splash. تعمل شاشات Splash عادةً على تحسين المظهر والانطباع للتطبيق أو الموقع، كما أنه يساعد على تعزيز شخصية ومكانة العلامة التجارية. إذا لم تكن أدرجتها بالفعل في تطبيقاتك، ففكر في البدء الآن.

عندما يتعلق الأمر بنظام الأندرويد، هناك العديد من الأمور المختلفة لتنفيذ مثل تلك الشاشات. سنتناول في هذه المقالة بعض هذه الطرق وننتهي بالتركيز على توصية من جوجل ونشرها في العديد من تطبيقاته.

المنهج الأساسي هو استخدام شاشة مخصصة بالكامل لهذا الغرض. كنشاط منفصل مع التصميم الخاص بها والذي يعرض أي محتوى تحتاج أن يشاهده المستخدم في بداية التطبيق. باستخدام نوع من scheduler سواء كان Handler أو Timer. يمكنك بسهولة بدء الشاشة التالية من splash screen بعد مرور بعض الوقت.

هذا النهج له إيجابياته وسلبياته،و من بين الإيجابيات الخاصة به أنه فى الشاشه الافتتاحيه يمكنك التعامل مع بعض طلبات API أو تهيئة بعض الخدمات أو أي عملية طويلة. ومع ذلك، عندما لا يكون التطبيق قيد التشغيل بالفعل، على سبيل المثال، العمليات داخل التطبيق ليست قيد العمل بعد ، او كما هو معروف، عندما يتم تشغيل التطبيق لاول مره ، هناك بعض التأخير بالفعل قبل أن يتمكن المستخدم من التفاعل مع تطبيقك، وباستخدام هذا النهج ، فإنك تضيف المزيد من التأخير.و لا يوجد شيء محبط للمستخدم من الانتظار لفترة طويلة في بداية التطبيق.

في بعض الأجهزة القديمة، قد يستغرق هذا وقتًا طويلًا لهذا تجنب هذا النهج إلا إذا كان هناك splash screen غير تقليدية، بمعنى أنك تشغل بعض مقاطع الفيديو أو تهيئ بعض الخصائص فى التطبيق.

هناك نسخة معدلة قليلًا من هذا المنهج هو استخدام نوع معين من العرض في الشاشة الرئيسية نفسها. ومع مرور الوقت يمكنك تغيير هذا العرض الى العرض الرئيسى لتطبيقك كما تفعل مع باقى الشاشات (activities).على الرغم من أن هذا قد يكون أكثر سلاسة، إلا أنك لن تقع فى الكثير لهذه المشاكل من أجل بداية جيدة!

إذا ما هو أفضل منهج تستخدمه؟!

أفضل طريقة ينصح بها فريق مبرمجي الأندرويد والمدمجة في تطبيقات جوجل ومن بينها اليوتيوب.

ربما تتذكر رؤية هذه الشاشة من قبل، تلك الشاشة التي تظهر عند تشغيل التطبيق من الشاشة الرئيسية. علي سبيل المثال عندما يبدأ التطبيق من الصفر ولا يتم استعادته من الخلفية.

تلك الشاشه الاحتياطيه (placeholder screen) هي نتيجة ل مدير النوافذ فى نظام ال android والذي يبذل جهدًا في محاولة رسم تلك الشاشه لسد الفجوة بين بدء التطبيق حتى يتمكن المستخدم من التفاعل معه. يتم صنع شاشه لبدايه تلك من قالب التطبيق مثل لون الخلفية وشريط الحالة.

والخبر السار هو أنه لا يلزم أن تكون هذه الشاشة ثابته طوال هذا الوقت، وبدلاً من ذلك، فهي قابلة للتخصيص تمامًا ويمكنك استخدام شعار علامتك التجارية. بالإضافة إلى ذلك، يمكنك استخدامه كبديل لشاشة البدايه (splash screen). بالضبط مثل يوتيوب.

فكيف تحقق هذا السلوك. باختصار، يمكنك تعيين سمة مخصصة (custom theme)، تختلف عن مظهر تطبيقك ، بالنسبة إلى شاشة البدء( starter screen) فقط، عند بدء تشغيل التطبيق ، سيتم رسم سمة الخلفية من هذا الموضوع تلك الشاشه الاحتياطيه. وعندما يكون التطبيق جاهزًا لتفاعل المستخدم، يمكنك التبديل مرة أخرى إلى المظهر الرئيسي للتطبيق.

تابع لتعرف كيف تحقق هذا السلوك بالتفصيل:

• بالنسبة للمبتدئين ، أنشئ سمة مخصصة (custom theme) لشاشه البدايه ومن ثم قم بعمل (override) لتلك الخاصية Windowbackground
• اضبط هذه الخاصية attribute على شعار علامتك التجارية الخاصة.
• ومع ذلك، لا ينبغي أن تكون هذه الصورة بتنسيق PNG، وبدلًا من ذلك عليك استخدام ملف XML، ويفضل أن يكون ملف (layer-list) لديك للمزيد من التحكم فى تلك الطبقات.
• طبقة واحدة من هذه القائمة ستكون صورة للشعار مرسومة فوق طبقة خلفية أخرى.

هذا مثال لملف Background layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <item android:drawable="@color/colorBackground"/>

    <!-- Your product brand_logo - 144dp color version of your app icon -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/brand_logo" />
    </item>

</layer-list>

الآن الخلفية تم الانتهاء منها بالفعل! لا يزال عليك إنشاء نمط (style) وقم بعمل (override ) لتلك الخاصية windowbackground الى هذا الملف الذى قمنا بعمله سابقاً.

<style name="AppTheme.Launcher">
    <item name="android:windowBackground">@drawable/launch_screen</item>
</style>

احيانا قد تحتاج الى عمل (override) لتلك الخصائص statusBarColor و navigationBar لمطابقة لون الخلفية وذلك لتجنب عدم التناسق وتكون النتيجه بهذا الشكل:

ما عليك سوى تخصيص هذا ال (style ) لشاشه البدء، وتذكر شاشه البدء فقط. قم بتخصيص هذا (theme) داخل ملف ال (manifest)على النحو التالى:

<activity
    android:name=".MainActivity"
    android:theme="@style/AppTheme.Launcher">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

الخطوة الأخيرة التي يجب اتباعها هي تغيير (style) برمجيا من خلال ملف الكود الخاص بشاشه البدء تلك حتى ينفذ على التطبيق بأكمله:

public class MyMainActivity extends AppCompatActivity {
 @Override
 void onCreate(Bundle savedInstanceState) {

    setTheme(R.style.Theme_MyApp);
    super.onCreate(savedInstanceState);
 
	setContentView(R.layout.activity_main)
    // ...
  }
}

الشيء الجيد في هذا النهج، هو أنه يصطاد عصفورين بحجر واحد. لقد نفّذت Splash Screen وعبّأت أيضًا الفراغ الموجود فى بداية تطبيقك ، حتى يمكن للمستخدم التفاعل مع تطبيقك. ولهذا السبب تنصح جوجل بنشر هذا الأسلوب في شاشات البدء، خاصةً عندما لا يكون هناك شيء مميز حولها، ولا يتم عرض أي مقاطع فيديو أو مقاطع فيديو ، وهذا هو السبب في أننا نستخدم هذا الأسلوب قدر المستطاع!