ماهي الـ View Recycling ؟

هي توفير مرونة في عرض مجموعة بيانات كبيرة خلال نافذة محدودة. مثلا إذا كان تطبيقك يحتاج عرض قائمة من العناصر بالاعتماد على بيانات كبيرة أو بيانات تتغير باستمرار, عندها يجب استخدام  Recucle View أو ListView كما سيتم شرحها في هذا الدرس. مثلا: قائمة جهات الاتصال الموجودة على هاتفك هي قائمة طويلة جداً و لكن ما يتم اظهاره على الشاشة جزء محدد منها فقط يمكن رؤيته و مشاهدته. و هذا المفهوم في الأندرويد الغرض منه المحافظة على موارد الجهاز كالذاكرة, و يمكن عمل الـ view Recycling  عن طريق مكونين هما: List View  و الـ Array Adapter معاً.

الصورة التالية توضح مثال لهذه القوائم التي نتعامل معها بشكل يومي على هواتفنا !

من الهام جداً عند إنشاء تطبيقات للجوال هو التفكير بشكل جيد حول موارد ذاكرة الجهاز, مثلا عندما تريد عرض مجموعة من العناصر على الشاشة مثل أسماء جهات الإتصال فإنه سيتم عرض 6 أو 7 أسماء فقط على الشاشة و بقية جهات الاتصال تبقى في الخلف و لا تستهلك ذاكرة الجهاز. هذا هو معنى الـ View Recycling أي إعادة استخدام الـ Views التي لم تعد ظاهرة على الشاشة.

تذكر دوماً أن الذاكرة محدودة على الجهاز

ما الحل ؟

الحل في استخدام الـ ArrayList كمصدر للبيانات, و من ثم ربطها بالـ ArrayAdapter و عرضها على الـ ListView.

الشكل التالي يوضح العلاقة بين المكونات الثلاث:

إنشاء المشروع

أنشيء مشروع جديد على الـ Android Studio, و بعد اضافة Empty Activity سيتم فتح التطبيق الفارغ, بداخله بالتأكيد كلاس  واحدة هي MainActivity.java بسيطة و ملف الـ XML الذي يقابلها activity_main.xml هذا كل ما تحتاجه لكي تبدأ !!.

تعديل ملف الـ XML

الان المطلوب منك تعريف ملف الـ XML, و الذي سيتم استخدامه بواسطة الـ ArrayAdapter لعرض المخرجات. الآن من نافذة المشروع في الجزء الأيسر قم بفتح ملف activity_main.xml و انسخ التالي إلى ملف الـ XML.

<?xml codeion="1.0" encoding="utf-8"?>
<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/listView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
</ListView>

تعريف مصدرcodeالـ Data Source

الآن يجب تعريف البيانات المراد اظهارها, و ذلك بإنشاء ArrayList تضم عناصر من النوع String  كل عنصر سيتم عرضه بشكل منفصل كما سنرى في نهاية تطبيق المشروع.

ArrayList<String> wordsItem = new ArrayList<>();
wordsItem.add("Yellow");
wordsItem.add("Green");
wordsItem.add("Blue");
wordsItem.add("White");
wordsItem.add("Black");

تعريف الـ ArrayAdapter

الآن نقوم بتعريف الـ ArrayAdapter و هي التي تحدد طريقة ظهور العناصرفي الـ ListView.

ArrayAdapter<String> items = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, wordsItem);

هذه الـ ArrayAdapter تستقبل ثلاث بارمترات, الثاني هو android.R.layout.simple_list_item_1 هي layout معرفة مسبقاً من خلال الاندرويد ستديو و تحتوي على TextView واحدة فقط و التي سيتم عرض البيانات من خلالها. اما البارمتر الثالث هو wordsItem و هو عبارة عن ArrayList أي مصدر البيانات التي قمت بتعبئتها مسبقا بعناصر القائمة “Yellow, green, blue ……”.

ربط الـ ListView  مع الـ ArrayAdapter

من خلال السطر التالي سيتم الوصول إلى ListView  التي قمنا بتعرفتها داخل ملف الـ XML مسبقاً

ListView list = (ListView) findViewById(R.id.listView);

و أخيراً ربط الـ ListView  مع مصدر البيانات الـ ArrayAdapter  و ذلك باستخدام الدالة setAdapter و التي سنمرر لها بارمتر و هو اسم الـ ArrayAdapter  الي قمنا بإنشائه.

list.setAdapter(items);

هذا كل شي!

الآن عند تشغيلك للبرنامج يجب أن تكون المخرجات مشابهة لما يلي.

البرنامج كامل:

1- ملف XML:

<?xml version="1.0" encoding="utf-8"?>
<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/listView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
</ListView>

2- ملف الجافا:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList wordsItem = new ArrayList<>();
        wordsItem.add("Yellow");
        wordsItem.add("Green");
        wordsItem.add("Blue");
        wordsItem.add("White");
        wordsItem.add("Black");

        ArrayAdapter items = new ArrayAdapter(this,android.R.layout.simple_list_item_1,     wordsItem);
        ListView list = (ListView) findViewById(R.id.listView);
        list.setAdapter(items);
    }
}

الآن ماذا لو أردت أن تكون عناصر القائمة تحتوي على صور أو Buttons أو icons في هذه الحالة يجب أن نقوم بعمل ما يسمى بـ Custom Array Adapter و الذي سيتم شرحه في الدرس القادم.

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