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

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

في الاندرويد ، ViewSwitcher هي فئة فرعية من ViewAnimator التي تستخدم للتبديل بين وجهات النظر. إنه عنصر من عناصر عنصر واجهة الانتقال الذي يساعدنا على إضافة انتقالات في طرق العرض. من المفيد بشكل أساسي تحريك عرض على الشاشة. ViewSwitcher التبديل بسلاسة بين وجهات النظر (أي TextView ، ImageView أو أي تخطيط)، وبالتالي يوفر وسيلة الانتقال من رأي واحد إلى آخر من خلال الرسوم المتحركة المناسبة. يمكنك إنشاء طرق عرض لعنصر واجهة مستخدم ViewSwitcher إما باستخدام مصنع أو عن طريق إضافتها بنفسك.

ملاحظة مهمة: يمكن أن يكون لـ ViewSwitcher عرضان فرعيان يتم عرض واحدة منهما فقط في كل مرة. إذا كان لديك أكثر من عرضين فرعيين فيViewSwitcher، فسيظهر java .lang.IllegalStateException لـ "لا يمكن إضافة أكثر من عرضين لخطأ ViewSwitcher".

---

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

• 1 كود    ViewSwitcher  الأساسي :
• 2 خطوات لتنفيذ ViewSwitcher :
• 3 طرق مهمة للعرض التبديل:
• 4 سمات من ViewSwitcher:
• 5 مثال على ViewSwitcher في Android Studio :

كود XML ViewSwitcher الأساسي :

<ViewSwitcher

  android:id="@+id/viewswitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" >

  <!--   Add Two View’s Here -- >

  </ViewSwitcher>

---

خطوات تنفيذ ViewSwitcher :

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

---

طرق مهمة للعرض التبديل ViewSwitcher  :

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

1. getNextView (): تعيد هذه الطريقة العرض التالي ليتم عرضها في ViewSwitcher. تقوم هذه الطريقة بإرجاع معرف طريقة العرض للعرض التالي ليتم عرضها.

أدناه نحصل على معرف العرض التالي ليتم عرضه في ViewSwitcher.

ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); // get the reference of ViewSwitcher
  View nextView=simpleViewSwitcher.getNextView(); // get next view to be displayed

2. reset  (): وتستخدم هذه الطريقة لإعادة ViewSwitcher لإخفاء جميع وجهات النظر القائمة وجعلها تعتقد أن المرة الأولى التي الرسوم المتحركة لم يلعب حتى الان. في وقت ما نحتاج إلى إعادة تعيين ViewSwitcher عند حدث النقر بحيث يتصرف مثل الرسوم المتحركة لأول مرة التي لم يتم تشغيلها بعد.

أدناه نقوم بإعادة تعيين ViewSwitcher لإخفاء جميع طرق العرض الحالية.

ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); // get the reference of ViewSwitcher

  simpleViewSwitcher.reset(); // reset the ViewSwitcher to hide all of the existing views

3. showNext (): تُستخدم هذه الطريقة لإظهار العرض التالي لـ ViewSwitcher. كما ناقشنا سابقًا ، لا يمكن أن يكون لـ ViewSwitcher سوى عرضين فرعيين يتم عرض واحدة منهما فقط في كل مرة ، لذلك يتم استخدام هذه الطريقة لإظهار طرق العرض التالية.

أدناه نقوم بإجراء انقر فوق الزر واستدعاء طريقة showNext () لإظهار العرض التالي في ViewSwitcher.

ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); // get the reference of ViewSwitcher

  Button btnNext=(Button) findViewById(R.id.buttonNext); // get the reference of Button
  // set Click event on next button
  btnNext.setOnClickListener(new View.OnClickListener() {

  public void onClick(View v) {
  // TODO Auto-generated method stub
  // show the next view of ViewSwitcher
  simpleViewSwitcher.showNext();
  }
  });

4. showPrevious (): تُستخدم هذه الطريقة لإظهار العرض السابق لـ ViewSwitcher. كما ناقشنا سابقًا ، لا يمكن أن يكون لـ ViewSwitcher سوى عرضين فرعيين يتم عرض واحدة منهما فقط في كل مرة ، لذلك تُستخدم هذه الطريقة لإظهار طريقة العرض السابقة.

أدناه نقوم بتنفيذ انقر فوق حدث على الزر واستدعاء طريقة showPrevious () لإظهار طريقة العرض السابقة في ViewSwitcher.

ViewSwitcher simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); // get the reference of ViewSwitcher

  Button btnPrevious=(Button) findViewById(R.id.buttonPrevious); // get the reference of Button
  // set Click event on next button
  btnPrevious.setOnClickListener(new View.OnClickListener() {

  public void onClick(View v) {
  // TODO Auto-generated method stub
  // show the previouus view of ViewSwitcher
  simpleViewSwitcher.showPrevious();
  }
  });

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

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

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

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

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

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

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

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

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

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

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

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

ViewSwitcher simpleViewSwitcher=(ViewSwitcher)findViewById(R.id. simpleViewSwitcher); // get reference of ViewSwitcher

  // Set the ViewFactory of the ViewSwitcher that will create a new view ( ImageView ) object when asked
  simpleViewSwitcher.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;
  }
  });

---

سمات و خصائص ViewSwitcher :

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

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

<ViewSwitcher

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

  <!--   Add View’s Here -- >

  </ViewSwitcher>

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

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

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

<ViewSwitcher
  android:id="@+id/simpleViewSwitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="10dp"> <!-- set 10 dp padding from all the sides of ViewSwitcher -->

  <!--   Add View’s Here -- >

  </ViewSwitcher>

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

أدناه قمنا بتعيين اللون الأخضر لخلفية الخلفية: تُستخدم هذه السمة لتعيين خلفية ViewSwitcher.

<ViewSwitcher
  android:id="@+id/simpleViewSwitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#0f0"> <!-- set green color in the background of ViewSwitcher -->

  <!--   Add View’s Here -- >

  </ViewSwitcher>

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

ViewSwitcher simpleViewSwitcher=(ViewSwitcher)findViewById(R.id. simpleViewSwitcher); // get reference of ViewSwitcher
  simpleViewSwitcher.setBackgroundColor(Color.GREEN);// set green color in the background of ImageSwitcher.

---

مثال على ViewSwitcher في Android Studio :

يوجد أدناه مثال ViewSwitcher الذي نعرض فيه ViewSwitcher مع عرضين ، أحدهما ImageView والآخر هو تخطيط لدينا فيه زر و TextView . في هذا المثال ، نستخدم أيضًا زرًا واحدًا لتبديل عرض ViewSwitcher. أولاً ، نقوم بتحميل وتعيين الشريحة في اليسار والشرائح في الرسوم المتحركة اليمنى ، وأخيرًا عندما ينقر المستخدم على الزر التالي ، سيتم تبديل ViewSwitcher بين طرق العرض والعرض الحالي وسيأتي العرض التالي مع رسم متحرك محدد.

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

تحميل الكود ؟

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

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

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

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

  <!-- ViewSwitcher with two views one is ImageView and other is LinearLayout in which we have a Button and a TextView -->
  <ViewSwitcher
  android:id="@+id/simpleViewSwitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:src="@drawable/image" />

  <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="vertical">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="LinearLayout 2" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="- Button 2 -" />


  </LinearLayout>
  </ViewSwitcher>


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

  </LinearLayout>

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

في هذه الخطوة نفتح MainActivity ونضيف الكود لبدء ViewSwitcher و Button. في هذا أولاً ، نقوم بتحميل وتعيين الشريحة في اليسار والشرائح في الرسوم المتحركة اليمنى ، وأخيرًا عندما ينقر المستخدم على الزر التالي ، سيتم تبديل ViewSwitcher بين طرق العرض والعرض الحالي وسيأتي العرض التالي مع الرسوم المتحركة المحددة.

package com.example.ip_d.viewswitcherexample;

  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.ViewSwitcher;

  public class MainActivity extends AppCompatActivity {

  private ViewSwitcher simpleViewSwitcher;
  Button btnNext;

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

  setContentView(R.layout.activity_main);

  // get The references of Button and ViewSwitcher
  btnNext = (Button) findViewById(R.id.buttonNext);
  simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher); // get the reference of ViewSwitcher
  // 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 ViewSwitcher
  simpleViewSwitcher.setInAnimation(in);
  simpleViewSwitcher.setOutAnimation(out);


  // ClickListener for NEXT button
  // When clicked on Button ViewSwitcher will switch between views
  // The current view will go out and next view will come in with specified animation
  btnNext.setOnClickListener(new View.OnClickListener() {

  public void onClick(View v) {
  // TODO Auto-generated method stub
  // show the next view of ViewSwitcher
  simpleViewSwitcher.showNext();
  }
  });
  }
  }

المخرجات :

قم الآن بتشغيل التطبيق وسترى صورة الطيور في ImageView . الآن انقر على زر التالي، وسوف نرى وجهة نظر التبديل إلى طريقة العرض 2ND.

تعديل المقال