Sliding Tab Material Design

تكملة للسلسة التي بدأنها عن Material Design مقالنا اليوم عن كيفية عمل tab Sliding وهسنتخدم

tool bar

Fragment

SlidingTabLayout

ViewPager

الأصدار المستخدم هو 5.0 أو Api 21

ليظهر الشكل النهائي كالتالي

لابد من إضافة المكتبات الآتية داخل build.gradle وإلا ستواجه مشاكل في التشغيل

 

داخل مجلد values هننشئ ملف colors.xml وفيه يتم تحديد الألوان التي ستسخدم كالتالي

ملف styles وتم أستخدام الألوان الموجودة بالملف السابق

ملف Strings للمسيمات

ملف Manifest لتعريف الأكتفيتي

 لأنشاء شريط الأدوات هننشئ ملف tool_bar.xml داخل مجلد layout  ويتم أضافته لكل أكتفتي بالتطبيق داخل كل من  ملف التصميم أو ملف الجافا ليظهر في كل شاشات التطبيق

لدي ست tabs تم أنشائهم من خلال عملFragment وهيكون هنالك ملف خاص بالجافا ويوضع في المجلد الخاص بملفات الجافا وملف خاص بالتصميم وهنا نعرض لمثال وبنفس الطريقة تنشئ باقي الملفات الست

ملف الجافا Tab1 كل ما فيه ربطه بملف التصميم

 ملف التصميم tab1 به نص الشاشة الأولي ترحب بك يتم تغير الجملة مع تغيير الشاشات

 داخل مجلد res هننشئ مجلد color وهو عباره عن Android resource file   بداخله هننشئ ملف selector.xml وفيه يتم تحديد الألوان المختلفة التي ستظهر للمستخدم عند الضغط على اي تاب من التابات وفي الحالات المختلفة وتم تحديد اللون الأبيض في كل الحالات يمكنك تغيره إلى أي لون أخر

أنتهينا من معظم الأعدادت باقي جزء علينا أكمله ليظهر الشكل الذي شاهدنه بالفيديو

 لابد من إنشاء هام جداً ViewPager adapter .java وهو الملف الذي يتم فيه تحديد أماكن كل من التابات الست كالتالي

ملفين أساسين ويتم إضافتهم داخل المجلد الخاص بملفات الجافا  سنتخدمهم  ولن نجري أي تعديلات عليهم إلا تعديل بسيط

داخل SlidingTabLayout.java  يمكنك تغير الخط كما تريد

 الملف الأول SlidingTabLayout

 الملف الثاني SlidingTabStrip.java

الشاشة الرئيسية وهي activity_main أو صفحة التصميم 

1- إضافة ملف tool_bar  ليظهر شريط الأدوات بها

2- إضافة SlidingTabLayout وذلك لعرض tabs الست

3- تم إضافة ViewPager لعرض الصفحات الست الخاصين بال tabs 

activity_main

أخيراً ملف MainActivity.java وفيه تم عمل أوبجكت من كل من

إنشاء أسماء tabs

تحديد عددهم

 تحديد شريط الأدوات ليكون هو الشريط المعروض بالأكتفيتي

 ربط activity and adapter و إرسال  عدد وأسماء tabs إلى adapter

 ال Id الخاص ViewPager وربطه بال adapter

 ال id الخاص بال tabs وتحديد العرض المخصص لها ليكون عرض ثابت على حسب المساحة المتاحة

 تحديد لون ال tabs بالون الموجود بملف color

 ربط tabs ب SlidingTabLayout بملف التصميم

 الكود النهائي MainActivity.Java

 

 ليظهر الشكل النهائي كالتالي t

t2

لتحميل المشروع جروب عرب أندرويد

 

 

 

 

 

 

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

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

الوسوم

اترك تعليقاً

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