Sliding Menu using Navigation Drawer

موضوعنا اليوم كيف يمكننا أن نشئ قائمة منزلقة ونستطيع التنقل بداخلها كما بالفيديو

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

عمل ملف خاص بالألوان لأستخدامه في ملفات التصميم ولأنشائه

 2015-01-27_7-01-48

ثم نكتب الألوان كالتالي :-

color.xml

داخل ملف strings  يتم كتابة كل المسميات بالأضافة لعمل arrays كالتالي للصور ولقائمة التنقل

strings.xml

داخل res ⇒ layout

هيتم إنشاء ملفين تصميم .

الملف الأول :

أستخدام DrawerLayout لتكون الحاوية المستخدمة

استخدام FrameLayout لعرض محتويات Fragments

أستخدام Listview لعرض محتويات القائمة

activity_main.xml

الملف الثاني هيستخدم في تحديد كل صف من صفوف List  ليكون بكل صف

icon – title – counter 

drawer_list_item.xml

داخل مجلد res ⇒ drawable  وبأستخدام ملف color

هيتم إنشاء أربع ملفات xml لتحديد الشكل العام لظهور ListView

أول ملف list_item_bg_normal.xml ليظهر شكلها في الوضع العادي طبقاً للملف ده

ثاني ملف list_item_bg_pressed.xml  ليظهر شكلها في حالة الضغط عليه

ثالث ملف وهو يضم الملفين السابقين  list_selector.xml

رابع ملف لضبط زوايا المستطيل يتم إنشاء ملف بنفس المكان counter_bg.xml

ننشيء  NavDrawerItem.java

وفيها تعريف

تستخدم في حالة إذا كان لا نريد إظهار العداد لل List معينة

الكود النهائي

ننشيء NavDrawerListAdapter.java فيها يتم ربط بملف .drawer_list_item

ثم يتم أخذ Id

أسترجاع النص والصورة ووضعهما في imgIcon- txtTitle

يتم عمل أختبار إدا كان العداد مرئي أو لا يتم عرضه في txtCount أو إخفائه في النهاية يتم إرجاع convertView

 NavDrawerListAdapter.java

نبدأ العمل داخل MainActivity.java

أولاً نبدأ بعمل أوبجكت من NavDrawerListAdapter وإضافة عناصر القائمة

ثانياً هنضيف ال adapter ل Drawer ListView

ثالثاً هنضيف إيفنت لكل عنصر من عناصر القائمة

رابعاً عمل وعرض fragment عند اختيار عنصر من عناصر القائمة

داخل الكلاس تم تعريف المتغيرات المختلفة هيتم تحميل العنوان والأيقونات من ملف المسميات

هيتم أستدعاء الميثود invalidateOptionsMenu()

في كل من onDrawerOpened() and onDrawerClosed()

لعرض وأخفاء action bar icons عند التنقل

لأضافة إيفنت على كل عنصر من عناصر الليست

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

تحديث للعنوان والمكان وفي النهاية بيغلقه
أو يظهر رسالة في اللوج
 الكود النهائي

لعرض كل عنصر من عناصر الليست هيتم إنشاء Fragment لكل العناصر وعلى سبيل المثال

حيث يتم ربطها بملف التصميم كالتالي

HomeFragment.java

وعمل صفحة تصميم خاصة بها

 fragment_home.xml

بنفس الطريقة هيتم إنشاء كل الملفات الخاصة بباقي العناصر لكل من الجافا والتصميم وربطها بنفس الطريقة

 

لتحميل المشروع من هنا

 

 

 

 

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

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

الوسوم

3 تعليقات علي “Sliding Menu using Navigation Drawer

  1. ازاي اخلي emulator يتعرض بشكل افقي وليس رأسي زي اللي موجود في الفيديو اللي فوق عشان بيظهر عندي دايما بشكل رأسي يعني ازاي اخلى الشاشة تظهر بالعرض وليس الطول

اترك تعليقاً

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