التعامل مع الـListView في الـAndroid

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

 

في هذه المقالة سنتعلم كيفية التعامل مع ListView في Android Studio و كيفية إنشائه وبنائه داخل تطبيقك.

 

 

في البداية، ما هو الـListView ؟

الـListView هو  أداة من أدوات واجهة المستخدم (View) و التي تستخدم لعرض مجموعة من البيانات من خلالها و التي بدورها تتيح ميزة الـScroll Bar. و تحديدا تستخدم في عرض البيانات التي تكون على شكل مجموعة عناصر مثل قائمة لمجموعة من الصور أو أسماء فريق كرة القدم ..الخ. علما أنه لا يكاد يوجد تطبيق في Play Store إلا ويوجد فيه الـListView بما في تلك التطبيقات الشهيرة كتطبيق Facebook فكل البوستات الموجودة في الـFacebook و التي تشاهدها في الصفحة الرئيسية عند فتح التطبيق ما هي إلا شرائح من البيانات المعروضة باستخدام الـListView و كذلك في Twitter وInstagram و غيرها.. .

 

و لذلك يعتبر الـListView من أهم الأدوات الموجودة في برنامج الـAndroid Studio  و من أكثر الأدوات استخداما في بناء التطبيقات إن لم يكن أكثرها لذلك من المهم لمبرمج التطبيقات أن يتعلم طريقة إنشائه و التعامل معه في التطبيق و ما سنقوم بعمله في هذه المقالة هو عرض قائمة للبيانات المحملة و المعالجة في المقالة السابقة و هي Top10Appsباستخدام الـListView.

 

ما هي آلية عمل الـListView؟

لإنشاء View لكل شريحة من البيانات يتطلب هذا الأمر الكثير من الوقت و المساحة من الـComputer حيث أن كل View تحتاج تقريبا اللى 1 Kb من RAM فتخيل لو تم انشاء الألاف من Views.
فهنا تكمن فائدة الـListView، حيث أنها تعمل على إعادة استخدام الـView المنشأة سابقا عندما يقوم المستخدم بالنزول أو الطلوع بالقائمة (Scrolling).
 

 تتلقى الـListView بياناتها من Adapter و الذي بدوره يقوم بتوفير البيانات و تنسيق الـView المراد عرض البيانات عليها كما هو موضح أدناه.

 

و الآن ننتقل للتطبيق في الـAndroid Studio:

 

في البداية نقوم بفتح Android Studio ثم نقوم بالضغط على File ثم Open و ننتقل الى الـProject الذي يحتوي على الملفات و الكلاسات التي تم انشاؤها في المقالة السابقة.


و الآن حتى يتم إنشاء ListView يجب علينا ما يلي:
 

• الانتقال الى ملف activity_main.xml.
• من قائمة Pallete ثم container نبحث عن الـListView و نقوم بسحبها الى Layout.
• نعدل الـID و لتكن على سبيل المثال xmlListView.
• نعدل الـMargins و التي هي: 16,16,16,16 كما هو موضح ادناه.

 

و الآن نقوم بانشاء layout حيث ان هذا الـlayout يحتوي على الـViews المراد تنسيقها ووضع البيانات بداخلها عن طريق الـAdapter:

1. من قائمة File ثم new ثم نقوم بالضغط على Layout resource file.
2. نقوم بتسميته على سبيل المثال list_record.xml.
3. نضيف اليه ثلاثة Text View من قائمة Pallete.
4. نعدل الـID لهذه الـText Views وليكن على سبيل المثال: tvName, tvArtist, tvSummary.
5. نعدل الـMargins على عحسب الرغبة.
6. نعدل الـConstraints  كما هو موضح أدناه.

 

 

و الآن حتى نقوم بانشاء الـAdapter يجب علينا ما يلي:
 

• انشاء كلاس و نسميه على سبيل المثال FeedAdapter. 
• حيث أن هذا الكلاس Extends الـArrayAdapter.
• و يحتوي أيضا على Inner Class ويسمى بالـViewHolder.

package com.example.rami.top10apps;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import java.util.List;

/**
 * Created by Rami on 2/19/2017.
 */

public class FeedAdapter extends ArrayAdapter {
    private static final String TAG = "FeedAdapter";
    private final int layoutResource;
    private final LayoutInflater layoutInflater;
    private List<FeedEntry> applications;

    public FeedAdapter(Context context, int resource, List<FeedEntry> applications) {
        super(context, resource);
        this.layoutResource = resource;
        this.layoutInflater = LayoutInflater.from(context);
        this.applications = applications;
    }

    @Override
    public int getCount() {
        return applications.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;

        if (convertView == null) {
            convertView = layoutInflater.inflate(layoutResource, parent, false);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        FeedEntry currentApp = applications.get(position);

        viewHolder.tvName.setText(currentApp.getName());
        viewHolder.tvArtist.setText(currentApp.getArtist());
        viewHolder.tvSummary.setText(currentApp.getSummary());
        return convertView;
    }

    private class ViewHolder {
        final TextView tvName;
        final TextView tvArtist;
        final TextView tvSummary;

        ViewHolder(View v) {
            this.tvArtist = (TextView) v.findViewById(R.id.tvArtist);
            this.tvName = (TextView) v.findViewById(R.id.tvName);
            this.tvSummary = (TextView) v.findViewById(R.id.tvSummary);
        }

    }
}

و لقد قمنا بعمل التالي:

• إنشاء layoutResource variable  من نوع int و الذي يحتوي على Layout الذي أنشأناه و أسميناه بالـList_record.xml.
• إنشاء layoutInflator variable من نوع LayoutInflator و الذي يقوم بتحويل الـLayout الى اوبجكت يمكن التعديل عليه.
• إنشاء applications variable  من نوع <List<FeedEntry و الذي يحتوي على البيانات المراد عرضها.
• إنشاء Constructor يتلقى الباراميترز الخاصة بالـinstance variables.
• عمل override للـmethods التالية:() getCount(), getView.
• الميثود getCount تقوم بإرجاع عدد العناصر الموجودة بالـList.
• الميثود getView يتم استدعاؤها تلقائيا من ListView عند الحاجة الى بيانات جديدة و يتم تمرير الـParameters التالية اليها: position, convertView, parent.

و تقوم هذه الميثود بعمل التالي:

1. إنشاء اوبجكت من الـViewHolder بحيث يتم تخزين الـTextViews بهذا الاوجكت لمرة واحدة.
2. حفظ هذا الاوبجكت في الـTag الخاص بالـconvertView.
3.  يتم تعديل الـTextViews وفقا للبيانات المستخرجة من الاوبجكت currentApp.

 

• بالنهاية، يتم إنشاء Inner class و تسميته بالـViewHolder.

 

من الممكن أن تتساءل ما فائدة الـViewHolder؟
كما تلاحظ يتم استدعاء الميثود findViewById لمرة واحدة في بداية تشغيل التطبيق بينما من دون هذا الكلاس سوف يتم استدعاء هذه الميثود كل ما احتاج الـListView الى بيانات جديدة.

 

و الآن نذهب الى الـInner class في الـكلاس MainActivity و الذي يسمى DownloadData، و نقوم بوضع هذا الكود ادناه في الميثود onPostExcute.

        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            Log.d(TAG, "onPostExecute: parameter is " + s);
            ParseApplications parseApplications = new ParseApplications();
            parseApplications.parse(s);

            FeedAdapter feedAdapter = new FeedAdapter(MainActivity.this, R.layout.list_record, parseApplications.getApplications());
            appList.setAdapter(feedAdapter);
        }

كم نلاحظ أعلاه:

• تم إنشاء اوبجكت من الكلاس ParseApplications و الذي بدوره يقوم بمعالجة البيانات المحملة.
• إنشاء اوبجكت من الكلاس FeedAdapter و تمرير الـarguments اللازمة للـAdapter
• و أخيرا يتم استدعاء الميثود setAdapter على الاوبجكت appList و الذي يمثل الـxmlListView.

 

و أخيرا نقوم بتشغيل البرنامج وهذه هي النتيجة النهائية.

 

و هنا وصلنا الى نهاية هذا الدرس.?
في الدروس القادمة سوف أتناول كيفية التعامل مع ملفات الـJson في الـAndroid.

كلمات دليلية: