لست فيو بالاندرويد قائمة متقدمة صورة + نص برمجياً

بسم الله الرحمن الرحيم

في هذا الدرس الأكثر من رائع, سوف نتعرف كيفية استخدام الصور في اللست فيو, في برمجة تطبيقات الاندرويد.

في البداية قدمنا دروس تكمل بعضها, تهتم ببرمجة اللست فيو وان شاء الله سوف نتعمق فيها أكثر وأكثر, فهي من أكثر العناصر استخداماً في تطبيقات الاندرويد.

الدروس السابقة في برمجة القائمة – اللست فيو -:

• برمجة القائمة اللست فيو بأبسط طريقة – اندرويد ستوديو
• اللست فيو مع لياوت مخصصة القائمة بالاندرويد مبسطة
• استخدام عناصر كثيرة باللست فيو قائمة تطبيقات الاندرويد برمجياً

لو لاحظتم في البداية كنا نبرمج القائمة باستخدام لياوت رئيسية تحتوي على القائمة, واكتفتي يحمل العناصر وبرمجتها, من ثم أصبح لدينا لياوت مخصصة لتنسيق العناصر, ثم أصبح لدينا ملف خاص لاضافة العناصر داخله. والآن في درس اليوم لدينا اكتفتي اخرى مخصصة لتخصيص العناصر, سواء نصوص صور إلخ. إذا مع تقدم الدروس تتقدم خبرتنا ومعلوماتنا بعنصر القائمة اللست فيو.

# معاينة لتطبيق درس اليوم :

في البداية نقوم بإضافة الصور المطلوبة لمجلد الصور – drawable – داخل مشروعنا. واستخدمت الصور التالية :

وقمت تسميتها على ترتيب معين, التسمية يجب ان تبدأ الصورة بحرف سمول باللغة الانجليزية.

كما ذكرنا في الدروس السابقة, وضعنا مصفوفة من نوع سترنج وتحتوي على نصوص العناصر صحيح !! نفسها تماماً تبقى معناً, ولكن في درس اليوم نضيف مصفوفة اخرى من نوع انتجر وفيها مسار الصور.
لكن احذر يجب أن يكون النص الأول, تابع للصورة الاولى التي يتم اضافتها, يتم قراءة العناصر من المصفوفات بالترتيب.
يعني في مصفوفة النصوص وضعت اول نص بعنوان Android إذا من مصفوفات الصور كانت القيمة الاولى هي مسار الصورة الاولى img1 .

سوف تلاحظ الكود وتشاهد بنفسك .. عموماً كي لا أطيل عليكم كثيراً سوف أسرد لكم هنا الكود المستخدم, وهو كذلك بسيط جداً نفس سابقه فقط اضافات بسيطة.

إذا لدينا الحاصل التالي :
+ اللياوت الرئيسية -activity_main.xml-: تحتوي على عنصر القائمة.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/Andrody.com"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <ListView
        android:id="@+id/list"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
    </ListView>

</LinearLayout>

+ لياوت للعنصر -text.xml-: تنسيق عنصر القائمة, تحتوي على نص + صورة.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/im"
        android:layout_margin="10dp"
        android:layout_width="50dp"
        android:layout_height="50dp" />

        <TextView
            android:layout_gravity="center"
            android:id="@+id/tv"
            android:textColor="#000561"
            android:textSize="30sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

</LinearLayout>

+ اكتفتي الرئيسية -MainActivity.java-:

public class MainActivity extends Activity {
    ListView listView ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        String[] AndRody_Name = {"Android","Ios","AndRody","Windows","Google","Ebay"};
        Integer[] AndRody_img = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,R.drawable.img6};

        ListAdapter adapter = new ListAdapter(this, AndRody_Name, AndRody_img);

        listView.setAdapter(adapter);


        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                if(position == 0){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://android.com"));
                    startActivity(i);
                }
                if(position == 1){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.apple.com/ios/"));
                    startActivity(i);
                }
                if(position == 2){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.andrody.com/"));
                    startActivity(i);
                }
                if(position == 3){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.microsoft.com/en-us/windows"));
                    startActivity(i);
                }
                if(position == 4){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("https://google.com"));
                    startActivity(i);
                }
                if(position == 5){
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.ebay.com/"));
                    startActivity(i);
                }

            }

        });



    }
}

بعض النقاط تم شرحها من الكود في الدروس الماضية, الجديد هنا : (النقاط التي سوف يتم تلوينها بنفس اللون اي تعني هي واحدة وإذا غيرت اسم احداها يجب تغير الاخرى لنفس الاسم)
String[] AndRody_Name // مصفوفة من نوع سترنج تحتوي على نصوص العناصر داخل القائمة.

Integer[] AndRody_img // مصفوفة من نوع انتجر تحتوي على مسارات الصور للعناصر داخل القائمة.

بالنسبة لـ :

ListAdapter adapter = new ListAdapter(this, AndRody_Name, AndRody_img);

في الدروس السابقة كانت ArrayAdapter وهو كلاس معرف اساسي في الاندرويد, وعرفنا داخله ( المحتوى, اللياوت, الآي دي, المصفوفة ). وهذا لا يفيد في درس اليوم, لأننا نحتاج لإضافة صور .. لذلك استخدمنا كلاس جديد مخصص نغيير فيه حسب حاجتنا.

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

وهذا الذي عرفناه هو ما طلبناه من خلال الاكتفتي المخصص, للمبتدئين يمكن صعب التعديل او فهم ما اقصده بتعريف محتويات ونقلها داخل دوال , لكن إن شاء الله سوف نشرحها جميعاً بدروس يوتيوب.

+ كلاس لتخصيص المحول -ListAdapter.java-: اسمه تماماً نفس الموجود بالاكتفتي السابق, يجب ان يتوافقا الاسمين. لأنه الاول هو نفسه لاستخدام هذا الكلاس.

public class ListAdapter extends ArrayAdapter<String> {
    private final Activity context;
    private final String[] name;
    private final Integer[] icon;

    public ListAdapter(Activity context, String[] Name, Integer[] Icon) {
        super(context, R.layout.text, Name);
        // TODO Auto-generated constructor stub

        this.context=context;
        this.name=Name;
        this.icon=Icon;
    }
    public View getView(int position,View view,ViewGroup parent) {
        LayoutInflater inflater=context.getLayoutInflater();
        View Item =inflater.inflate(R.layout.text, null,true);

        TextView txtTitle = (TextView) Item.findViewById(R.id.tv);
        ImageView Icon = (ImageView) Item.findViewById(R.id.im);

        txtTitle.setText(name[position]);
        Icon.setImageResource(icon[position]);

        return Item;

    };
}

لاحظو بالكود السابق إنه extends ArrayAdapter اي يعني مشتق من ArrayAdapter الذي كنا نستخدمه بالدروس السابقة, فنحن هنا قمنا بعمل ملف جديد واعطيناه اسم ListAdapter وجعلناه يستخدم نفس الخصائص الخاصة بـ ArrayAdapter فقط لدينا بعض التعديلات, من أجل ربط مسار الصورة الانتجر, بالصورة داخل اللياوت لعرضها.

private final Activity context;
private final String[] name;
private final Integer[] icon;

عرفنا عناصر واعطينها اسماء من عندنا, وهي العناصر التي سوف نستخدمها لطلب العنصر واعطائه النص + الصورة الخاصة به .

public ListAdapter(Activity context, String[] Name, Integer[] Icon) {
super(context, R.layout.text, Name);

استخدام هذا الكلاس الجديد يجب ان يكون معاه محتوى + مصفوفة سترنج + مصفوفة انتجر, وهكذا نحن استخدمناه بالاكتفتي الرئيسية, قمنا بتعريف داخل ما طلبه لنستطيع استخدامه.
أما بخصوص الـ super فتم تعرف داخلها المحتوى, اللياوت, مصفوفة النصوص, بناءاً عليها يتم تحديد طول/ عدد عناصر القائمة. || R.layout.text اللياوت التي تحتوي على نص وصورة.

this.context=context;
this.name=Name;
this.icon=Icon;

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

أما getView فهو المهم هنا, وهو المعرف سابقاً ولكن طلبناه هنا لنقوم بتعديلاتنا التي نريدها, ومن أجل إنشائنا كلاس جديد.

و LayoutInflater باب اخر يتم شرحه في وقت لاحق. ما يهمنا هنا : – انتبهوا جيداً ان getView لتأتي لنا بعنصر واحد, ونفس الامر يطبق على جميع العناصر.

TextView txtTitle = (TextView) Item.findViewById(R.id.tv);
ImageView Icon = (ImageView) Item.findViewById(R.id.im);

هنا تم تعريف النص الموجود داخل اللياوت الخاصة للعنصر الواحد, وتم ربطها بالنص بواسطة الآي دي ونفس الشيء مع صورة الايقونة للنص.

txtTitle.setText(name[position]);
Icon.setImageResource(icon[position]);

قلنا أو أخبرنا للنص إن يأخذ قيمة الاسم من مصفوفة الاسم, والصورة تأخذ المسار من مصفوفة الايقون. وإما position فهي لتحدد موضع واحد او مثلاً العنصر الأول هو نفسه يكون النص الاول والصورة الاولى.

+++ نحن استخدمنا مصفوفة سترنج للاسماء لانها عبارة عن نصوص , وإما انتجر لأننا وضعنا داخلها مسارات داخل المشروع وهي تدل على الصور. يوجد طرق كثيرة واستخدام انواع كثيرة ومختلفة ولكن نأخذها في مراحل متقدمة مثلاً نستطيع كذلك اخذ الاسماء مصفوفة انتجر وتكون النصوص معرفة سابقاً بالمشروع بملف السترنج مثلاً إلخ.

 

كذلك لو لاحظتم في المشروع يتم برمجة كل عنصر على حدة, في دروس قادمة سوف نتعمق أكثر وسوف نتعرف كيف بنفس الطريقة نستطيع برمجة الجميع ببرمجة عنصر واحد, اتمنى لكم الاستفادة جميعاً واعتذر على اطالة الشرح.

دعواتكم ودعمكم لنا .. وانتظرونا بكل جديد وحصري ان شاء الله والسلام عليكم 🙂