SlidingTabLayout

 

TabLayouts هي جزء من مكتبة دعم التصميم (support design library) لتوفر layout أفقي لعرض ال tabs.  وسوف نستخدم ViewPager لربط الtabs مع child view من أجل عرض الصفحة, يمكن للمستخدم اختيار الtab (الضغط عليه) أو من خلال إزاحة الشاشة.

 

**لانشاء  SlidingTabLayout نحن بحاجة الى:

1-مكتبة دعم التصميم support design library .

2-Fragments

3-View Pager Adapter

4-Toolbar(ملف xml)

5-TabLayout

6-

ViewPager

**خطوات بناء TabLayout:

1-فتح مشروع Android Studio وانشاء مشروع جديد.

2-وضع   Material Design Support Library في  ملف app/build.gradle,لا تنسى الضغط على “sync now”, كما هو موضح في الصورة أدناه.

تأكد من أن هذا ال Gradle dependency تمت اضافته الى ملف  app/build.gradle.

 

 

3-انشاء الFragments من (app > New > Fragment > fragment(Blank

يتم من خلاله تحديد محتوى ذات صلة لكل tab, وبما أن كل tab هو مجرد fragment, نحن بحاجة الى انشاء وتعريف fragments ليتم عرضها.

1-أول fragment:

—-    fragment_home.xml

 

—-    HomeFragment.java

 

 

2-ثاني fragment:

—-    fragment_second.xml

—-    secondsFragment.java

4- انشاء class ViewPagerAdapter:

يستخدم من أجل ربط الtab مع محتوى الصفحة, ويتم تنفيذه من أجل ال ViewPager, وننفذ methodـ     getItem(int position, الذي يحدد الfragment لعرضها, بناء على موقع الtabs.

 

-ViewPagerAdapter.java

 

5-انشاء ملف xml ـ(res/ layout/ toolbar_layout.xml):

-toolbar_layout.xml

 

6-انشاء ملف xml ـ(res/ layout/ main_activity.xml):

من أجل عداد أساس ال SlideTabLayout استنادا لملف الlayout التالي:

 

لاحظ أنه تم اضافة Toolbarككائن أول في عرض المحتوى الاساسي بواسطة اضافة </include>  

اضافة (xmlns:app=“http://schemas.android.com/apk/res-auto”)  في الtag الاساسي

7-انشاء ملف java ـ(java/MainActivity.java) لكتابة كود SlidingTabLayout, كما يوضح في الصورة التالية:

لتعزيز فهمك سأضع التطبيق و الأكواد الخاصة به : https://www.dropbox.com/s/5tda7shcvlik0ze/SlidingTabLayout.rar?dl=0

اقرأ الدرس التالي : Navigation Drawer