Grid Layout Material Design

مقال اليوم عن كيفية عرض صور بأستخدام الماتيريال ديزان Material Design  RecyclerView – Card View  كما بالفيديو

في البداية لابد وأن يكون build gradle  وخاصة المكتبات بال dependencies كالتالي

لتعريف الأكتفتي داخل ملف  manifest.xml

داخل مجلد values هننشئ ملف colors وبها الألوان التالية يمكنك تغيرها إلى الألوان التي تريدها

colors.xml

 بنفس المجلد بداخل ملف styles هنضيف الكود الخاص بأستخدام الألوان السابق تحديدها  كالتالي

styles.xml

بداخل مجلد drawable هيتم وضع مجموعة من الصور التي ترغب في عرضها

كما رأينا بالفيديو يظهر صورة ونص في كل كارد لأنشائهم لابد من إنشاء كلاس جافا عادية بها getter – setter لأضافة الصور والتصوص المختلفة من خلال أوبجكت

AnimalsNames.java

 لأنشاء كل كارت من الكروت هيتم إنشاء صفحة خاصة فيها نضع كارت وبداخله صورة ونص بنفس الأبعاد المستخدمة هنا يمكنك تغيرها على حسب المساحة التي ترغبها ليظهر الكارت  كالتالي

grid_item.xml

 ليظهر بالشكل التالي

2015-05-08_18-37-04

 ليظهر الشكل النهائي على الصفحة الرئيسية كما رأينا بالفيديو لابد من وجود adapter ليتم فيه إعداد الصور والنصوص وربطه مع صفحة التصميم

لحفظ الصور والنصوص هننشئ ArrayList  من AnimalsNames

 لأدخال الصور والنصوص من خلال setter

 هيتم ربطها مع ملف التصميم من خلال ونرسله الى كلاس هيتم إنشائها

 داخل الكلاس هيتم أخذ ال id لكل من الصورة والنص

 داخل الميثود هيتم أخذ الصور والنصوص من ArrayList ووضعها بداخل ImageView – TextView

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

GridAdapter.java

 بداخل MainActivity هيتم عمل أوبجكت من

 داخل الميثود

هيتم ربطها مع ملف التصميم

هنستدعي RecyclerView من خلال

 هنحدد عدد الأعمدة التي ستظهر في grid وهنا العدد 2  من خلال

 يمكننا تغيرها إلى 3 أو 4 ليظهر بالشكل التالي

2015-05-08_18-56-452015-05-08_18-58-11 لربطها مع ال adapater

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

MainActivity.java

بداخل ملف التصميم هنضع   RecyclerView

activity_main.xml

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

2015-05-08_18-23-54لتحميل المشروع جروب عرب أندرويد

 

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

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

اترك تعليقاً

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