13 – اندرويد : التنسيقات الديناميكية GridView

ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

اندرويد : التنسيقات الديناميكية GridView

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

سنتابع الحديث اليوم بشكل مختصر جدا عن ثاني التنسيقات الديناميكية المدعومة من قبل المحول adapter وهو تنسيق Grid View.

تنسيق Grid View

GridView عبارة عن ViewGroup  يقوم بعرض العناصر بشكل ثنائي الأبعاد, ضمن شبكة مزودة بشريط منزلق عند الحاجة.

gridview

يتم ادراج عناصر الشبكة بشكل ديناميكي ضمن التنسيق باستخدام ListAdapter.

من أجل التعرف على الآلية الديناميكية لادراج ال views باستخدام المحول adapter, يتوجب عليكم قراءة المقال التالي : Building Layouts with an Adapter.

 listViewAdapter0

مثال :

سوف نقوم ضمن هذه الحلقة بإنشاء شبكة من الصور المصغرة. وعندما يتم اختيار احد العناصر, سيتم عرض رسالة تحدد فيها موضع الصورة .

  1. ابدأ بإنشاء مشروع جديد وسمه HelloGridView
  2. احضر بعض الصور التي تحب استخدامها (بإمكانكم استخدام الصور التالية التي سوف نستخدمها هنا انقر للتحميل ) فك ضغط المجلد واحفظ محتويات هذا المجلد ضمن المسار التالي في المشروع res/drawable/,
  3. افتح الملف التالي res/layout/main.xml واضف الترميزالتالي إليه

·         <?xml version="1.0" encoding="utf-8"?>
·         <GridView xmlns:android="http://schemas.android.com/apk/res/android" 
·             android:id="@+id/gridview"
·             android:layout_width="fill_parent" 
·             android:layout_height="fill_parent"
·             android:columnWidth="90dp"
·             android:numColumns="auto_fit"
·             android:verticalSpacing="10dp"
·             android:horizontalSpacing="10dp"
·             android:stretchMode="columnWidth"
·             android:gravity="center"
·         />

 hello grid view

    1. سوف تملأ ال GridView كل الشاشة كما في الشكل اعلاه. وعلى ما اعتقد فإن الخصائص ضمن الترميز السابق لا تحتاج شرح فهي واضحة . للمزيد من المعلومات حول الخصائص بالإمكان مراجعة الرابط التالي GridView .
    2. افتح الملف HelloGridView.java  واضف إليها الترميز التالي للتابع (الوظيفة ) onCreate().
·         public void onCreate(Bundle savedInstanceState) {
·             super.onCreate(savedInstanceState);
·             setContentView(R.layout.main);
·          
·             GridView gridview = (GridView) findViewById(R.id.gridview);
·             gridview.setAdapter(new ImageAdapter(this));
·          
·             gridview.setOnItemClickListener(new OnItemClickListener() {
·                 public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
·                     Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
·                 }
·             });
·         }

ملاحظة : الغرض Toast عبارة عن view عائم يظهر على الشاشة ويمكن ان يحوي رسائل نصية.

في البداية يتم اسناد تنسيق main.xml  لمحتوى ال view,ومن ثم يتم التقاط ال GridView  من التنسيق عبر استخدام التابع (الوظيفة) findViewById(int).

ومن ثم يتم استخدام التابع setAdapter() بهدف اسناد نوع جديد من المحولات adapter (ImageAdapter) على انه المصدر الرئيسي لكل العناصر التي نريد عرضها ضمن الشبكة.وسيتم انشاء ال (ImageAdapter) في الخطوة التالية.

لكي نحقق حدثا ما عند النقر على احد عناصر الشبكة , فنحن نحتاج إلى التابع  setOnItemClickListener() ونمرر له مستنسخ جديد من AdapterView.OnItemClickListener. وبدوره يقوم هذا المستنسخ النكرة باستدعاء التابع onItemClick()  لاظهار Toast تقوم بعرض موقع العنصر المختار على الشاشة.

سوف ننشأ الآن صف جديد يدعى ImageAdapter وهو صف يقوم ب extend للصف BaseAdapter

1.  public class ImageAdapter extends BaseAdapter {
2.      private Context mContext;
3.   
4.      public ImageAdapter(Context c) {
5.          mContext = c;
6.      }
7.   
8.      public int getCount() {
9.          return mThumbIds.length;
10.    }
11. 
12.    public Object getItem(int position) {
13.        return null;
14.    }
15. 
16.    public long getItemId(int position) {
17.        return 0;
18.    }
19. 
20.    // create a new ImageView for each item referenced by the Adapter
21.    public View getView(int position, View convertView, ViewGroup parent) {
22.        ImageView imageView;
23.        if (convertView == null) {  // if it's not recycled, initialize some attributes
24.            imageView = new ImageView(mContext);
25.            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
26.            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
27.            imageView.setPadding(8, 8, 8, 8);
28.        } else {
29.            imageView = (ImageView) convertView;
30.        }
31. 
32.        imageView.setImageResource(mThumbIds[position]);
33.        return imageView;
34.    }
35. 
36.    // references to our images
37.    private Integer[] mThumbIds = {
38.            R.drawable.sample_2, R.drawable.sample_3,
39.            R.drawable.sample_4, R.drawable.sample_5,
40.            R.drawable.sample_6, R.drawable.sample_7,
41.            R.drawable.sample_0, R.drawable.sample_1,
42.            R.drawable.sample_2, R.drawable.sample_3,
43.            R.drawable.sample_4, R.drawable.sample_5,
44.            R.drawable.sample_6, R.drawable.sample_7,
45.            R.drawable.sample_0, R.drawable.sample_1,
46.            R.drawable.sample_2, R.drawable.sample_3,
47.            R.drawable.sample_4, R.drawable.sample_5,
48.            R.drawable.sample_6, R.drawable.sample_7
49.    };
}

في البداية قمنا بتنجيز implements  بعض التوابع الضرورية التي تتم وراثتها من BaseAdapter.

اما بالنسبة للتوابع كالباني constructor و getCount() فهي واضحة جدا.

في العادة , فإن التابع getItem(int) يعيد الغرض الفعلي ضمن الموقع المحدد ضمن المحول, ولكن تم تجاهله في هذا المثال.

وكذلك هو الحال بالنسبة للتابعgetItemId(int)  فإنه يعيد معرف سطر العنصر row id, ولكننا لا نحتاج إليه هنا.

من التوابع الضرورية في مثالنا هو التابع getView(). يقوم هذا التابع بإنشاء View جديد وذلك بالنسبة لكل صورة تمت اضافتها إلى ImageAdapter.

عندما يتم استدعاء هذا التابع, يتم تمرير View ضمن معاملات التابع , والذي هو بدوره غالبا ما يكون غرض يعاد استخدامه recycled object( على الاقل بعد ان تم استدعاءه مرة واحدة), لذلك هنالك اختبار للتحقق فيما اذا كان الغرض فارغا null. في حال كان الغرض فارغا, عندها يتم انشاء مستنسخ جديد من الغرض ImageView وتتم تهيئته بالخصائص المطلوبة لعرض الصورة.

  • setLayoutParams(ViewGroup.LayoutParams) يتم عبرها تحديد الارتفاع والعرض الخاصيين بال view- هذا يأكد على انه مهما كان حجم العنصر المطلوب رسمه, فإن كل صورة سيتم تعديل حجمها وتقصها لملأ الابعاد المحددة بالشكل المناسب.
  • setScaleType(ImageView.ScaleType) وتحدد بأن الصورة يجب ان يتم قصها باتجاه المركز( في حال كان ذلك ضروريا).
  •  setPadding(int, int, int, int) وتعرف مسافات المحاذاة من كل الجهات.

 في حال كان ال View الممرر إلى التابع getView() ليس فارغا “not null”, عندها فإن الغرض المحلي ImageView قد تمت تهيئته بالغرض View  المعاد استخدامه.

في نهاية تعريف التابع getView() , يتم تمرير رقم صحيح يمثل الموقع position  يستخدم لاختيار صورة من مصفوفة mThumbIds. والتي يتم تحديدها على انها عبارة عن مورد الصورة image resource الخاصة بالغرض ImageView .

كل ما بقي علينا هو تعريف مصفوفة mThumbIds  التي تحوي على الموارد القابلة للرسم drawable resources.

والآن سنقوم بتشغيل التطبيق وستظهر النتيجة كما يلي :

result-grid-view

جربوا الان تعديل بعض خصائص GridView و ImageView حتى تلاحظوا الفروقات التي تطرأ. على سبيل المثال , بدل من استخدام setLayoutParams(ViewGroup.LayoutParams) استخدموا setAdjustViewBounds(boolean).

ارجو لكم الفائدة

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

وإلى اللقاء في الدرس المقبل وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته.

تحوي سلسلة اندرويد المواضيع التالية :

  1. التعريف باندرويد What is Android
  2. مكونات واجهة المستخدم الاساسية في اندرويد Basic Andorid User Interface Components
  3. خطوات تثبيت اندرويد Android Install Steps
  4. بناء مشروع اندرويد
  5. تشغيل تطبيقك على اندرويد Running Your Application  
  6. بناء واجهة مستخدم بسيطة UI 
  7. تشغيل فعالية أخرى Starting another Activity
  8. بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature Converter
  9. تنسيقات واجهة المستخدم ضمن اندرويد  UI Layouts
  10. اندرويد : التنسيق الخطي LinearLayout
  11. اندرويد : التنسيق النسبي RelativeLayout

, , , , , , , , , , , , , , , , , , , , , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: