شرح ImageSwitcher في الاندرويد

برنامج ImageSwitcher التعليمي مع مثال في Android Studio

في الاندرويد ، ImageSwitcher هو متخصصة ViewSwitcher التي تحتوي على ImageView نوع الأطفال. ImageSwitcher متاح في Android من v1.6 +.

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

---

جدول المحتويات

• 1 كود ImageSwitcher الأساسي في XML:
• 2 خطوات لتنفيذ ImageSwitcher:
• 3 طرق مهمة لـ ImageSwitcher:
• 4 سمات وخصائص  ImageSwitcher:
• 5 مثال ImageSwitcher في Android Studio:

كود ImageSwitcher الأساسي في XML

<ImageSwitcher
  android:id="@+id/simpleImageSwitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>

---

خطوات تنفيذ ImageSwitcher

1. احصل على مرجع ImageSwitcher في الفصل باستخدام طريقة findViewById () ، أو يمكنك أيضًا إنشاء كائن ديناميكيًا.
2. تعيين مصنع باستخدام switcherid.setFactory ()
3. تعيين الرسوم المتحركة in-
4. تعيين رسم متحرك خارجي باستخدام switcherid.setOutAnimation ()

---

طرق مهمة في ImageSwitcher

دعونا نناقش بعض الطرق المهمة لبرنامج ImageSwitcher التي يمكن استدعاؤها من أجل إدارة ImageSwitcher.

1. setFactory (ViewFactory factory ): تُستخدم هذه الطريقة لإنشاء عرض جديد لـ ImageSwitcher. باستخدام هذه الطريقة ، نقوم بإنشاء ملف

أدناه رمز إنشاء طريقة عرض جديدة باستخدام طريقة setFactory.

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher

  // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked
  imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {

  public View makeView() {
  // TODO Auto-generated method stub

  // Create a new ImageView and set it's properties
  ImageView imageView = new ImageView(getApplicationContext());
  imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
  imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
  return imageView;
  }
  });

2. setImageDrawable (Drawable drawable): تُستخدم هذه الطريقة لتعيين صورة في ImageSwitcher. في هذا نقوم بتمرير صورة لـ Drawable.

أدناه قمنا بتعيين الصورة في ImageSwitcher باستخدام طريقة setImageDrawable.

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher
  simpleImageSwitcher.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); // set drawable image in ImageSwitcher

3. setImageResource (int Resid): تُستخدم هذه الطريقة أيضًا لتعيين صورة في  مبدل الصور . يتم تمرير الصورة في شكل معرف عدد صحيح.

أدناه قمنا بتعيين الصورة في ImageSwitcher باستخدام طريقة setImageDrawable.

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher
  simpleImageSwitcher.setImageResource(R.drawable.ic_launcher); // set image resource in ImageSwitcher

4. setImageURI (Uri uri): تُستخدم هذه الطريقة أيضًا لتعيين صورة في  مبدل الصور . يتم تمرير الصورة في شكل URI.

أدناه قمنا بتعيين الصورة في ImageSwitcher من المجلد الخام باستخدام Uri:

قبل استخدام الكود أدناه ، قم أولاً بإنشاء مجلد اسم خام في دليل res وحفظ صورة اسم صورة 1 في هذا المجلد.

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher
  simpleImageSwitcher.setImageURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.image1)); // set Image in ImageSwitcher from raw folder using Uri

5. loadAnimation (   Context context, int id): تُستخدم هذه الطريقة عندما نحتاج إلى تعريف كائن منفئة الرسوم المتحركة منخلال فئة AnimationUtils عن طريق استدعاء أسلوب ثابت loadAnimation.

أدناه نقوم بإنشاء كائن من فئة الرسوم المتحركة وتحميل الرسوم المتحركة باستخدام فئة AnimationUtils.

// load an animation by using AnimationUtils class
  Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
  Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

6. setInAnimation (   Animation inAnimation ) : تُستخدم هذه الطريقة لتعيين الرسوم المتحركة لمظهر الكائن على الشاشة.

أدناه نقوم بإنشاء كائن من فئة الرسوم المتحركة وتحميل الرسوم المتحركة باستخدام فئة AnimationUtils ثم تعيين الرسوم المتحركة على ImageSwitcher.

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher
  Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation
  simpleImageSwitcher.setInAnimation(in); // set in Animation for ImageSwitcher

7. setOutAnimation (Animation outAnimation): تعمل هذه الطريقة بعكس تعيين setInAnimation ().

عندما نستخدم تعيين صورة جديدة في ImageView ، فإنه يزيل أولاً العرض القديم باستخدام مجموعة رسوم متحركة باستخدام طريقة setOutAnimation () ، ثم يضع الصورة الجديدة باستخدام الرسوم المتحركة التي تم تعيينها بواسطة طريقة setInAnimation ().

أدناه نقوم بإنشاء كائن من فئة الرسوم المتحركة وتحميل الرسوم المتحركة باستخدام فئة AnimationUtils ثم تعيين الرسوم المتحركة على ImageSwitcher

ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher
  Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation
  simpleImageSwitcher.setOutAnimation(out); // set out Animation for ImageSwitcher

---

سمات ImageSwitcher:

الآن دعنا نناقش بعض السمات الشائعة لـ ImageSwitcher التي تساعدنا على تكوينها في مخططنا ( xml ).

1. المعرف id :  السمة id تستخدم لتعريف ImageSwitcher بشكل فريد.

أدناه قمنا بتعيين معرف ImageSwitcher الذي يتم استخدامه لتعريفه بشكل فريد.

<ImageSwitcher
  android:id="@+id/simpleImageSwitcher"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" /> <!--  id of ImageSwitcher that is used to uniquely identify it -->

2. المساحة المتروكة padding : تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيسر أو الأيمن أو العلوي أو السفلي من ImageSwitcher.

• paddingRight: تستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيمن من ImageSwitcher .
• paddingLeft: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيسر من ImageSwitcher .
• paddingTop: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب العلوي من ImageSwitcher .
• paddingBottom: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب السفلي من ImageSwitcher .
• المساحة المتروكة padding  : تُستخدم هذه السمة لضبط المساحة المتروكة من جميع جوانب ImageSwitcher .

أدناه قمنا بتعيين حشوة 10dp من جميع جوانب ImageSwitcher

<ImageSwitcher
  android:id="@+id/imageSwitcher"
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:layout_gravity="center_horizontal"
  android:padding="10dp" /> <!-- set 10 dp padding from all the sides of TextSwitcher -->

3. الخلفية background : تُستخدم هذه السمة لتعيين خلفية ImageSwitcher. يمكننا ضبط لون أو رسم في خلفية ImageSwitcher.

يوجد أدناه مثال للكود مع شرح مضمن حيث قمنا بتعيين اللون الأسود لخلفية ImageSwitcher.

<ImageSwitcher
  android:id="@+id/imageSwitcher"
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:layout_gravity="center_horizontal"
  android:background="#000" /> <!-- set black color in the background of TextSwitcher -->

إعداد الخلفية في ImageSwitcher في فئة Java:

ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher); // get the reference of ImageSwitcher.
  imageSwitcher.setBackgroundColor(Color.BLACK); // set black color in the background of ImageSwitcher.

---

مثال ImageSwitcher في Android Studio

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

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

تحميل الكود ؟

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

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

في هذه الخطوة ، نفتح ملف xml ونضيف الكود لعرض زر و ImageSwitcher باستخدام سماته المختلفة.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">


  <ImageSwitcher
  android:id="@+id/simpleImageSwitcher"
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:layout_gravity="center_horizontal"
  android:layout_marginTop="50dp" />


  <Button
  android:id="@+id/buttonNext"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="150dp"
  android:layout_gravity="center"
  android:background="#050"
  android:textColor="#fff"
  android:textStyle="bold"
  android:text="NEXT" />

  </LinearLayout>

الخطوة 3:  افتح src -> package -> MainActivity.java

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

package com.example.ip_d.imageswitcherexample;

  import android.os.Bundle;
  import android.support.v7.app.AppCompatActivity;
  import android.view.View;
  import android.view.animation.Animation;
  import android.view.animation.AnimationUtils;
  import android.widget.Button;
  import android.widget.ImageSwitcher;
  import android.widget.ImageView;
  import android.widget.LinearLayout;
  import android.widget.ViewSwitcher;

  public class MainActivity extends AppCompatActivity {
  private ImageSwitcher simpleImageSwitcher;
  Button btnNext;


  // Array of Image IDs to Show In ImageSwitcher
  int imageIds[] = {R.drawable.image1, R.drawable.images2, R.drawable.image3, R.drawable.images4, R.drawable.images5};
  int count = imageIds.length;
  // to keep current Index of ImageID array
  int currentIndex = -1;

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

  setContentView(R.layout.activity_main);

  // get The references of Button and ImageSwitcher
  btnNext = (Button) findViewById(R.id.buttonNext);
  simpleImageSwitcher = (ImageSwitcher) findViewById(R.id.simpleImageSwitcher);
  // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked
  simpleImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {

  public View makeView() {
  // TODO Auto-generated method stub

  // Create a new ImageView and set it's properties
  ImageView imageView = new ImageView(getApplicationContext());
  // set Scale type of ImageView to Fit Center
  imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
  // set the Height And Width of ImageView To FIll PARENT
  imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
  return imageView;
  }
  });

  // Declare in and out animations and load them using AnimationUtils class
  Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
  Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

  // set the animation type to ImageSwitcher
  simpleImageSwitcher.setInAnimation(in);
  simpleImageSwitcher.setOutAnimation(out);


  // ClickListener for NEXT button
  // When clicked on Button ImageSwitcher will switch between Images
  // The current Image will go OUT and next Image  will come in with specified animation
  btnNext.setOnClickListener(new View.OnClickListener() {

  public void onClick(View v) {
  // TODO Auto-generated method stub
  currentIndex++;
  //  Check If index reaches maximum then reset it
  if (currentIndex == count)
  currentIndex = 0;
  simpleImageSwitcher.setImageResource(imageIds[currentIndex]); // set the image in ImageSwitcher
  }
  });

  }

  }

المخرجات :

الآن قم بتشغيل التطبيق وسترى زر التالي على الشاشة. انقر فوقه وسوف تنزلق الصورة. انقر فوق الزر "التالي" وستدخل الصورة الجديدة وستنزلق الصورة الأقدم. هذا هو ImageSwitcher في Android.

تعديل المقال