آموزش ساخت لیست ویو سفارشی (Custom ListView) در برنامه نویسی اندروید

لیست ویو سفارشی (Custom ListView) : شاید برای همه شما اتفاق افتاده باشد که بخواهید یک لیست از آیتم های مختلف را به نمایش بگذارید.مثلا لیستی از اطلاعات افراد اعم از نام ،نام خانوادگی ،شماره تلفن و عکس شخص و خیلی چیزهای دیگر برای این کار ما نمی توانیم  از لیست ویو (listview ) ساده استفاده کنیم .

به خاطر همین امر از لیست ویو سفارشی (Custom ListView) استفاده می کنیم. بعد ها ما یادمی گیریم از RecyclerView ها هم برای این کار استفاده کنیم. که کار ما با RecyclerView به مراتب راحتر از لیست ویو سفارشی  می باشد . ولی ما به عنوان یک برنامه نویس موبایل باید همه ای ویجت ها رو بلد باشیم .  

 لیست ویو سفارشی (Custom ListView)

ما در این پروژه از دوتا لایه استفاده کرده ایم . اولی لایه اصلی ما هست که شامل ListView  است که به صورت پویا با مقادیری که ما خواهیم داد پر می شوند. و یک لایه هم برای  آیتم های ListView خود طراحی کرده ایم. اسم آن را sample_item می گذاریم .

لایه activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</LinearLayout>

در کدی که در قسمت بالا مشاهده می کنید و مربوط به لایه activity_main.xml است ما یک ListView  گذاشتیم و Id آنرا “myList” قرار داده ایم.

sample_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="25dp">


        <TextView
            android:id="@+id/sample_id_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="نام"
            android:textSize="18dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/sample_id_lastname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/sample_id_name"
            android:layout_marginTop="10dp"
            android:text="نام خانوادگی "
            android:textSize="18dp"
            android:textStyle="bold" />


        <TextView
            android:id="@+id/sample_id_phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/sample_id_lastname"
            android:layout_marginTop="10dp"
            android:text="شماره تلفن"
            android:textSize="18dp"
            android:textStyle="bold" />


        <ImageView
            android:id="@+id/sample_id_image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/image4" />


    </RelativeLayout>

</LinearLayout>

در کد بالا ما برای هر آیتم از ListView خود سه تا TextView و یک ImageView  طراحی کردیم .که به ترتیب شامل نام و نام خانوادگی و شماره تلفن و یک Image View  می باشد . که برای اینکه درک بهتری داشته باشید عکس زیر به شما کمک می کند.

آیتم های ListView

حالا ما باید یک کلاس درست کنیم و به اختیار ما اسم  CustomListView را برای آن انتخاب کردیم . که از ArrayAdapter ارث بری می شود. کد این بخش به صورت زیر می باشد که بخش های مختلف آن را برای شما توضیح می دهیم. 

اکتیویتی Custom ListView :

package com.example.farshid.list2;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomListView  extends ArrayAdapter<String> {
    private final Activity context;
    private final String[] name;
    private final String[] lastname;
    private final String[] phone;
    private final Integer[] imageId;

    public CustomListView(Activity context, String[] name, String[] lastname, String[] phone, Integer[] imageId) {
        super(context, R.layout.sample_item,name);
        this.context = context;
        this.name = name;
        this.lastname = lastname;
        this.phone = phone;
        this.imageId = imageId;

    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {

        LayoutInflater inflater = context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.sample_item, null, true);

        TextView name2 = (TextView) rowView.findViewById(R.id.sample_id_name);
        TextView lastname2 = (TextView) rowView.findViewById(R.id.sample_id_lastname);
        TextView phone2 = (TextView) rowView.findViewById(R.id.sample_id_phone);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.sample_id_image);
        name2.setText(name[position]);
        lastname2.setText(lastname[position]);
        phone2.setText(phone[position]);

        imageView.setImageResource(imageId[position]);
        return rowView;
    }
}

توضیح کد قسمت اول:

public CustomListView(Activity context, String[] name, String[] lastname, String[] phone, Integer[] imageId) {
        super(context, R.layout.sample_item,name);
        this.context = context;
        this.name = name;
        this.lastname = lastname;
        this.phone = phone;
        this.imageId = imageId;

    }

ما در اینجا  یک کلاس سازنده CustomListView درست کردیم . که پنج تا پارامتر می گیرد اولین پارامتر سازنده activity و پارامتر دوم تا چهارم شئ ای از آرایه String و پارامتر آخر شئ ای از آرایه Integer است . تا آرایه های اسامی را که از Activity Main فرستاده ایم را دریافت کند .و در این کلاس جایگذاری کنیم .

توضیح کد قسمت دوم:

 @Override
    public View getView(int position, View view, ViewGroup parent) {

        LayoutInflater inflater = context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.sample_item, null, true);

        TextView name2 = (TextView) rowView.findViewById(R.id.sample_id_name);
        TextView lastname2 = (TextView) rowView.findViewById(R.id.sample_id_lastname);
        TextView phone2 = (TextView) rowView.findViewById(R.id.sample_id_phone);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.sample_id_image);
        name2.setText(name[position]);
        lastname2.setText(lastname[position]);
        phone2.setText(phone[position]);

        imageView.setImageResource(imageId[position]);
        return rowView;
    }

و اما این قطعه کد که مهمترین بخش می باشد .یک View به ListView ما اضافه می کند . و سه تا پارامتر می گیرد اولین پارامتر موقعیت View را در ListView ما مشخص می کند ‌. دومین پارامتر که جای View ما قرار میگیرد و اما قسمت سوم که Viewgroup است . این پارامتر یه View خاص است و زیر شاخه های خود را صدا میزند.
و اما در داخل این متد ما با استفاده از LayoutInflater می توانیم متد هارا به صورت پویا حذف و یا اضافه کنیم . ما در این بخش TextView ها و ImageView های خود را که در Sample_item است را تعریف می کنیم .
 و با استفاده از آرایه String هایی که گرفته ایم و همچنین آرایه Integer برای عکس ها مقدار دهی می شود. در اینجا کار ما با کلاس CustomListView تموم شد.

MainActivity :

package com.example.farshid.list2;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    ListView list;
    String[] name =
            {
                    "ali",
                    "Reza",
                    "mohammad",
                    "mohammadReza"

            };
    String[] lastname =
            {
                    "habibi",
                    "farahani",
                    "faraji",
                    "habibi"

            };
    String[] phone =
            {
                    "09357132958",
                    "09357132954",
                    "09149875412",
                    "09145452445"

            };
    Integer[] imageId =
            {
                    R.drawable.image1,
                    R.drawable.image2,
                    R.drawable.image3,
                    R.drawable.image4


            };

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

        CustomListView adapter = new CustomListView(MainActivity.this, name,lastname,phone,imageId);

        list = (ListView) findViewById(R.id.mylist);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override

            public void onItemClick(AdapterView <? > parent, View view,
                                    int position, long id)
            {
//                Toast.makeText(MainActivity.this, "You Clicked at " + web[+position], Toast.LENGTH_SHORT).show();

            }
        });
    }
}

توضیح کد قسمت 4:

 String[] name =
            {
                    "ali",
                    "Reza",
                    "mohammad",
                    "mohammadReza"

            };
    String[] lastname =
            {
                    "habibi",
                    "farahani",
                    "faraji",
                    "habibi"

            };
    String[] phone =
            {
                    "09357132958",
                    "09357132954",
                    "09149875412",
                    "09145452445"

            };
    Integer[] imageId =
            {
                    R.drawable.image1,
                    R.drawable.image2,
                    R.drawable.image3,
                    R.drawable.image4


            };

همان طور که در کد بالا مشاهده می کنید ما آرایه های name,lastname ,phone , imageid را درست کردیم. که قرار است در ListView ما نمایش داده شود. 

توضیح کد قسمت 5:

 CustomListView adapter = new CustomListView(MainActivity.this, name,lastname,phone,imageId);

        list = (ListView) findViewById(R.id.mylist);
        list.setAdapter(adapter);

بعد یک نمونه از کلاس CustomListView ساختیم و یکContext به همراه آرایه های خود را به آن دادیم . و توسط SetAdapter به ListView خود Set کردیم.

توضیح کد قسمت 6:

        list.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override

            public void onItemClick(AdapterView <? > parent, View view,
                                    int position, long id)
            {

            }
        });

 اما این قسمت که خیلی کاربردی می باشد شاید بخواهید روی هر آیتم از لیست ویو (ListView) که کلیک میکنید .وارد activity جدیدی بشویم و یک سری اطلاعات تکمیلی را مشاهده کنیم . ویا این که بخواهیم موقع کلیک روی آن آیتم از لیست ویو (ListView) یه پیغامی به نمایش درمی آید.
  و اما نتیجه نهایی که به شکل زیر است و ما یک لیست شامل اسامی افراد به همراه شماره تلفن و عکس هر شخص نمایش می دهیم .

Custom ListView

در اینجا آموزش لیست ویو سفارشی و یا CustomListView به پایان رسید . الان شما باید هم ListView ساده  و هم لیست ویو سفارشی (Custom ListView) را به خوبی یاد گرفته باشید . از این ویجت ها در برنامه نویسی اندروید خود استفاده کنید . تا به خوبی به آن تسلط پیدا کنید .