Fragments in android - مثال عملي

درس يشرح فكرة الـ fragments و فائدتها و كيفية تطبيقها بشكل عملي في تطبيق أندرويد

في الأندرويد الـ 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);
    }
}