Tab Layout with Swipeable Views

السلام عليكم ورحمة الله وبركاته

انهاردة هنعرف ازاى نعمل Tab Layout

وازاى نتنقل بين Fragments عن طريق

اللمس الى اليمين او اليسار داخل نفس Activity

او

الضغط على Tab الخاص ب Fragment

 

 

Tabs-Illustration

 

اولا نقوم بإنشاء مشروع جديد

ثم نعدل ملف activity_main.xml

بحيث اننا هنضيف

ViewPager

وهو المسئول عن تحريك الصفحات

2 Buttons

عندما نقوم بالضغط على اى منهم , تتحرك الصفحات الى اليمين او اليسار

الان سنقوم بإنشاء تصميم fragments والتى سوف تظهر من خلال ViewPager

نقوم بإنشاء ملف xml جديد بإسم fragment_games.xml

 

نقوم بإنشاء ملف xml جديد بإسم fragment_movies.xml

 

نقوم بإنشاء ملف xml جديد بإسم fragment_top_rated.xml

الان سنقوم بإنشاء class جديد بإسم TabsPagerAdapter والذى يُستخدم فى تزويد tabs ب fragment view

 

الان سنقوم بأنشاء class جديد بإسم GamesFragment بحيث عندم يتم الضغط على tab الخاص ب games , يتم تنفيذ الكود بداخل هذا class

 

الان سنقوم بأنشاء class جديد بإسم MoviesFragment

 

 

الان سنقوم بأنشاء class جديد بإسم TopRatedFragment

يبقى فقط تجهيز الملف الرئيسى MainActivity.java
وسنقوم بإضافة الاتى له :

سنقوم بإنشاء tabs واظهارها واضافة اسمائها وربطها ب classes التى تم انشائها سابقا

سنقوم بإنشاء event handler الخاص ب viewPager عندتحريك اى fragment يقوم بتغير شكل tab الخاص ب fragment التى ظهرت

 

سنقوم بإنشاء event handler الخاص ب buttons عند الضغط عليهم لتحريك fragments الى اليمين او اليسار

 

نقوم بإضافة ميثود جديدة تقوم بتحريك fragment الى اليمين عند استدعائها

 

نقوم بإضافة ميثود جديدة تقوم بتحريك fragment الى اليسار عند استدعائها

حتى الان عندما نقوم نتحريك الشاشة باللمس , سوف تتحرك بشكل جيد , ولكن اذا ضغطنا على tabs لن يحدث شئ

لكى تتغير fragments من خلال الضغط على tabs , نقوم بالتعديل التالى

تم الانتهاء من الكود وعند Run سيعمل بشكل صحيح ان شاء الله

 

 

Screenshot_2015-01-29-16-37-46[1]

Screenshot_2015-01-29-16-37-52[1]

Screenshot_2015-01-29-16-38-01[1]

 

 

لتحميل الكود كاملا من هنا 

http://www.mediafire.com/download/lyf3fday3689fzn/viewPager.rar

يرجي تقييم الموضوع

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

Comments

comments

اترك تعليقاً

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