快捷導(dǎo)航

Kotlin?RecyclerView滾動(dòng)控件詳解

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

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

Android 中的控件非常的豐富，我們會(huì)陸陸續(xù)續(xù)的進(jìn)行介紹，從第九節(jié)開(kāi)始，關(guān)于Kotlin 的語(yǔ)法特性就差不多結(jié)束，后面如果有發(fā)現(xiàn)需要說(shuō)明的語(yǔ)法，再進(jìn)行相關(guān)的補(bǔ)充。

在Android的控件中，RecyclerView算是一個(gè)大控件，基本上所有的大型項(xiàng)目都會(huì)使用到。因?yàn)樗淖饔檬怯昧斜淼姆绞絹?lái)展現(xiàn)相關(guān)的信息，比如我們是做新聞?lì)惖?，我們可以用它?lái)展示一條一條的圖文信息，我們做商品類的，那么我們可以用來(lái)展現(xiàn)商品的重要信息，可以說(shuō)RecyclerView 就是一個(gè)信息展示器。

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

RecyclerView.Adapter適配器

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

Adapter 適配器就是為了滿足我們這樣的設(shè)計(jì)，基本上會(huì)配合xml界面進(jìn)行設(shè)計(jì)。

我們先來(lái)看看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,"你點(diǎn)擊的是${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個(gè)方法，onCreateViewHolder 就是你要怎么設(shè)計(jì)這個(gè)界面，onBindViewHolder 每個(gè)界面的數(shù)據(jù)是什么，getItemCount 總共有多少條數(shù)據(jù)。

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

在onCreateViewHolder 加載界面的時(shí)候，會(huì)跟xml的界面進(jìn)行綁定。界面如下：

<?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>

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

主界面顯示RecyclerView

有了適配器，我們?cè)谥鹘缑嬷校€需要用一個(gè)RecyclerView 用來(lái)顯示相關(guān)的列表。

<?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的實(shí)例"/>
    <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(" 日向?qū)幋?",R.drawable.image_14))
        narutoList.add(Naruto(" 天天 ",R.drawable.image_15))
        narutoList.add(Naruto(" 邁特凱 ",R.drawable.image_16))
        narutoList.add(Naruto(" 自來(lái)也 ",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(" 志村團(tuán)藏 ",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(" 波風(fēng)水門 ",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))
    }

第三方RecyclerView之SmartRefreshLayout

在大型的項(xiàng)目中，我們通常使用的是第三方的RecyclerView ，因?yàn)樗墓δ鼙仍亩嗟枚啵矣闷饋?lái)一點(diǎn)也不費(fèi)勁，RecyclerView我們經(jīng)常用到的第三方控件是SmartRefreshLayout，github的地址在這里。可以先看看里面的說(shuō)明在動(dòng)手吧。