ListView in android studio

في هذه التدوينة سنتحدث عن أهم عناصر العرض التي لا يخلو تطبيق منها وهي عرض القائمة

قائمة العرض (ListView)

عرض العناصر في قائمة هو أحد التصاميم الشائعة بكثرة في تطبيقات الهواتف النقالة. يشاهد المستخدم عدد من العناصر ويستطيع الانتقال لأعلى القائمة وأسفلها down/up scroll كما هو موضح بشكل عناصر القائمة يتم عادة تنفيذ إجراء مثل فتح فعالية جديدة

إضافة البيانات الي القائمة (ListView)

لإضافة بيانات للقائمة ListView يتم عادةً استخدام المحول Adapter, وهو كائن وسيط بين عنصر العرض وهو القائمة ListViewأو أي عنصر واجهة يتفرع من الفئة class AdaperView وبين البيانات المعروضة. يتحكم المحول Adapter في الوصول لبيانات القائمة, كما أنه مسؤول عن تحويل البيانات المدخلة للقائمة إلى عنصر عرض (View) يمكن تضمينه داخل القائمة. فمثلاً, عند إداخل مصفوفة من النصوص (Array String) لعرضها في القائمة, يقوم المحول Adapter بتحويل كل عبارة نصية في المصفوفة إلى كائن من نوع TextView والذي يتم إدراجه في القائمة, أي أن مصفوفة النصوص تتحول باستخدام المحول Adapter إلى مجموعة من عناصر العرض TextView المجمعة في قائمة من نوع ListView

خصائص قائمة العرض

1.id

هو المعرف الذي يتم إعطاه الي القائمة لاستخدامها في البرمجة

2.divider

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

<!--Divider code in ListView-->
 <ListView
       android:id="@+id/list"
       android:divider="#e42a87"
       android:dividerHeight="5dp"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

3.dividerHeight:

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

4.listSelector

يتم استخدام listSelector property لتعيين محدد القائمة listView. عادةً ما يكون اللون البرتقالي أو الأزرق سماوي ، ولكن يمكنك أيضًا تحديد لونك المخصص أو صورة كمحدد قائمة حسب التصميم الخاص بك.

<!-- List Selector Code in ListView -->
 <ListView
       android:id="@+id/list"
       android:divider="#e42a87"
       android:dividerHeight="5dp"
       android:listSelector="#9b7878"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

الخرج النهائي

المحولات الإفتراضية (Default Adapter)

1. ArrayAdapter

2. CursorAdapter

ArrayAdapter يستخدم في إدخال البيانات من المصفوفة array او من القائمة list
المحول المخصص CursorAdapter يعالج البيانات المدخلة من قاعدة بيانات أو مزود المحتوى(Content Provider)
كل هذه المحولات Adapters هي فئات classes فرعية من الكلاس (subclasses) من الفئة الاساسية BaseAdapter

مثال علي القائمة

إفتح ملف res > layout > main_activity واكتب داخله الكود التالي

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/LinearLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.example.AppU.MainActivity" >
 <ListView
 android:id="@+id/listView"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" >
 </ListView>
</LinearLayout>

إفتح ملف الجافا الخاص بالنشاط واكتب داخله الكود التالي

MainActivity.java

1: public class MainActivity extends Activity {

3: @Override
4: protected void onCreate(Bundle savedInstanceState) {
5: super.onCreate(savedInstanceState);
6: setContentView(R.layout. activity_main);
7:   ListView listView = (ListView) findViewById(R.id.list);
8:        //هنا سنعرف مصفوفة جديدة تحتوي علي أسماء القائمة التي سيتم عرضها في التطبيق
9:        String[] values = {"India", "China", "australia", "Portugal", "UK", "KSA"};
10:        ListAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, values);
11:        listView.setAdapter(adapter);

13:        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
14:            @Override
15:            public void onItemClick(AdapterView parent, View view, int position, long id) {
16:                Toast.makeText(getApplicationContext(), parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
17:            }
18:        });
19:    }
20: }

شرح الكود المستخدم

7: يتم أولاً الوصول للقائمة عن طريقة الدالة findViewById()
9: إنشاء مصفوفة تحتوي علي أسماء القائمة التي سيتم عرضها
10: لادراج محتوي القائمة list داخل قائمة العرض ListView نستخدم المحول ArrayAdapter
حيث يمرر لهذا المحول ثلاثة قيم وهي
1:context وهي تحدد الصفحة التي ستظهر فيها قائمة العرض , وفي هذا المثال تم الاشارة الي الصفحة الرئيسية ب this لانها الصفحة الوحيدة التي توجد في هذا البرنامج
2:المعرف الخاص بهيكلية الصفحة android.R.layout.simple_list_item_1 وهي قائمة مجهزة من قبل فريق أندرويد ستوديو ومضمنة داخل البرنامج
3:البيانات التي ستعرض في القائمة وهي في هذا المثال عبارة عن المصفوفة التي إنشاءه سابقا
11: بعد إنشاء المحول وادخال البيانات عليه يتم تمريره الي القائمة عن طريقة الدالة setAdapter()
13:لجعل القائمة تفاعلية وعند النقر علي اي عنصر فيها تم إستخدام المستمع من نوع OnItemClickListener عند حصول الحدث يتم تنفيذ الدالة onItemClicked() والتي يمرر إليها موقع العنصر الذي تم اختياره من القائمة (ListView). يتم بعد ذلك الوصول و طباعة اسم العنصر الذي تم اختياره عن طريق الدالة getItemAtPosition(). لاحظ أن البيانات التي يتم تمريرها إلى المحول (Adapter) قد لا تكون بيانات نصية String, بل قد تكون كائن (object) من أي نوع. في حالة تمرير كائن غير نصي, يقوم المحول (Adapter) ضمنياً بتنفيذ الدالة ()toString لتمثيل الكائن كنص. لذلك احرص على تطبيق الدالة ()onString لأي كائن تقوم بإنشائه حتى تعمل القائمة )ListView( بعرض البيانات بالشكل الصحيح.
16:عبارة عن رسالة مؤقتة تعرض رسالة معينة عند النقر في احد عناصر القائمة وقد تحتوي علي اكواد مجمعة داخلها وهو يعتمد علي برمجتك للتطبيق

ملاحظة

في الدروس القادمة سنتحدث عن القائمة التي تحتوي علي نصوص وصور وازرار وعناصر اخري وهي أيضا تعرف باسم القوائم المخصصة Custom ListView