skip to Main Content

في الأندرويد الـ Fragment  هي جزء من الـ Activity و يمكننا القول بأنها Sub-Activity. هذه الـ Fragment هي تمثل جزء من واجهة المستخدم في الـ Activity الحالية. نستطيع مثلا دمج 3 من الـ Fragments داخل Activity. و لا ننسى أن دورة حياة ال Fragment تتأثر بدورة حياة الـ Activity.

برمجياً: الـ Fragment  هي Java Class , أي أنني استطيع بناءها مثل ما يمكنني بناء أي Activity  عادية.

إذن ما الحاجة إلى الـ Fragments:

  • قبل استخدام الـ Fragments كنا نستطيع إظهار Activity واحدة فقط على الشاشة في الوقت الحالي للمستخدم, إذن كان من الصعب تقسيم الشاشة إلى عدد من الأجزاء كل جزء يؤدي مهمة معينة. و لكن مع الـ Fragments استطعنا عمل ذلك بتقسيم الـ Activity إلى عدد من الأجزاء Fragments و التحكم في كل جزء بشكل منفصل. بذلك كل Fragment  لها events و Layouts خاصة بها مثل الـ Activity تمام.

ما هي الإمكانيات المتاحة مع الـ Fragments:

  • نستطيع إضافة و حذف الـ Fragment  أثناء تشغيل الـ Activity.
  • الـ Fragment   لها Layout خاصة بها و دورة حياة مستقلة كذلكز
  • الـ Fragment  يمكن اعادة استخدامها في عدة Activities.
  • يمكننا أيضاً دمج عدد من الـ Fragment  داخل Activity واحدة.
  • يمكن أن الـ Fragment  تشكّل جزء من الـ Activity و ممكن تأخذ الـ Activity كاملة.
  • ممكن إظهار عدد من الـ Fragment  في نفس الوقت و ممكن عمل تبديل “swapping” بينها.

جلبت لكم الرسم التالي للتوضيح من هذا المصدر.

تطبيق للـ Fragments  و TabLayout

  • أنشيء مشروع جديد في الأندرويد

  • إضافة عدد 2 من الـ Fragments كالتالي:

File >> new >> Fragment >> Blank Fragment

  • سنكرر الخطوة السابقة لإضافة الـ Fragment  الثاني بإسم: “SundayFragment”
  • سنقوم ببناء Adapter مخصصة نحدد بداخلها عدد الـ Tabs  و الـ Fragments, أيضاً نعرف بداخلها عناوين الـ Tabs. لعمل ذلك نقوم بإنشاء كلاس جديدة و تسميتها FragmentAdapterSimple.java

نكتب بداخلها الكود التالي:

public class FragmentAdapterSimple extends FragmentPagerAdapter {

    private Context mContext;
    public FragmentAdapterSimple(Context context, FragmentManager fm)
    {
        super(fm);
        mContext = context;
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return new SaturdayFragment();
        } else {
            return new SundayFragment();
        }
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        if (position == 0) {
            return mContext.getString(R.string.string1);
        } else  {
            return mContext.getString(R.string.string2);
        }
    }

}
  • الآن بقي تهيئة الـ Main Activity  , و الـ XML  الخاصة بها:

في الـ activity-main.xml نقوم بإضافة أداة ViewPager للتنقل بين الـ Fragments, أيضاً أداة الـ TabLayout  لكي نضع تبويب لكل Fragment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.khadijah.fragment2.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

</LinearLayout>

نلاحظ أننا وضعنا id لكل أداة لكي نستطيع التعامل معها من الـ MainActivity.java كالتالي:

public class MainActivity extends AppCompatActivity {

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

        // Set the content of the activity to use the activity_main.xml layout file
        setContentView(R.layout.activity_main);

        // Find the view pager that will allow the user to swipe between fragments
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

        // Create an adapter that knows which fragment should be shown on each page
        FragmentAdapterSimple adapter = new FragmentAdapterSimple(this, getSupportFragmentManager());

        // Set the adapter onto the view pager
        viewPager.setAdapter(adapter);

        // Find the tab layout that shows the tabs
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);

        // Connect the tab layout with the view pager. This will
        //   1. Update the tab layout when the view pager is swiped
        //   2. Update the view pager when a tab is selected
        //   3. Set the tab layout's tab names with the view pager's adapter's titles
        //      by calling onPageTitle()
        tabLayout.setupWithViewPager(viewPager);
    }
}

 

شرح لألية تنفيذ الكود:

  • أولا عند تشغيل التطبيق يتم فتح الـ MainActivity و بداخلها الـ ViewPager layout و التي تسأل FragmentAdapterSimple.java (التي قمنا بإنشاءها و تعتبر هي مصدر البيانات للـ ViewPager) عن عدد الصفحات (Pages) ؟ و ستجد الإدابة من خلال الدالة:
@Override
public int getCount() {
    return 2;
}
  • بعدها الـ ViewPager تقوم بإظهار الـ Fragment رقم صفر و ذلك أيضاً من خلال الدالة التالية في الـ  FragmentAdapterSimple.java.
@Override
public Fragment getItem(int position) {
    if (position == 0) {
        return new SaturdayFragment();
    } else {
        return new SundayFragment();
    }
}
  • أخيرا عندما يقوم المستخدم بعمل مسح أو swipe للشاشة سيتم التنقل بين الـ Pages, و هذا أيضاً يعني أن ViewPager طلبت من الـ FragmentAdapterSimple.java الانتقال للـ Fragment التالية. و هكذا حسب الـ position الخاصة بالـ Fragment.
  •  و لا ننسى وظيفة الدالة التالية التي تحدد عناوين للـ Tabs  الخاصة بكل Fragment:
public CharSequence getPageTitle(int position) {
    if (position == 0) {
        return mContext.getString(R.string.string1);
    } else  {
        return mContext.getString(R.string.string2);
    }
}

 

النتيجة النهائية للتطبيق

يمكن أيضاً الحصول على المشروع كامل من خلال الرابط التالي على الـ GitHup

المراجع

https://guides.codepath.com/android/creating-and-using-fragments

http://developer.android.com/reference/android/app/Fragment.html

ألقاكم في درس جديد و السلام عليكم ..

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *