آموزش ساخت لیست ویو سفارشی (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>

<?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>

<?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;
    }
}

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;

    }

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;
    }

@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();

            }
        });
    }
}

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


            };

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 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)
            {

            }
        });

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) را به خوبی یاد گرفته باشید . از این ویجت ها در برنامه نویسی اندروید خود استفاده کنید . تا به خوبی به آن تسلط پیدا کنید .

برای امتیاز به این نوشته کلیک کنید!

[کل: 6 میانگین: 5]

اشتراک‌گذاری

آموزش کار با لیست ویو (listview)در برنامه نویسی اندروید نوشته قبل

کار با (ریسایکلر ویو )RecyclerView در برنامه نویسی اندروید نوشته بعد

فرشید حبیبی

من فرشید حبیبی هستم، یک برنامه نویس موبایل با بیش از 5 سال تجربه. من علاقه زیادی به برنامه نویسی دارم و در این زمینه به طور مداوم در حال یادگیری و پیشرفت هستم. در حال حاضر، به عنوان یک برنامه نویس اندروید در یک شرکت معتبر مشغول به کار هستم و همچنین یک وبسایت آموزشی به نام کدایت را اداره می کنم. در کدایت، به تولید محتوای آموزشی در مورد برنامه نویسی اندروید و وب می پردازیم. هدف من از ایجاد این وبسایت، کمک به سایر برنامه نویسان اندرویدی برای یادگیری و پیشرفت در این زمینه است.