iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

Kotlin Android 30天,從 0 到 ML (Machine Learning)系列 第 19

Kotlin Android 第19天,從 0 到 ML - RecyclerView 動態列表

  • 分享至 

  • xImage
  •  

前言:

   RecyclerView 可以輕鬆高效地顯示大量數據。
   RecyclerView回收這些單獨的元素。當一個項目滾出屏幕時, RecyclerView 不會破壞它的視圖。	

大綱 :

RecyclerView 的步驟

build.gradle(app)

dependencies {
 implementation "androidx.recyclerview:recyclerview:1.2.1"
}

adapter and view holder

class Day19Adapter(private val dataSet: List<String>) :  
                          RecyclerView.Adapter<Day19Adapter.ViewHolder>() {

/**
 * Provide a reference to the type of views that you are using
 * (custom ViewHolder).
 */
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    val dataView: TextView
    init {
        dataView = view.findViewById(R.id.textView4)
    }

}

// Create new views (invoked by the layout manager)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    // Create a new view, which defines the UI of the list item
val v = LayoutInflater.from(parent.context).inflate(R.layout.item, parent, false)

    return ViewHolder(v)
}

// Replace the contents of a view (invoked by the layout manager)
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    // Get element from your dataset at this position and replace the
    // contents of the view with that element
    holder.dataView.text = dataSet[position]
    holder.itemView.setOnClickListener { 
    Toast.makeText(it.context, "第 $position 項被按下", Toast.LENGTH_SHORT).show() }
}

// Return the size of your dataset (invoked by the layout manager)
override fun getItemCount(): Int {
    return dataSet.size
 }
}

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50dp">

<ImageView
    android:id="@+id/imgV"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:srcCompat="@drawable/logo"
    android:layout_margin="5dp"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_gravity="center"/>

<TextView
    android:id="@+id/textView4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentEnd="true"
    android:layout_marginStart="16dp"
    android:layout_toEndOf="@+id/imgV"
    android:text="GDG Taipei"
    android:gravity="center_vertical"
    android:textSize="24sp"/>
 </RelativeLayout>    

https://ithelp.ithome.com.tw/upload/images/20210924/20121643cjgOtwtIye.png

Activity:

 val listData = ArrayList<String>()
    for (i in 0..19) {
        listData.add(i.toString())
    }
 val layoutManager = LinearLayoutManager(this)
 layoutManager.orientation = LinearLayoutManager.VERTICAL
 val dataList = findViewById<RecyclerView>(R.id.recyclerView)
 dataList.layoutManager = layoutManager
 dataList.adapter = Day19Adapter(listData)

執行結果:
https://ithelp.ithome.com.tw/upload/images/20210924/20121643qdJOhUFzl6.png

參考:

https://developer.android.com/guide/topics/ui/layout/recyclerview


上一篇
Kotlin Android 第18天,從 0 到 ML - View Binding
下一篇
Kotlin Android 第20天,從 0 到 ML - RecyclerView - GradView
系列文
Kotlin Android 30天,從 0 到 ML (Machine Learning)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言