لیست ویو سفارشی در کاتلین | آموزش استفاده از Custom ListView در کاتلین

لیست ویو سفارشی در کاتلین (Custom ListView) چه زمانی استفاده می شود

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

آموزش کار با لیست ویو سفارشی در کاتلین

آموزش ساخت Custom ListView در کاتلین

من طبق روال قبل با یک پروژه کوچیک این مبحث را برای شما آموزش میدم.  ابتدا وارد لایه Xml اکتیویتی خودتون بشوید و در داخل این قسمت یک listview درست کنید . مانند زیر

<?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"
    android:orientation="vertical"
    tools:context=".CustomListView">

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

بعد از این مرحله ما باید یک لایه نمونه برای listview خودمون درست کنیم . این چی ؟ یعنی اون مقادیری که ما برای لیست ویو سفارشی خودمون نیاز داریم . حالا برحسب نیاز ممکن است دارای imageview ,textview ,… باشد . برای این کار شما یک لایه Layout Resource File ایجاد کنید و کد های زیر را در آن قسمت وارد سازید . کد های زیر را بسته به نیاز خودتون میتونید تغیر بدهید . و همچنین من در این قسمت از 2 تا فونت استفاده کردم که اگر دوست داشتید می توانید از آموزش فونت در کاتلین دانلود کنید .

<?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:padding="10dp"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/Id_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:src="@mipmap/ic_launcher" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/Id_Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title"
            android:fontFamily="@font/lalezar"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/Id_description"
            android:layout_width="wrap_content"
            android:fontFamily="@font/ziba"
            android:layout_height="wrap_content"
            android:text="description"
            android:textSize="18dp"
             />

    </LinearLayout>
</LinearLayout>

و بعد از کد نویسی لایه Simple_list.Xml میریم سراغ ایجاد یک کلاس Adapter و اسم این کلاس رو MyAdapter می گذاریم . ما در این کلاس ویجیت های داخل لایه simple_list را مقدار دهی می کنیم . در واقع کلاس MyAdapter داده ها را از آرایه هایی که برای آن می فرستیم واکشی می کند و ویجت ها را مقدار دهی می کند.

package com.example.retrofit

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


class MyAdapter(
    private val context: Activity, private val title: Array<String>
    , private val description: Array<String>, private val imgid: Array<Int>
) : ArrayAdapter<String>(context, R.layout.simple_list, title) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

        val inflater = context.layoutInflater
        val rowView = inflater.inflate(R.layout.simple_list, null, true)

        val titleText = rowView.findViewById(R.id.Id_Title) as TextView
        val imageView = rowView.findViewById(R.id.Id_image) as ImageView
        val des = rowView.findViewById(R.id.Id_description) as TextView

        titleText.text = title[position]
        imageView.setImageResource(imgid[position])
        des.text = description[position]

        return rowView

    }
}

و اما کد نویسی بخش MainActivity در این قسمت ما چند آرایه درست می کنیم و آن آرایه ها را برای کلاس MyAdapter ارسال می کنیم . عکس های که در این قسمت استفاده شده است . از مقاله  <<کامپیوتر را سیر تا پیاز یاد بگیرید>> می باشد اگر مایل بودید می توانید از آن بخش تهیه کنید .

package com.example.retrofit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ListView
import android.widget.Toast

class CustomListView : AppCompatActivity() {
    val component = arrayOf<String>("CPU", "RAM", "STORAGE", "MOTHERBOARD", "GPU")
    val des = arrayOf<String>(
        "CPU اغلب به دلیل اتصال مستقیم آن به مادربرد و ارتباط با سایر اجزای کامپیوتر ، “مغز” رایانه نامیده می شود."
        ,
        "به حافظه فرار نیز معروف است ، اطلاعات مربوط به برنامه ها و فرایندهای که مدام باید به آن دسترسی داشته باشیم  را ذخیره می کند",
        "" +
                "همه کامپیوترها برای ذخیره اطلاعات خود به جایی نیاز دارند. رایانه های مدرن یا از هارد دیسک (HDD) یا از درایو حالت جامد (SSD) استفاده می کنند",
        "" +
                "مادربرد یک برد مدار چاپی در رایانه است . MotherBoard بزرگترین برد در یک کامپیوتر محسوب می شود",
        "" +
                "گیمرها روی کارت گرافیکی خود وسواس زیادی دارند زیرا این کارت های گرافیکی به رایانه ها امکان می ده"
    )
    val imageId = arrayOf<Int>(
        R.drawable.cpu,
        R.drawable.ram,
        R.drawable.storage,
        R.drawable.motherboard,
        R.drawable.gpu
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom_list_view)
        val list=findViewById<ListView>(R.id.mylist)
        val myListAdapter = MyAdapter(this,component,des,imageId)
        list.adapter = myListAdapter

        list.setOnItemClickListener(){adapterView, view, position, id ->
            val itemAtPos = adapterView.getItemAtPosition(position)
            val itemIdAtPos = adapterView.getItemIdAtPosition(position)
            Toast.makeText(this, "Click on item at $itemAtPos its item id $itemIdAtPos", Toast.LENGTH_LONG).show()
        }
    }
}

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