برمجة تطبيقات الاندرويد

طرق برمجة شاشة البداية Splash Screen في الاندرويد

صورة
صدام العويري
اخر تحديث :

برنامج تعليمي لشاشة البداية مع مثال في Android Studio

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

مثال على شاشة البداية في Android Studio

عادةً ما يظهر عند تشغيل التطبيق لأول مرة على جهاز android أو قد يكون نوعًا من العمليات المستخدمة لإظهار الشاشة للمستخدم قبل تحميل التطبيق تمامًا.

سيساعدك هذا البرنامج التعليمي على تعلم كيفية إنشاء شاشة Splash في تطبيق Android الخاص بك.

طريقة تنفيذ شاشة Splash في Android

الطريقة الأولى لتنفيذ شاشة Splash 

قم بإنشاء سلسلة رسائل وتعيين وقت النوم بعد إعادة التوجيه إلى شاشة التطبيق الرئيسية.

          
  /****** Create Thread that will sleep for 5 seconds****/       
  Thread background = new Thread() {
  public void run() {
  try {
  // Thread will sleep for 5 seconds
  sleep(5*1000);

  // After 5 seconds redirect to another intent
  Intent i=new Intent(getBaseContext(),FirstScreen.class);
  startActivity(i);

  //Remove activity
  finish();
  } catch (Exception e) {
  }
  }
  };
  // start thread
  background.start();

الطريقة الثانية لتنفيذ شاشة Splash :

اضبط الوقت للمعالج واستدعاء Handler (). postDelayed ، سيستدعي طريقة التشغيل للتشغيل بعد الوقت المحدد ويعيد التوجيه إلى شاشة التطبيق الرئيسية.

المعالجات هي في الأساس خيوط خلفية تتيح لك التواصل مع مؤشر ترابط واجهة المستخدم (تحديث واجهة المستخدم).

يتم تصنيف المعالجات من فئة فرعية من فئة Android Handler ويمكن استخدامها إما عن طريق تحديد Runnable ليتم تنفيذه عند الطلب بواسطة مؤشر الترابط ، أو عن طريق تجاوز طريقة رد الاتصال handleMessage () ضمن الفئة الفرعية للمعالج والتي سيتم استدعاؤها عند إرسال الرسائل إلى المعالج بواسطة موضوع.

هناك نوعان من الاستخدامات الرئيسية للمعالج:

أ) لجدولة الرسائل و Runnables ليتم تنفيذها في وقت ما في المستقبل

ب) لإدراج إجراء ليتم تنفيذه على مؤشر ترابط مختلف عن خيطك.

  new Handler().postDelayed(new Runnable() {

  // Using handler with postDelayed called runnable run method

    @Override

       public void run() {

       Intent i = new Intent(MainSplashScreen.this, FirstScreen.class);

        startActivity(i);

   // close this activity

        finish();

           }

         }, 5*1000); // wait for 5 seconds

حجم صورة شاشة البداية لشاشة مختلفة الحجم:

يوفر Android دعمًا لأحجام وكثافات شاشات متعددة ، مما يعكس العديد من تكوينات الشاشات المختلفة التي قد يحتوي عليها الجهاز. يمكنك تفضيل الأحجام أدناه لدعم شاشة Splash على الهواتف الذكية ذات الأحجام المختلفة.

يقسم Android نطاق أحجام الشاشة الفعلية والكثافة إلى:

مجموعة من أربعة أحجام معممة  : صغير ، عادي ، كبير ، وكبير

مجموعة من ست كثافات معممة  :

  • ldpi (low) ~120dpi (240x360px)
  • mdpi (medium) ~160dpi (320x480px )
  • hdpi (high) ~240dpi (480x720px)
  • xhdpi (extra-high) ~320dpi (640x960px)
  • xxhdpi (extra-extra-high) ~480dpi (960x1440px)
  • xxxhdpi (extra-extra-extra-high) ~640dpi (1280x1920px)

مثال على شاشة البداية في Android Studio

بمساعدة هذا البرنامج التعليمي ، سنغطي تنفيذ شاشة البداية في سيناريوهين. أولاً سنعرض شاشة البداية باستخدام Handler وثانيًا لن ننشئ ملف تخطيط لنشاط شاشة البداية. بدلاً من ذلك ، حدد خلفية موضوع النشاط كتخطيط شاشة البداية.

في المثال الأول أدناه ، سنرى استخدام Splash Screen باستخدام فئة Handler.

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة للمثال:

كود التحميل

مثال على شاشة البداية في Android Studio

الخطوة 1:  قم بإنشاء مشروع جديد وقم بتسميته Splashscreen

الخطوة 2: افتح res -> layout -> activity_main. xml (أو) main. xml وأضف الكود التالي:

في هذه الخطوة ، قمنا ببساطة بإضافة رمز لعرض التخطيط بعد شاشة Splash.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://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"
  tools:context="abhiandroid.com.splashscreen.MainActivity">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Hello World by AbhiAndroid!"
  android:textSize="20sp"
  android:layout_centerInParent="true"/>
  </RelativeLayout>

الخطوة 3:  قم بإنشاء XML جديد ملف splashfile.xml لشاشة Splash والصق الكود التالي فيه.

يحتوي هذا التخطيط على شعار التطبيق الخاص بك أو شعار منتج آخر تريد عرضه على شاشة البداية.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:background="@color/splashBackground">

  <ImageView
  android:id="@+id/logo_id"
  android:layout_width="250dp"
  android:layout_height="250dp"
  android:layout_centerInParent="true"
  android:src="@drawable/abhiandroid"/>

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/logo_id"
  android:layout_centerHorizontal="true"
  android:text="Splash Screen"
  android:textSize="30dp"
  android:textColor="@color/blue"/>

  </RelativeLayout>

الخطوة 4: الآن افتح التطبيق -> java -> package -> MainActivity. جافا وإضافة الكود أدناه.

package abhiandroid.com.splashscreen;

  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;

  public class MainActivity extends AppCompatActivity {


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


  }
  }

الخطوة 5: بالنسبة إلى Splash Screen ، سننشئ نشاطًا منفصلاً في البداية. قم بإنشاء فئة جديدة فيحزمة جافا الخاصة بكوقم بتسميتها باسم SplashActivity.java.

الخطوة 6: أضف هذا الرمز فينشاط SplashActivity.java . يتم استخدام معالج الكود هذا لتثبيت الشاشة لوقت محدد وبمجرد خروج المعالج ، سيتم إطلاق نشاطنا الرئيسي. سنحمل شاشة Splash لمدة ثلاث ثوان. سنحدد الثواني بالملي ثانية بعد طريقة Post Delayed () {}.

1 ثانية = 1000 مللي ثانية.

ستؤدي طريقة Post Delayed إلى تأخير الوقت لمدة 3 ثوانٍ. بعد اكتمال وقت التأخير ، سيبدأ نشاطك الرئيسي.

SplashActivity.java 

package abhiandroid.com.splashscreen;

  import android.app.Activity;
  import android.content.Intent;
  import android.os.Bundle;
  import android.os.Handler;

  /**
  * Created by AbhiAndroid
  */

  public class SplashActivity extends Activity {

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

  handler=new Handler();
  handler.postDelayed(new Runnable() {
  @Override
  public void run() {
  Intent intent=new Intent(SplashActivity.this,MainActivity.class);
  startActivity(intent);
  finish();
  }
  },3000);

  }
  }

الخطوة 7: افتح ملف AndroidManifest.xml واجعل فئة splashactivity.java الخاصة بك كنشاط Launcher واذكر النشاط الرئيسي كنشاط آخر.

AndroidManifest.xml 

<?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="abhiandroid.com.splashscreen">

  <application
  android:allowBackup="true"
  android:icon="@drawable/abhiandroid"
  android:label="@string/app_name"
  android:supportsRtl="true"
  android:theme="@style/AppTheme">
  <activity android:name="abhiandroid.com.splashscreen.SplashActivity">
  <intent-filter>
  <action android:name="android.intent.action.MAIN" />

  <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  </activity>
  <activity android:name="abhiandroid.com.splashscreen.MainActivity"/>
  </application>

  </manifest>

المخرج:

قم الآن بتشغيل التطبيق وسترى شاشة Splash قبل تحميل التخطيط الرئيسي.

مثال شاشة Splash 2 في Android Studio

الطريقة الثانية مختلفة قليلاً عن تطبيق شاشة Splash. في هذا المثال ، سنقوم بتحديد خلفية شاشة Splash كخلفية سمة للنشاط.

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة للمثال:

كود التحميل

مثال على شاشة البداية في Android Studio

الخطوة 1:  قم بإنشاء مشروع جديد وقم بتسميته Splashscreen2

الخطوة 2: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:

في هذه الخطوة ، يتم إضافة رمز لعرض التخطيط بعد شاشة Splash.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="20dp"
  android:layout_gravity="center"
  tools:context="abhiandroid.com.splashscreen2.SecondActivity">

  <TextView
  android:id="@+id/hello_id"
  android:layout_centerInParent="true"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Hello my friend "
  android:textSize="20sp"/>
  </RelativeLayout>

الخطوة 3: قم بإنشاء تخطيط xml جديد في res ⇒ drawable ⇒ splash_screenbackground.xml

في هذا المثال ، لن نقوم بإنشاء ملف تخطيط لنشاط شاشة Splash. بدلاً من ذلك ، سوف نستخدم خلفية موضوع النشاط لتخطيط شاشة Splash.

هنا ، نستخدم قائمة طبقات لإظهار الصورة في وسط شاشة البداية. من الضروري استخدام صورة نقطية لعرض الصورة. (يجب أن تكون الصورة بتنسيق PNG أو JPG) و splash_background_color كلون للخلفية.

فيما يلي مثال على رمز لمورد قابل للرسم باستخدام قائمة الطبقات.

أضف الكود أدناه في res ⇒ drawable.xml ⇒ splash_screenbackground.xml

<?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
  <color android:color="@color/splash_background_color"/>
  </item>
  <item>
  <bitmap
  android:src="@drawable/mx"
  android:tileMode="disabled"
  android:gravity="center"/>
  </item>
  </layer-list>

الخطوة 4: افتح الآن res ⇒ values ⇒ colors.xml

تأكد من إضافة الكود أدناه في colours.xml

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <color name="colorPrimary">#3F51B5</color>
  <color name="colorPrimaryDark">#303F9F</color>
  <color name="colorAccent">#FF4081</color>
  <color name="splash_background_color">#5456e1</color>
  </resources>

الخطوة 5:  أضف الكود أدناه في  res ⇒values ​​⇒ styles.xml

نقوم الآن بإنشاء سمة لنشاط شاشة البداية. نقوم بإنشاء سمة مخصصة لنشاط شاشة البداية ، ونضيف إلى قيم الملف / styles.xml
res "القيم" الأنماط:

SplashTheme - عندما نعلن عن خلفية النافذة ، فإنه سيزيل شريط العنوان من النافذة ، ويظهر لنا ملء الشاشة. يظهر الملف هنا بنمط يسمى SplashTheme.

<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="SplashTheme" parent ="Theme.AppCompat.Light.NoActionBar">
  <item name="android:windowBackground">@drawable/splash_screenbackground</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowFullscreen">true</item>
  </style>

  </resources>

الخطوة 6:   أضف الكود أدناه في MainActivity.java وقم بإنشاء SecondActivity.java جديدة لشاشة البداية

هنا لن نحدد setcontentview () لنشاط شاشة Splash لأننا نطبق سمة Splash عليها مباشرةً. الآن علينا فقط بدء النشاط (النشاط الثاني) ثم إنهاء النشاط باستدعاء طريقة finish ().

MainActivity.java

package abhiandroid.com.splashscreen2;

  import android.content.Intent;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;

  public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  startActivity(new Intent(MainActivity.this,SecondActivity.class));

  // close splash activity
  finish();
  }
  }

SecondActivity.java

package abhiandroid.com.splashscreen2;

  import android.app.Activity;
  import android.os.Bundle;

  /**
  * Created by AbhiAndroid
  */

  public class SecondActivity extends Activity {

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

الخطوة 7: يجب تخصيص
السمة للنشاطالرئيسي في Android Manifestمثل - (android: name = ”. MainActivity” android: theme = ”@ style / SplashTheme”>)
إليك الكود الكامل لـ AndroidManifest:

<?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="abhiandroid.com.splashscreen2">

  <application
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"
  android:supportsRtl="true"
  android:theme="@style/AppTheme">


  <activity android:name="abhiandroid.com.splashscreen2.MainActivity"
  android:theme="@style/SplashTheme">

  <intent-filter>
  <action android:name="android.intent.action.MAIN" />

  <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  </activity>
  <activity android:name="abhiandroid.com.splashscreen2.SecondActivity"/>
  </application>

  </manifest>

المخرجات :

قم الآن بتشغيل التطبيق وسيتم تشغيل Splashscreen قبل النشاط الرئيسي.

تعديل المقال
الأقسام

مقالات قد تهمك