بناء شاشة Splash screen

أَبْدَأُ بِاسْمِ اللَّهِ مُسْتَعِينَا          رَاضٍ بِهِ مُدَبِّرًا مُعِينَا

والصلاة والسلام على نبينا محمد

اما بعد,

في هذا الدرس سوف نتعلم طريقة بناء شاشة Splash screen وهي شاشة يتم عرضها عند بداية فتح التطبيق وتحتوي على اسم التطبيق والشعار وتدوم لعدة ثواني ثم يتم نقل المستخدم للشاشة الرئيسية.

 

كما ذكرنا سابقاً أن الكلاسات في البرمجة ممكن تشبيهها بالاشخص. على سبيل المثال:

الشخصية (اسبلاش) وهي تمثل الصفحة الاولى عند تشغيل التطبيق وتحتوي على اسم التطبيق والشعار.

مثال: اسبلاش شخص مختص بالتسويق للشركة. وظيفته نشر اسم وشعار الشركة بين أوساط المجتمع.

 

إضغط بزر الفأرة الأيمن على البكج (pakage) الخاصة بمشروع share  ثم اختر Activity  ثم Fullscreen Activity كما هو موضح في الصورة:

 

 

قم بكتابتة اسم الكلاس ثم قم بوضع علامة صح اما Launcher Activity وتعني أنه هذا الكلاس هو الكلاس الأول الذي سوف يتم استدعاؤه عند فتح التطبيق لعرض شعار التطبيق واسمه.

 

 

قم بتحديد جميع الأسطر وحذفها كما هو موضح في الصورة

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".SplashScreen">

    <!-- The primary full-screen view. This can be replaced with whatever view
         is needed to present your content, e.g. VideoView, SurfaceView,
         TextureView, etc. -->
    <TextView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:keepScreenOn="true"
        android:text="@string/dummy_content"
        android:textColor="#33b5e5"
        android:textSize="50sp"
        android:textStyle="bold" />

    <!-- This FrameLayout insets its children based on system windows using
         android:fitsSystemWindows. -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <LinearLayout
            android:id="@+id/fullscreen_content_controls"
            style="?metaButtonBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:background="@color/black_overlay"
            android:orientation="horizontal"
            tools:ignore="UselessParent">

            <Button
                android:id="@+id/dummy_button"
                style="?metaButtonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/dummy_button" />

        </LinearLayout>
    </FrameLayout>

</FrameLayout>

بعد الحذف:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".SplashScreen">

 

</FrameLayout>

 

الان سوف نقوم بإضافة عنصر اسمه (ImageView) يقوم هذا العنصر بعرض شعار التطبيق:

1- قم بالضغط على Design 

 

2- قم بختيار ImageView من القائمة ثم سحبه إلى وسط الشاشة كما هو موضح في الصورة التالية:

 

3- سوف تفتح النافذة التالية, قم بالضغط على كلمة project  ثم قم باختيار صورة افتراضية ثم اضغط على OK

 

4- سوف يتم عرض الصورة التي سبق واخترناها في الخطوة السابقة في الشاشة كما يلي:

 

5- الان سوف نقوم بوضع الصورة في وسط الشاشة وتغير الصورة الإفتراضية إلى صورة التطبيق:

 

قم بالضغط على Text حتى يتم عرض الكود (بحسب الرغبة يمكن تعديل مكان الصورة عن طريق شاشة Design أو Text)

 

6- قم بإضافة السطر التالي وسوف يتم عرض الصورة في وسط الشاشة:

android:layout_gravity="center"

هذا السطر يعني أنه يجب عرض الصورة في وسط الشاشة

 

النتيجة بعد إضافة السطر كما هو موضح في الصورة:

 

 

7- الان سوف نقوم بتغير الصورة الإفتراضية:

قم بنسخ شعار التطبيق 

 

ثم قم بلصقه داخل مجلد drawable في Android studio كما يلي:

قم بالضغط على مجلد drawable ثم قم بالضغط في لوحة المفاتيح على Ctrl+v  حتى يتم لصق الصورة.

بعدها سوف تفتح هذه النافذة: قم باختيار الخيار الأول ثم اضغط OK

 

 

سوف تظهر هذه الشاشة اضغط على OK

 

 

ملاحظة:

اسم الصورة يجب أن لا يحتوي على _ أو - ولا حرف كبير

 

 

8- قم بتغير اسم المجلد واسم الصورة في السطر التالي:

app:srcCompat="@mipmap/ic_launcher"

إلى:

app:srcCompat="@drawable/sahreapp"

 

قم بتغير اسم الصورة من imageView إلى shareLogo :

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:srcCompat="@drawable/sahreapp" />

 

إلى:

 

<ImageView
    android:id="@+id/shareLogo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:srcCompat="@drawable/sahreapp" />

 

الكود بعد التعديل:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".SplashScreen">

    <ImageView
        android:id="@+id/shareLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:srcCompat="@drawable/sahreapp" />
</FrameLayout>

 

 

 

كما يتضح من الصورة السابقة أن لون الخلفية ليس متناسق مع الشعار لذا يجب تغير لون الخلفية إلى اللون الأبيض:

android:background="#0099cc"

إلى:

android:background="#ffffff"

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".SplashScreen">


    <ImageView
        android:id="@+id/shareLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:srcCompat="@drawable/sahreapp" />
</FrameLayout>

 

الشاشة بعد التعديل:

 

 

ملاحظات:

Layout:

هي عبارة عن طريقة لعرض محتوى الشاشة (صور نصوص, حقول... إلى اخرة)وهنالك عدة خيارات لعرض العناصر  (الصور والنصوص والحقول..) مثال:

1- FrameLayout

يستخدم لعرض عنصر واحد فقط مثال صورة.

 

2- LinearLayout

تستخدم لعرض النصوص أو الحقول أو الصور في اتجاه أفقي أو عامودي (بحسب رغبة المبرمج)

مثال:

 

هل من الممكن استخدام افقي وعامودي في نفس الشاشة؟

الجواب نعم وسوف يتم توضيح الطريقة في الدروس القادمة.

 

هل يوجد طريقة تصميم غير LinearLayout و FrameLayout؟

 نعم يوجد كما يلي:

RelativeLayout و ConstraintLayout ... إلى اخرة 

 ولكن لكل نوع استخدام معين سوف يتم توضيح بعضها في هذه الدورة إن شاء الله.

 

 

(في الدرس القادم سوف يتم كتابة الكود الخاص بكلاس Spalsh screen)

النهاية...