امروز نیز در سری دیگر از آموزش کاتلین خدمت شما عزیزان هستیم . امروز هدف ما این هست که لیست ویو سفارشی در کاتلین (Custom ListView در کاتلین ) را خدمت شما عزیزان آموزش دهیم .
لیست ویو سفارشی در کاتلین (Custom ListView) چه زمانی استفاده می شود
ما در آموزش لیست ویو سفارشی در جاوا نیز خدمت شما عرض کردیم که Custom ListView چه مواقعی مورد استفاده قرار می گیرد . ولی دوباره برای شما عزیزان توضیح خواهم داد. ما در مواردی نیاز پیدا می کنیم که لیستی از آیتم ها با اطلاعات تکمیلی اعم از تصویر ، عنوان و توضیحات و هر چیزی که نیاز داشته باشیم را استفاده کنیم . در این مواقع ما دیگر نمی توانیم از یک لیست ویو ساده استفاده کنیم . و باید یک لایه نمونه برای لیست ویو خودمون طرحی کنیم .
آموزش کار با لیست ویو سفارشی در کاتلین
آموزش ساخت Custom ListView در کاتلین
من طبق روال قبل با یک پروژه کوچیک این مبحث را برای شما آموزش میدم. ابتدا وارد لایه Xml اکتیویتی خودتون بشوید و در داخل این قسمت یک listview درست کنید . مانند زیر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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 تا فونت استفاده کردم که اگر دوست داشتید می توانید از آموزش فونت در کاتلین دانلود کنید .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?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 داده ها را از آرایه هایی که برای آن می فرستیم واکشی می کند و ویجت ها را مقدار دهی می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 ارسال می کنیم . عکس های که در این قسمت استفاده شده است . از مقاله <<کامپیوتر را سیر تا پیاز یاد بگیرید>> می باشد اگر مایل بودید می توانید از آن بخش تهیه کنید .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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 در کاتلین ) به پایان رسید و اما خروجی کد های بالا به شکل زیر می باشد .
سلام
چون پروژه محور بود خیلی خوب یاد گرفتیم ممنون از کمکتون
خواهش میکنم
سلام خدا قوت
یعنی با این مطالب شما خیلی کامل لیست ویو سفارشی رو یادگرفتم.
خیلی خیلی ممنون که باعث قوت قلب ما میشید .