iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Mobile Development

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

Kotlin Android 第20天,從 0 到 ML - RecyclerView - GradView

前言:

  RecyclerView 的 ListView 完成了,但我想要用GradView怎麼辨?
  超簡單的,昨天的item 和 adapter 都不用改,直接改activity就ok了,
  讓我們看下去(有看過Day19的文章就直接看Activity)。

大綱 :

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..41) {
        when(i % 7){
            0 -> listData.add("GDG 台北")
            1 -> listData.add("GDG 桃園")
            2 -> listData.add("GDG 新竹")
            3 -> listData.add("GDG 台中")
            4 -> listData.add("GDG 台南")
            5 -> listData.add("GDG 高雄")
            6 -> listData.add("GDG 花蓮")
        }
    }
    
    
    val layoutManager = GridLayoutManager(this,3)
    val dataList = findViewById<RecyclerView>(R.id.recyclerView)
    dataList.layoutManager = layoutManager
    dataList.adapter = Day19Adapter(listData)
    

adapter還是用day19的都不變
layoutManager 原本是 LinearLayoutManager(this) 改成
layoutManager = GridLayoutManager(this,2)

設定GridLayoutManager填入 spanCount 數
spanCount 數要分為幾個項目作顯示。


執行2列和3列結果:
https://ithelp.ithome.com.tw/upload/images/20210925/20121643Qw4CYBO7Hp.png
https://ithelp.ithome.com.tw/upload/images/20210925/20121643OExKXt5qnm.png

參考:

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


上一篇
Kotlin Android 第19天,從 0 到 ML - RecyclerView 動態列表
下一篇
Kotlin Android 第21天,從 0 到 ML - Retrofit and Repository
系列文
Kotlin Android 30天,從 0 到 ML (Machine Learning)30

尚未有邦友留言

立即登入留言