Kotlin?RecyclerView滾動控件詳解

更新時間：2022年12月06日 09:19:37 作者：go2coding

RecyclerView是Android一個更強大的控件,其不僅可以實現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實現(xiàn)數(shù)據(jù)縱向滾動,也可以實現(xiàn)橫向滾動(ListView做不到橫向滾動)。接下來講解RecyclerView的用法

在Android的控件中，RecyclerView算是一個大控件，基本上所有的大型項目都會使用到。因為他的作用是用列表的方式來展現(xiàn)相關的信息，比如我們是做新聞類的，我們可以用它來展示一條一條的圖文信息，我們做商品類的，那么我們可以用來展現(xiàn)商品的重要信息，可以說RecyclerView 就是一個信息展示器。

這里我們也用原生的RecyclerView 做了一個簡單的，動漫人物展示，這是只是展示RecyclerView的用法，如果列表需要更多的內(nèi)容，可以自己進行相應的添加設計。

RecyclerView.Adapter適配器

對于列表的展示，我們需要靈活的操作，我們需要自己訂閱每一類的信息展示形式，這樣一來在做設計的時候，就可以根據(jù)產(chǎn)品的形式進行自己的設計。

Adapter 適配器就是為了滿足我們這樣的設計，基本上會配合xml界面進行設計。

我們先來看看Adapter 適配器的自定義。

class NarutoListAdapter(var narutoList:ArrayList<Naruto>):RecyclerView.Adapter<NarutoListAdapter.ViewHolder>() {
    inner class ViewHolder(view:View):RecyclerView.ViewHolder(view){
        var narutoPic:ImageView = view.findViewById(R.id.naruto_pic)
        var narutoName:TextView = view.findViewById(R.id.naruto_name)
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.naruto_item_layout,parent,false)
        var viewHolder = ViewHolder(view as View)
        viewHolder.itemView.setOnClickListener{
            var position = viewHolder.adapterPosition
            var naruto = narutoList[position]
            Toast.makeText(parent.context,"你點擊的是${naruto.name}",Toast.LENGTH_SHORT).show()
        }
        return viewHolder
    }
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val naruto = narutoList[position]
        holder.narutoPic.setImageResource(naruto.imageId)
        holder.narutoName.setText(naruto.name)
    }
    override fun getItemCount(): Int {
        return narutoList.size
    }
}

適配器 NarutoListAdapter 要重載3個方法，onCreateViewHolder 就是你要怎么設計這個界面，onBindViewHolder 每個界面的數(shù)據(jù)是什么，getItemCount 總共有多少條數(shù)據(jù)。

有了這三個重載方法，我們基本就搞定了列表的顯示。

在onCreateViewHolder 加載界面的時候，會跟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="5dp"
    >
    <ImageView
        android:id="@+id/naruto_pic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/naruto_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        />
</LinearLayout>

界面這里也非常的簡單，只有兩個控件ImageView 和TextView，這個界面在現(xiàn)實的項目中，需要根據(jù)自己的需求設計的飽滿點，這里只是一個簡單的展示而已。

主界面顯示RecyclerView

有了適配器，我們在主界面中，還需要用一個RecyclerView 用來顯示相關的列表。

<?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:orientation="vertical"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:text="使用RecycleView的實例"/>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleViewItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </androidx.recyclerview.widget.RecyclerView>
</LinearLayout>

界面中的控件 RecyclerView 也有了，我們需要把數(shù)據(jù)給適配器，并綁定適配器。

        initData()
        recycleViewItem.layoutManager = LinearLayoutManager(this)
        var adapter = NarutoListAdapter(narutoList)
        recycleViewItem.adapter = adapter

數(shù)據(jù)初始化如下：

fun initData(){
        narutoList.add(Naruto(" 漩渦鳴人 ",R.drawable.image_1))
        narutoList.add(Naruto(" 宇智波佐助 ",R.drawable.image_2))
        narutoList.add(Naruto(" 小櫻 ",R.drawable.image_3))
        narutoList.add(Naruto(" 旗木卡卡西 ",R.drawable.image_4))
        narutoList.add(Naruto(" 奈良鹿丸 ",R.drawable.image_5))
        narutoList.add(Naruto(" 日向雛田 ",R.drawable.image_6))
        narutoList.add(Naruto(" 山中井野 ",R.drawable.image_7))
        narutoList.add(Naruto(" 秋道丁次 ",R.drawable.image_8))
        narutoList.add(Naruto(" 猿飛阿斯瑪 ",R.drawable.image_9))
        narutoList.add(Naruto(" 犬冢牙 ",R.drawable.image_10))
        narutoList.add(Naruto(" 油女志乃 ",R.drawable.image_11))
        narutoList.add(Naruto(" 夕日紅 ",R.drawable.image_12))
        narutoList.add(Naruto(" 李洛克 ",R.drawable.image_13))
        narutoList.add(Naruto(" 日向寧次 ",R.drawable.image_14))
        narutoList.add(Naruto(" 天天 ",R.drawable.image_15))
        narutoList.add(Naruto(" 邁特凱 ",R.drawable.image_16))
        narutoList.add(Naruto(" 自來也 ",R.drawable.image_17))
        narutoList.add(Naruto(" 大蛇丸 ",R.drawable.image_18))
        narutoList.add(Naruto(" 綱手 ",R.drawable.image_19))
        narutoList.add(Naruto(" 赤丸 ",R.drawable.image_20))
        narutoList.add(Naruto(" 大和 ",R.drawable.image_21))
        narutoList.add(Naruto(" 志村團藏 ",R.drawable.image_22))
        narutoList.add(Naruto(" 佐井 ",R.drawable.image_23))
        narutoList.add(Naruto(" 千手柱間 ",R.drawable.image_24))
        narutoList.add(Naruto(" 宇智波斑 ",R.drawable.image_25))
        narutoList.add(Naruto(" 千手扉間 ",R.drawable.image_26))
        narutoList.add(Naruto(" 波風水門 ",R.drawable.image_27))
        narutoList.add(Naruto(" 伊魯卡 ",R.drawable.image_28))
        narutoList.add(Naruto(" 猿飛日斬 ",R.drawable.image_29))
        narutoList.add(Naruto(" 玖辛奈 ",R.drawable.image_30))
    }