4.7

4.7 out of 5 stars (based on 3 reviews)

Excellent67%

Very good33%

Average0%

Poor0%

Terrible0%

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

</LinearLayout>
</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: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>

و بعد از کد نویسی لایه 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

}
}

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()
        }
    }
}

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

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

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

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

لیست ویو در کاتلین | آموزش ساخت list view در کاتلین نوشته قبل

جاوا اسکریپت نوشته بعد

فرشید حبیبی

برنامه نویس موبایل، علاقه مند به سئو و وردپرس و تولید محتوا در زمینه برنامه نویسی اندروید

نوشته‌های مرتبط

کاتلین

یک نظر

ساناز دی 18, 1400 در 1:14 بعد از ظهر پاسخ

سلام
چون پروژه محور بود خیلی خوب یاد گرفتیم ممنون از کمکتون
1. sputnick01 نویسندهدی 18, 1400 در 11:03 بعد از ظهر پاسخ
  
  خواهش میکنم
زهرا خرداد 31, 1401 در 10:16 قبل از ظهر پاسخ

سلام خدا قوت
یعنی با این مطالب شما خیلی کامل لیست ویو سفارشی رو یادگرفتم.
1. فرشید حبیبی نویسندهتیر 8, 1401 در 2:16 بعد از ظهر پاسخ
  
  خیلی خیلی ممنون که باعث قوت قلب ما میشید .