Sun. Aug 7th, 2022

Materi ini membahas tentang Listview, Adapter. Layout Listview merupakan layout dalam bentuk list. sebagai contoh aplikasi musik di mana, ada layout list-list lagu yang akan diputar. sebagai gambaran dapat dilihat pada gambar di bawah ini.

gambar di atas merupakan kombinasi Listview dengan image serta TextView. adapun untuk membuat layout tersebut sebagai berikut:

Buat Layout Sebelah Kiri Gambar (ImageView) dan Kanan TextView (lstvw.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="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iconIv"
        android:src="@color/colorAccent"
        android:layout_width="80dp"
        android:layout_height="80dp" />
    <LinearLayout
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
        <TextView
            android:id="@+id/titleTv"
            android:text="Title"
            android:textSize="15sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/descTv"
            android:text="Description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

kemudian pada layout main_activity.xml berupa 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"
    tools:context=".MainActivity">

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

</LinearLayout>

Setelah itu copy paste gambar ke folder drawable

buat class model.kt

package a.riki.cobahello

class Model(val title:String, val desc:String, val photo:Int )

Kemudian buatlah class adapternya (MyListAdapter.kt) yang berhubungan dengan class Model

package a.riki.cobahello

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView

class MyListAdapter(var mCtx:Context , var resource:Int,var items:List<Model>)
    :ArrayAdapter<Model>( mCtx , resource , items ){




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

        val layoutInflater :LayoutInflater = LayoutInflater.from(mCtx)

        val view : View = layoutInflater.inflate(resource , null )
        val imageView :ImageView = view.findViewById(R.id.iconIv)
        var textView : TextView = view.findViewById(R.id.titleTv)
        var textView1 : TextView = view.findViewById(R.id.descTv)


        var person : Model = items[position]

        imageView.setImageDrawable(mCtx.resources.getDrawable(person.photo))
        textView.text = person.title
        textView1.text = person.desc


        return view
    }

}

Setelah itu coding class MainActivity.kt yang menghubungkan dengan class MyListAdapter

package a.riki.cobahello

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ListView
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    lateinit var listView : ListView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)
        listView = findViewById(R.id.listView)
        var list = mutableListOf<Model>()

        list.add(Model("Riki A",   "Description One...",   R.drawable.riki  ))
        list.add(Model("Java",   "Description Java...",   R.drawable.java ))
        list.add(Model("C++", "Description C++...",  R.drawable.cplusplus ))
        list.add(Model("Kotlin",  "Description Kotlin...",  R.drawable.kotlin ))
        list.add(Model("Flutter",  "Description Fluter...",   R.drawable.flutter   ))

        listView.adapter = MyListAdapter(this,R.layout.lstvw,list)

        listView.setOnItemClickListener{parent, view, position, id ->

            if (position==0){
                Toast.makeText(this@MainActivity, "This is Riki",   Toast.LENGTH_SHORT).show()
            }
            if (position==1){
                Toast.makeText(this@MainActivity, "This is Java",   Toast.LENGTH_SHORT).show()
            }
            if (position==2){
                Toast.makeText(this@MainActivity, "This is cplusplus", Toast.LENGTH_SHORT).show()
            }
            if (position==3){
                Toast.makeText(this@MainActivity, "This is Kotlin",  Toast.LENGTH_SHORT).show()
            }
            if (position==4){
                Toast.makeText(this@MainActivity, "This is Flutter",  Toast.LENGTH_SHORT).show()
            }
        }

    }
}