recyclerview(recyclerview用法)

RecyclerView 是一款非常強大的 widget，它可以幫助您靈活地顯示列表數(shù)據(jù)。當我開始學習 RecyclerView 的時候，我發(fā)現(xiàn)對于復雜的列表界面有很多資源可以參考，但是對于簡單的列表展現(xiàn)就鮮有可參考的資源了。雖然 RecyclerView 的組成結(jié)構(gòu)乍一看有些復雜，但是深入理解以后您會發(fā)現(xiàn)它其實非常簡單明了。

本文會通過創(chuàng)建一個簡單的 RecyclerView 實現(xiàn)一個列表來顯示不同種類的花的名字。在實現(xiàn)的過程中，我也會將 RecyclerView 的每個部分揉碎了展現(xiàn)給大家，這樣大家就可以在自己的應用中實現(xiàn)了。

RecyclerView 是 "何方神圣"？為什么選擇它呢？

RecyclerView 是一個容器，它用于顯示列表形式 (list) 或者網(wǎng)格形式 (grid) 的數(shù)據(jù)，比如文本或者照片。

當列表滑動的時候，實際上只有少量鄰近的視圖會顯示在屏幕上。當視圖滑出屏幕時，RecyclerView 會復用它并且填充新的數(shù)據(jù)。由于它是通過回收已有的結(jié)構(gòu)而不是持續(xù)創(chuàng)建新的列表項，所以它可以有效提高應用的時間效率和空間效率。

粉紅色的方格表示屏幕上正在顯示的表項，黃色的方格表示屏幕可視范圍之外的表項是如何被回收并轉(zhuǎn)為新的視圖

為什么您需要使用 RecyclerView 呢？

RecyclerView 使用 ViewHolder 模式，這樣做可以提高性能，因為它無需頻繁調(diào)用 findViewById() 方法即可訪問表項的視圖；RecyclerView 使用 LayoutManager，它支持縱向滑動的列表和橫向滑動的列表，以及交錯布局的列表和網(wǎng)格布局的列表。您還可以創(chuàng)建自定義的 LayoutManager；RecyclerView 提供默認的表項動畫以及自定義動畫的入口。

總之，RecyclerView 兼顧了靈活性和個性化，所以它是功能強大的工具。

實現(xiàn) RecyclerView

本文會為大家展示如何實現(xiàn)一個簡單的 RecyclerView，用它來顯示不同種類花的名稱。下面的代碼會使用 Kotlin 語言，但是 RecyclerView 也可以在 Java 語言中使用。

首先在 Android Studio 里創(chuàng)建一個工程，并且使用 Empty Activity 模板。設置項目名稱，并且選擇 Kotlin 作為項目所用的語言。

接下來在 app 級的 build.gradle 文件里引入 最新版本 的 RecyclerView 依賴。

2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->//在https://developer.android.google.cn/jetpack/androidx/releas/recyclerview獲得最新版本號defrecyclerview_version="1.1.0"implementation'androidx.recyclerview:recyclerview:$recyclerview_versionRecyclerView 數(shù)據(jù)

RecyclerView 最重要的組成部分之一就是需要顯示的數(shù)據(jù)。對于比較復雜的應用來說，數(shù)據(jù)可能是來自數(shù)據(jù)庫或者來自于網(wǎng)絡，不過這里我們簡單使用字符串資源文件作為應用的數(shù)據(jù)源。

在 strings.xml 文件中，創(chuàng)建一個字符串數(shù)組來存放花的名稱。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0--><resources><stringname="app_name">RecyclerSample</string><string-arrayname="flower_array"><item>Lily</item><item>Poppy</item><item>Sunflower</item><item>Freesia</item><item>Daisy</item><item>Ro</item><item>Daffodil</item><item>Lavender</item><item>Peony</item><item>Lilac</item><item>Dahlia</item><item>Tulip</item><item>Dandelion</item><item>Geranium</item><item>Gardenia</item><item>Rhododendron</item><item>Azalea</item></string-array></resources>

然后，創(chuàng)建一個類，名字為 Datasource，并且可以接收一個 Context 類型的參數(shù)。創(chuàng)建一個叫做 getFlowerList() 的函數(shù)，它負責返回花的名稱列表。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classDatasource(valcontext:Context){fungetFlowerList():Array<String>{returncontext.resources.getStringArray(R.array.flower_array)}}

在 MainActivity.onCreate() 中，創(chuàng)建一個變量叫做 flowerList，然后將 getFlowerList() 的返回結(jié)果賦給它。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)tContentView(R.layout.activity_main)valflowerList=Datasource(this).getFlowerList()}RecyclerView 布局

接下來，在 activity_main 布局文件中將 TextView 替換為 RecyclerView，并且將其 layoutManager 設置為 LinearLayoutManager。使用 LinearLayoutManager 意味著未來數(shù)據(jù)將以縱向列表或者橫向列表的形式顯示 (默認是縱向列表)。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0--><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layoutManager="LinearLayoutManager"/></FrameLayout>表項布局

上面的示意圖表示一個包含數(shù)據(jù)表項的 RecyclerView。在這里，組成 RecyclerView 的表項 (Item) 里會包含花的名稱。

創(chuàng)建一個新的布局文件，將它命名為 flower_item，它用來決定每一個表項的顯示布局。本例中布局僅需要顯示一個鮮花的名稱，所以這里只需要 TextView。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0--><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/flower_text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="32sp"/></FrameLayout>拆分 Adapter 類

接下來是 RecyclerView 的重頭戲了，也就是 ViewHolder 和 Adapter 類。ViewHolder 負責存儲 RecyclerView 中每一個單獨的表項所需要顯示的信息。RecyclerView 僅需要創(chuàng)建當前所顯示的表項數(shù)量的 ViewHolder 外加緩存中的幾個 ViewHolder 即可。隨著用戶滑動屏幕，ViewHolder會被回收 (使用新數(shù)據(jù)進行填充)，已有的表項會在一端消失，并且在另一端顯示一個新的表項。Adapter 類從數(shù)據(jù)源獲得數(shù)據(jù)，并且將數(shù)據(jù)傳遞給正在更新其所持視圖的 ViewHolder。下圖顯示了 RecyclerView、Adapter、ViewHolder 和數(shù)據(jù)之間的協(xié)作關系。

創(chuàng)建 Adapter

創(chuàng)建一個叫做 FlowerAdapter 的類，所需顯示的列表數(shù)據(jù)作為該類的參數(shù)。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classFlowerAdapter(valflowerList:Array<String>){}

創(chuàng)建 ViewHolder

創(chuàng)建一個叫做 FlowerViewHolder 的內(nèi)部類，并且它可以接收一個 itemView 作為參數(shù)。在 ViewHolder 中，創(chuàng)建一個變量來引用 TextView，然后將它指向表項布局里對應的視圖。然后創(chuàng)建 bind() 函數(shù)，它用來將花的名字 (字符串) 和攜帶數(shù)據(jù)的 UI (flowerTextView) 關聯(lián)起來。bind() 函數(shù)接收傳入的字符串，并且將字符串作為 flowerTextView 的文本內(nèi)容。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classFlowerViewHolder(itemView:View):RecyclerView.ViewHolder(itemView){privatevalflowerTextView:TextView=itemView.findViewById(R.id.flower_text)funbind(word:String){flowerTextView.text=word}}

繼承 RecyclerView.Adapter

更新 FlowerAdapter 的類定義，使其繼承 RecyclerView.Adapter 類，并且將 FlowerViewHolder作為參數(shù)傳入。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classFlowerAdapter(valflowerList:Array<String>):RecyclerView.Adapter<FlowerAdapter.FlowerViewHolder>(){}

重寫 RecyclerView.Adapter 的類需要重寫三個方法 onCreateViewHolder()、onBindViewHolder()和 getItemCount()。

重寫 onCreateViewHolder()

當 ViewHolder 創(chuàng)建的時候會調(diào)用該方法。在該方法里進行初始化和填充 RecyclerView 中的表項視圖。該視圖使用前面我們創(chuàng)建的用于顯示文本的布局。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->overridefunonCreateViewHolder(parent:ViewGroup,viewType:Int):FlowerViewHolder{valview=LayoutInflater.from(parent.context).inflate(R.layout.flower_item,parent,fal)returnFlowerViewHolder(view)}

重寫 onBindViewHolder()

onBindViewHolder() 被調(diào)用的時候，會傳入?yún)?shù) ViewHolder 和一個位置 (position)，它表示在 flowerList 中所綁定的表項的位置。該位置可以用于提取表項所需的數(shù)據(jù)，并且將數(shù)據(jù)傳遞給 ViewHolder 來使數(shù)據(jù)綁定到對應的 UI。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->overridefunonBindViewHolder(holder:FlowerViewHolder,position:Int){holder.bind(flowerList[position])}

重寫 getItemCount()

RecyclerView 顯示一個列表，所以它需要知道列表里共有多少項。由于 flowerList 就是數(shù)據(jù)源，所以直接返回它的長度即可。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->overridefungetItemCount():Int{returnflowerList.size}

完成 Adapter 代碼

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classFlowerAdapter(valflowerList:Array<String>):RecyclerView.Adapter<FlowerAdapter.FlowerViewHolder>(){//描述表項視圖并且將它放在RecyclerView中classFlowerViewHolder(itemView:View):RecyclerView.ViewHolder(itemView){privatevalflowerTextView:TextView=itemView.findViewById(R.id.flower_text)funbind(word:String){flowerTextView.text=word}}//返回一個新的ViewHolderoverridefunonCreateViewHolder(parent:ViewGroup,viewType:Int):FlowerViewHolder{valview=LayoutInflater.from(parent.context).inflate(R.layout.flower_item,parent,fal)returnFlowerViewHolder(view)}//返回數(shù)據(jù)列表的長度overridefungetItemCount():Int{returnflowerList.size}//顯示一個指定位置的數(shù)據(jù)overridefunonBindViewHolder(holder:FlowerViewHolder,position:Int){holder.bind(flowerList[position])}}連接到 MainActivity

我們已經(jīng)創(chuàng)建了布局、數(shù)據(jù)列表和 adapter。現(xiàn)在我們可以將 RecyclerView 添加到 MainActivity，并且將 Adapter 賦值給它。

定義一個變量叫做 recyclerView，然后將 activity_main 中的 RecyclerView 賦值給 recyclerView。將 FlowerAdapter 作為您 recyclerView 的 adapter。

<!--Copyright2019GoogleLLC.SPDX-Licen-Identifier:Apache-2.0-->classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)tContentView(R.layout.activity_main)valflowerList=Datasource(this).getFlowerList()valrecyclerView:RecyclerView=findViewById(R.id.recycler_view)recyclerView.adapter=FlowerAdapter(flowerList)}}

現(xiàn)在我們運行一下，然后看看它操作起來如何:

下一步

完整代碼請點擊 這里。

上面的例子為大家展示了如何實現(xiàn) RecyclerView 的幾個組成部分來顯示簡單的文本元素。當然 RecyclerView 可以包含更多有趣和復雜的元素，我們將在未來的文章和示例中為大家展示。

更多資源，請參閱:

RecyclerView Sample — KotlinRecyclerView Sample — JavaRecyclerView DocumentationCreate a List with RecyclerView