شرح ViewPager في أندرويد استديو

برنامج ViewPager التعليمي مع مثال في Android Studio خطوة بخطوة

ViewPager في Android هي فئة او كلاس  تتيح للمستخدم التنقل يمينًا ويسارًا عبر صفحات البيانات. توفر هذه الفئة وظيفة قلب الصفحات في التطبيق .

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

غالبًا ما يتم استخدام ViewPager جنبًا إلى جنب مع الجزء الذي يعد طريقة ملائمة لإدارة دورة حياة كل صفحة. تعمل فئة ViewPager مع PagerAdapter الذي يوفر الصفحات.




كود XML ViewPager الأساسي

<android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior" />

خطوات تنفيذ ViewPager

هناك ثلاث خطوات مهمة لتنفيذ ViewPager :

1.) تخطيط layout  (يحتوي على ViewPager) للنشاط الرئيسي .

2.) فئة او كلاس  FragmentPagerAdapter / FragmentStatePagerAdapter التي تتحكم في الأجزاء التي سيتم عرضها على الضربات الشديدة على الصفحة.
3.) قطع Fragments  لتظهر عند التمرير على الشاشة.


شرح PagerAdapter في ViewPager 

هناك فئة او كلاس أساسية تسمى PagerAdapter توفر المحول لملء الصفحات داخل ViewPager.

عند تنفيذ PagerAdapter ، يجب عليك المرور ب الطرق التالية كحد أدنى :

1. InstantiateItem (ViewGroup، int): يجب أن تنشئ هذه الطريقة الصفحة للموضع المحدد الذي تم تمريره إليها كوسيطة. نقوم بتضخيم inflate()   مورد التخطيط الخاص بنا لإنشاء التسلسل الهرمي لكائنات العرض ثم تعيين مورد لـ ImageView فيه. أخيرًا ، تتم إضافة العرض المتضخم إلى الحاوية (والتي يجب أن تكون ViewPager) وإعادتها أيضًا.

public Object instantiateItem(ViewGroup container, int position) {
  View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

  ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
  imageView.setImageResource(mResources[position]);

  container.addView(itemView);

  return itemView;
  }

2.  destroyItem (ViewGroup، int، Object) : يزيل الصفحة من الحاوية  container الخاصة بالموضع المحدد. قمنا ببساطة بإزالة الكائن باستخدام removeView ولكن كان بإمكاننا أيضًا استخدام removeViewAt () بتمريره إلى الموضع.

 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((LinearLayout)object);
  }

3. getCount (): يجب أن تُرجع هذه الطريقة عدد المشاهدات المتاحة ، أي عدد الصفحات التي سيتم عرضها / إنشائها في ViewPager.

public int getCount() {
  return mResources.length;
  }

4. isViewFromObject ( View, Object): الكائن الذي تم إرجاعه بواسطة InstantiateItem () هو مفتاح / معرف key/identifier . يتحقق هذا الأسلوب مما إذا كان العرض الذي تم تمريره إليه (يمثل الصفحة) مرتبطًا بهذا المفتاح أم لا. مطلوب من PagerAdapter ليعمل بشكل صحيح.

  public boolean isViewFromObject(View view, Object object) {
  return view == object;
  }

تنفيذ PagerAdapter

PagerAdapter مسؤول عن إنشاء محتوى كل صفحة. سترغب على الأرجح في استخدام أحد التطبيقين التاليين لتطبيق PagerAdapter:

استخدام FragmentPagerAdapter لتنفيذ PagerAdapter :

1. لعرض fragments المنزلقة ، يتم استخدام طريقتين من FragmentPagerAdapter ، وهما getCount () و getItem (). الأول يعرض عدد ال fragments المراد عرضها ، والثاني يستخدم لعرض الجزء الفعلي ويجب استخدامه عندما نحتاج إلى تخزين الجزء بأكمله في الذاكرة.

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

3. يعمل بشكل أفضل عندما يكون محتوى الأجزاء Fragments ثابتًا أكثر من أي شيء يتغير باستمرار أو يتم تحديثه.

4. عند استخدام FragmentPagerAdapter ، يجب أن يحتوي ViewPager المضيف على معرّف صالح. يقوم بتخزين البيانات السابقة التي تم جلبها من المحول. يخزن الجزء بأكمله في الذاكرة ويمكن أن يزيد من حمل الذاكرة إذا تم استخدام كمية كبيرة من الأجزاء في ViewPager.

كود FragmentPagerAdapter :

class ViewPagerAdapter extends FragmentPagerAdapter {
      private final List mFragmentList = new ArrayList<>();
      private final List mFragmentTitleList = new ArrayList<>();
   
      public ViewPagerAdapter(FragmentManager manager)
        super(manager);
        }
   
        @Override
        public Fragment getItem(int position) {
        return mFragmentList.get(position);
        }
   
         @Override
         public int getCount() {
         return mFragmentList.size();
          }
   
          public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
          }
   
          @Override
          public CharSequence getPageTitle(int position) {
              return mFragmentTitleList.get(position);
          }
      }

استخدام FragmentStatePagerAdapter لتنفيذ PagerAdapter :

1. كل صفحة عبارة عن fragment يتم إتلافه بمجرد عدم رؤيته للمستخدم ، أي الاحتفاظ بالحالة المحفوظة لهذا الجزء. بسبب هذا السلوك فإنه يستهلك ذاكرة أقل بكثير.

2. يأخذ القيمة الجديدة من المحول في كل مرة يتم تنفيذه. يقوم فقط بتخزين حالة fragments المحفوظة ، ويدمر جميع الأجزاء عندما تفقد التركيز.

3. يجب استخدامه عندما يتعين علينا استخدام fragments الديناميكية ، مثل الأجزاء التي تحتوي على عناصر واجهة مستخدم ، حيث يمكن تخزين بياناتها في الحالة المحفوظة. كما أنه لن يؤثر على الأداء حتى لو كان هناك عدد كبير من الأجزاء.

ملاحظة مهمة - بكلمات بسيطة ، إذا كان لدى ViewPager عدد قليل من علامات التبويب الثابتة ، قل 3 أو 4 استخدم FragmentPagerAdapter. إذا كان يحتوي على المزيد من علامات التبويب أو عدد لا نهائي من علامات التبويب ، فاستخدم FragmentStatePagerAdapter. يستخدم ViewPager بشكل أساسي لإنشاء علامات تبويب منزلقة.


شريط العنوان PagerTitleStrip

يمكنك إضافة PagerTitleStrip إلى ViewPager في تنسيق ملف xml لعرض العنوان لكل صفحة. يساعد PagerTitleStrip في تحديد الصفحات السابقة والحالية والتالية لصفحة العرض. يعرض PagerTitleStrip عناوين الصفحة التالية والحالية والسابقة لعرض النداء أعلى أو أسفل الشاشة. يحصل PagerTitleStrip على عنوان الصفحة من محول العرض.

و getPageTitle () امدادات طريقة عنوانا لقطاع عنوان الصفحة الذي يظهر في أعلى الشاشة.

@Override 
  public CharSequence getPageTitle(int position) { 
  return mFragmentTitleList.get(position); }

اختياري يمكنك أيضًا تضمين هذا الرمز في  ملف activity_main.xml :

<android.support.v4.view.PageTitleStrip
  android:id="@+id/pager_title_strip
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="top:
  android:background="#008080"
  android:paddingBottom="4dp"
  android:paddingTop="4dp"
  android:textColor="#FFFFFF"
  />

مثال ViewPager باستخدام Fragments  في Android Studio

مثال 1 - ViewPager With Fragment

يوجد أدناه المثال الأول لبرنامج ViewPager الذي سنتعلم فيه كيفية إنشاء علامات تبويب ViewPager بسيطة بأربع علامات تبويب ثابتة باستخدام FragmentPagerAdapter.

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

تحميل كود المشروع  

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

الخطوة 2 : قم بتنزيل أربع صور ، Apple و Orange و Banana و Grapes من الويب. الآن احفظ هذه الصور في المجلد  drawable في مشروعك.

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

في هذه الخطوة ، نضيف الكود لاستخدام ViewPager مع وجود علامة تبويب ثابتة في TabLayout .

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

  <android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:layout_scrollFlags="scroll|enterAlways"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

  <android.support.design.widget.TabLayout
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:tabMode="fixed"
  app:tabGravity="fill"/>
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  </android.support.design.widget.CoordinatorLayout>

الخطوة 4:  افتح src -> package -> MainActivity.java وأضف الكود التالي:

في هذه الخطوة نستخدم الطرق التالية:

tabLayout .setupWithViewPager ()  - يعيّن ViewPager إلى TabLayout .

setupViewPager ()  - يحدد عدد علامات التبويب عن طريق تعيين fragment المناسب واسم علامة التبويب.

ViewPagerAdapter  - توفر فئة المحول المخصص fragments المطلوبة لـ ViewPager.

setupTabIcons () : تمت إضافة طريقة قمت من خلالها بضبط جميع رموز علامات التبويب.

package com.abhiandroid.viewpagerexample.myapplication;

  import android.os.Bundle;
  import android.support.design.widget.TabLayout;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentPagerAdapter;
  import android.support.v4.view.ViewPager;
  import android.support.v7.app.AppCompatActivity;
  import android.support.v7.widget.Toolbar;
  import android.view.Menu;
  import android.view.MenuItem;
  import android.view.Window;
  import android.view.WindowManager;

  import java.util.ArrayList;
  import java.util.List;


  public class MainActivity extends AppCompatActivity {

  private TabLayout tabLayout;
  private ViewPager viewPager;
  private int[] tabIcons = {
  R.drawable.apple,
  R.drawable.orange,
  R.drawable.grapes,
  R.drawable.banana
  };

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);


  viewPager = (ViewPager) findViewById(R.id.viewpager);
  addTabs(viewPager);

  tabLayout = (TabLayout) findViewById(R.id.tabs);
  tabLayout.setupWithViewPager(viewPager);
  setupTabIcons();

  }
  private void setupTabIcons() {
  tabLayout.getTabAt(0).setIcon(tabIcons[0]);
  tabLayout.getTabAt(1).setIcon(tabIcons[1]);
  tabLayout.getTabAt(2).setIcon(tabIcons[2]);
  tabLayout.getTabAt(3).setIcon(tabIcons[3]);
  }
  private void addTabs(ViewPager viewPager) {
  ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
  adapter.addFrag(new AppleFragment(), "APPLE");
  adapter.addFrag(new OrangeFragment(), "ORANGE");
  adapter.addFrag(new GrapesFragment(), "GRAPES");
  adapter.addFrag(new BananaFragment(), "Banana");
  viewPager.setAdapter(adapter);
  }

  class ViewPagerAdapter extends FragmentPagerAdapter {
  private final List<Fragment> mFragmentList = new ArrayList<>();
  private final List<String> mFragmentTitleList = new ArrayList<>();

  public ViewPagerAdapter(FragmentManager manager) {
  super(manager);
  }

  @Override
  public Fragment getItem(int position) {
  return mFragmentList.get(position);
  }

  @Override
  public int getCount() {
  return mFragmentList.size();
  }

  public void addFrag(Fragment fragment, String title) {
  mFragmentList.add(fragment);
  mFragmentTitleList.add(title);
  }

  @Override
  public CharSequence getPageTitle(int position) {
  return mFragmentTitleList.get(position);
  }
  }


  }

الخطوة 5:  الآن قم بإنشاء 4 تخطيطات xml عن طريق النقر بزر الماوس الأيمن على res / layout -> New -> Layout Resource File وقم بتسميتها باسم fragment_apple.xml و fragment_orange.xml و fragment_grapes.xml و fragment_banana.xml وإضافة الكود التالي في الملفات المعنية .

fragment_apple.xml:

<RelativeLayout 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">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Apple"
  android:textSize="40dp"
  android:textStyle="bold"
  android:layout_centerInParent="true"/>

  </RelativeLayout>

fragment_orange.xml

<RelativeLayout 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"
  >

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Orange"
  android:textSize="40dp"
  android:textStyle="bold"
  android:layout_centerInParent="true"/>

  </RelativeLayout>

fragment_grapes.xml

<RelativeLayout 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">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Grapes"
  android:textSize="40dp"
  android:textStyle="bold"
  android:layout_centerInParent="true"/>

  </RelativeLayout>

fragment_banana.xml

<RelativeLayout 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"
  >

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Banana"
  android:textSize="40dp"
  android:textStyle="bold"
  android:layout_centerInParent="true"/>

  </RelativeLayout>

الخطوة 6: نحتاج الآن إلى 4 fragments ، لذلك سننشئها واحدة تلو الأخرى عن طريق النقر بزر الماوس الأيمن على مجلد الحزمة وإنشاء فئات وتسميتها باسم AppleFragment و OrangeFragment و GrapesFragment و BananaFragment وإضافة الكود التالي على التوالي.

AppleFragment.java

package com.abhiandroid.viewpagerexample.myapplication;

  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;

  public class AppleFragment extends Fragment {

  public AppleFragment() {
  // Required empty public constructor
  }

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

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
  // Inflate the layout for this fragment
  return inflater.inflate(R.layout.fragment_apple, container, false);
  }

  }

OrangeFragment.java

package com.abhiandroid.viewpagerexample.myapplication;

  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;

  public class OrangeFragment extends Fragment {

  public OrangeFragment() {
  // Required empty public constructor
  }

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

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
  // Inflate the layout for this fragment
  return inflater.inflate(R.layout.fragment_orange, container, false);
  }

  }

GrapesFragment.java

package com.abhiandroid.viewpagerexample.myapplication;

  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;

  public class GrapesFragment extends Fragment {

  public GrapesFragment() {
  // Required empty public constructor
  }

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

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
  // Inflate the layout for this fragment
  return inflater.inflate(R.layout.fragment_grapes, container, false);
  }
  }

BananaFragment.java

package com.abhiandroid.viewpagerexample.myapplication;

  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;

  public class BananaFragment extends Fragment {

  public BananaFragment() {
  // Required empty public constructor
  }

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

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
  // Inflate the layout for this fragment
  return inflater.inflate(R.layout.fragment_banana, container, false);
  }
  }

المخرج :

الآن قم بتشغيل المشروع وقم بالتمرير من اليسار إلى اليمين أو العكس لترى كيف يعمل ViewPager.


مثال ViewPager 2 في Android Studio

يوجد أدناه مثال ViewPager في Android. سنقوم بإنشاء AppCompatActivity ، وإضافة مرجع ViewPager و FragmentPagerAdapter الذي سيساعدنا على التنقل بين fragments. بعد ذلك ، سنقوم بعمل حالات من fragments التي ستتم إضافتها في المحول الخاص بنا. يحتوي Android ViewPager على إيماءات تمرير افتراضية من "شاشة" إلى أخرى.

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

كود التحميل

مثال على صفحة العرض في Android Studioالخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته AndroidViewPagerExample.

الخطوة 2 : قم بتنزيل ثلاث صور Apple و Orange و Grapes من الويب. الآن احفظ هذه الصور في المجلد drawable  في مشروعك.

الخطوة 3:  الآن افتح res -> layout -> activity_main.xml وأضف الكود التالي:

أضف ملف xml جديدًا داخل / res / layoutfolder ، باسم activity_main.xml. يجب أن يكون لدينا ملف /res/layout/activity_main.xml الذي يتكون من مخطط خطي ذي اتجاه رأسي ، يتضمن ViewPager.

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:custom="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:layout_gravity="center"
  android:background="@drawable/backround_blue"
  android:orientation="vertical">

  <android.support.v4.view.ViewPager
  android:id="@+id/pager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="center"
  tools:context=".MainActivity"/>

  </LinearLayout>

الخطوة 4 : أضف ملف xml جديد داخل / res / drawable ، مع نشاط الاسم backround_blue.xml . إنه لإعداد الخلفية.

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
  android:angle="90"
  android:endColor="#3124dc"
  android:startColor="#062539"
  android:type="linear" />
  </shape>

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

هذا هو النشاط الذي سنقوم فيه بإنشاء مثيل ViewPager وتعيين FragmentPagerAdapter الخاص به. يتم استخدامه لعرض fragments المنزلقة. يتم استخدام طريقتين من FragmentPagerAdapter ، getCount (إرجاع عدد fragments  المراد عرضها) و getItem (تُستخدم لعرض fragment الفعلي).

package com.abhiandroid.viewpagerexample;

  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentPagerAdapter;
  import android.os.Bundle;
  import android.support.v4.view.ViewPager;
  import android.support.v7.app.AppCompatActivity;

  import com.abhiandroid.viewpagerexample.myapplication1.R;

  public class MainActivity extends AppCompatActivity {

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

  ViewPager pager = (ViewPager) findViewById(R.id.pager);
  pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
  }

  private class MyPagerAdapter extends FragmentPagerAdapter {

  public MyPagerAdapter(FragmentManager fm) {
  super(fm);
  }

  @Override
  public android.support.v4.app.Fragment getItem(int pos) {
  switch (pos) {
  case 0:
  return FragmentViewPager.newInstance(getString(R.string.title_section1),    R.drawable.apple);
  case 1:
  return FragmentViewPager.newInstance(getString(R.string.title_section2), R.drawable.orange);
  case 2:
  return FragmentViewPager.newInstance(getString(R.string.title_section3), R.drawable.grapes);
  default:
  return FragmentViewPager.newInstance(getString(R.string.title_section1), R.drawable.apple);
  }
  }

  @Override
  public int getCount() {
  return 3;
  }
  }

الخطوة 6:  قم
بإنشاء تخطيط FragmentViewPager الرئيسي أضف ملف xml جديد داخل مجلد / res / layout ، باسم fragment_main.xml. يجب أن يكون لدينا  ملف /res/layout/fragment_main.xml

إنه تنسيق xml بسيط لفئة FragmentViewPager.class ، يتكون من مخطط خطي ذي اتجاه رأسي ، يتضمن عرض النص وعرض الصورة.

<LinearLayout 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="#00000000"
  android:orientation="vertical">

  <TextView
  android:id="@+id/title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:layout_marginTop="44dp"
  android:textColor="#ffffff"
  android:textSize="60dp" />

  <ImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:layout_marginTop="44dp" />

  </LinearLayout>

الخطوة 7 : قم بإنشاء الكود المصدري للجزء الرئيسي FragmentViewPager support.v4.app.Fragment

FragmentViewPager.java

package com.abhiandroid.viewpagerexample;

  /**
  * Created by abhiandroid
  */

  import android.os.Bundle;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ImageView;
  import android.widget.TextView;

  import com.abhiandroid.viewpagerexample.myapplication1.R;

  public class FragmentViewPager extends android.support.v4.app.Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  View v = inflater.inflate(R.layout.fragment_main, container, false);

  TextView tv = (TextView) v.findViewById(R.id.title);
  tv.setText(getArguments().getString("text"));

  ImageView imageView = (ImageView) v.findViewById(R.id.image);
  imageView.setBackgroundResource(getArguments().getInt("img"));

  return v;
  }

  public static FragmentViewPager newInstance(String text, int image) {

  FragmentViewPager f = new FragmentViewPager();
  Bundle b = new Bundle();
  b.putString("text", text);
  b.putInt("img", image);

  f.setArguments(b);

  return f;
  }
  }

المخرجات :

الآن قم بتشغيل المشروع وانتقد من اليسار إلى اليمين أو العكس لرؤية أسماء وصور مختلفة للفاكهة على الشاشة.