recyclerview | Android Develop官網

簡介

recyclerview顧名思義是一種可以重複利用的view，用於顯示清單列表，是個很基本、用途也很廣的元件，基本上幾乎每個app都會用到。

重複利用是三小?原理是啥?

recyclerview的回收機制的原理如下，系統只會產生一定數量的view，當使用者往下捲動，螢幕上方被移動到畫面外的view就會被回收，把內容換成新的資料，並從螢幕下方塞回來，這機制的好處可以大幅提升app效能。

製作Recyclerview

建立dataModel來定義資料格式，item_ex來做出每個項目的模板，然後接入adapter。可以把資料想像成客人，dataModel想像成餐廳設定的客群對象，Item_ex是座位，adapter是負責帶位的服務生，到時候負責把客人綁定到預定好的座位上。而mainActivity本身餐廳，在這裡傳入資料(接待客人)及連接adapter(雇用服務生)。

實作開始

0. 先加入recyclerview的implementation

dependencies {
    implementation "androidx.recyclerview:recyclerview:1.1.0"
    // For control over item selection of both touch and mouse driven selection
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc02"
}

1. 建立一個dataModel.kt，格式是包含有一個字串跟一個整數，建立一個list並在下面生成資料並加入到list裡面。

data class Item(val name:String,
                val img:Int)
                
val myItemList = arrayListOf<Item>()

//生成資料
for(i in 0..5){
    myItemList.add(Item("Wang",R.drawable.your_img))
}

2. 建立一個layout檔，item_example.xml，可能包含幾個imageView或TextView看你想放什麼元件。
   

        <ImageView
            android:id="@+id/imgv"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:src="@drawable/xxxxxxx"
            />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="xxxxxxx" />

3. 建立一個adapter介面卡，MyAdapter.kt，在這裡綁定recyclerview與要顯示的data資料。
   剛說過adapter是負責帶位的服務生，負責把客人(也就是資料)綁定到他的座位上(item_ex中每個元件的位置)。
   第一件事是先宣告一個當地的list，到時候放資料用的，
   然後宣告一個內部類別mViewHolder，可以看到我們在這裡把剛剛item_ex上的元件拉進來，並寫一個方法來綁定每個資料與對應的元件。
   接下來在onCreateViewholder 導入item_ex項目模板進來，並在最後回傳綁定了項目模板的mViewHolder。
   getItemCount就是他需要知道總共有幾個項目。list奪大就表示有多少項目，所以我們回傳剛剛宣告的list長度給他
   onBindViewHolder顧名思義我們要在這裡綁定資料，所以我們呼叫剛剛寫好的bind方法來完成綁定。

class MyAdapter:RecyclerView.Adapter<MyAdapter.mViewHolder>() {

    var unAssignList = listOf<Item>()

    inner class mViewHolder(itemView:View):RecyclerView.ViewHolder(itemView){
            
            //把layout檔的元件們拉進來，指派給當地變數
            val icon = itemView.imgv
            val name = itemView.tv_name
            
            fun bind(item: Item){
                //綁定當地變數與dataModel中的每個值
                icon.setImageResource(item.img)    
                name01.text = item.name
                
            }
    }

    override fun onCreateViewHolder(parent:ViewGroup,viewType: Int):mViewHolder {

        //載入項目模板   
        val inflater = LayoutInflater.from(parent.context)
        val example = inflater.inflate(R.layout.item_example, parent, false)
        return mViewHolder(example)

        }

    override fun getItemCount() = unAssignList.size
    
    override fun onBindViewHolder(holder: mViewHolder, position: Int) {
        
        //呼叫上面的bind方法來綁定資料
        holder.bind(unAssignList[position])
                
    }

    //更新資料用
    fun updateList(list:ArrayList<Movement>){
        unAssignList = list
    }
}

4. 去 activity_main.xml ，放一個recyclerview元件。

<androidx.recyclerview.widget.RecyclerView

        android:id="@+id/r_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</androidx.recyclerview.widget.RecyclerView>

5. 回到 MainActivity.kt 做最後設定。
   我們先將adapter實例化，在onCreate裡面我們先傳入資料，myItemList就是我們剛剛生成資料的那個list，我們現在傳給adapter。
   最後設定一下layoutManager，並把recyclerview綁上adapter就完成啦。

class MainActivity : AppCompatActivity() {

    val mAdapter = MyAdapter()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        mAdapter.updateList(myItemList)     //傳入資料
        r_view.layoutManager = LinearLayoutManager(this)
        r_view.adapter = mAdapter
        
    }

完成啦，舒服。