关于android:RecyclerView-在-RecyclerView-中使用-header-快人一步

41次阅读

共计 3541 个字符,预计需要花费 9 分钟才能阅读完成。

本文是介绍 RecyclerView 入门根底 系列文章 的第四篇。如果您曾经对创立 RecyclerView 有了肯定的意识,请持续浏览本文。如果尚未相熟,建议您首先浏览本系列中的 第一篇文章。

您能够通过在 RecyclerView 中增加 Header 来为利用数据补充上下文信息。尽管您也能够在 LinearLayout 中将 TextView 置于 RecyclerView 之上来模仿 header 的成果,然而这个模仿的 header 在用户滑动屏幕的时候甚至是滑到列表底部的时候依然会驻留在屏幕上。而应用真正的 header 元素,您能够实现在用户滑动 RecyclerView 的时候,header 随之挪动到屏幕之外。

本文中的示例会在 RecyclerView 中增加 Header,列表中会显示不同类型的花。Header 显示 “Flower Finder”,并且显示列表中花的数量。

创立 header 布局

创立一个布局文件,其中定义 Header 的展现成果。

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <TextView
    android:id="@+id/header_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/flower_finder"
    android:textAppearance="?attr/textAppearanceHeadline3" />

  <TextView
    android:id="@+id/flower_number_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
    android:id="@+id/flower_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/flower_string"
    android:textAppearance="?attr/textAppearanceHeadline6" />

</LinearLayout>

创立 HeaderAdapter 和 HeaderViewHolder

创立新文件来申请并且绑定 Header 的视图。

HeaderAdapter 继承自 RecyclerView.Adapter<RecyclerView.ViewHolder>()

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

class HeaderAdapter: RecyclerView.Adapter<RecyclerView.ViewHolder>(){}

HeaderAdapter 中,增加一个继承自 RecyclerView.ViewHolderViewHolder。如果您须要动静更新文本,增加一个变量代表须要更新内容的 TextView。创立 bind() 函数来应用传入的字符串更新 TextView。

 <!-- Copyright 2019 Google LLC. 
    SPDX-License-Identifier: Apache-2.0 -->
 
 class HeaderViewHolder(view: View) : RecyclerView.ViewHolder(view){
   private val flowerNumberTextView: TextView = itemView
     .findViewById(R.id.flower_number_text)
 
   fun bind(flowerCount: Int) {flowerNumberTextView.text = flowerCount.toString()
  }
}

在类定义中,批改 Adapter 的参数表以接管 HeaderViewHolder

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

class HeaderAdapter: RecyclerView.Adapter<HeaderAdapter.HeaderViewHolder>() {}

因为 Adapter 继承自 RecyclerView.Adapter,它须要实现 onCreateViewHolder()onBindViewHolder()getItemCount()

  • onCreateViewHolder() 负责填充视图并且返回 HeaderViewHolder
  • getItemCount() 仅返回数值 1,因为仅有一个 Header 元素
  • onBindViewHolder() 将数据绑定到 Header
 <!-- Copyright 2019 Google LLC. 
    SPDX-License-Identifier: Apache-2.0 -->
 
 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HeaderViewHolder {val view = LayoutInflater.from(parent.context)
         .inflate(R.layout.header_item, parent, false)
     return HeaderViewHolder(view)
 }
 
override fun onBindViewHolder(holder: HeaderViewHolder, position: Int) {holder.bind(flowerCount)
}

override fun getItemCount(): Int {return 1}

在 Activity 类中应用 ConcatAdapter

在 Activity 类中,创立一个变量代表 HeaderAdapter(),并将其置于 RecyclerView 的 Adapter 之上。

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

val headerAdapter = HeaderAdapter()
val flowersAdapter = FlowersAdapter {flower -> adapterOnClick(flower) }

而后应用 ConcatAdapter 将这两个 adapter 增加到 RecyclerViewConcatAdapter 会顺次显示多个 Adapter 的内容。在 flowersAdapter 之前增加 headerAdapter

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

val concatAdapter = ConcatAdapter(headerAdapter, flowersAdapter)
recyclerView.adapter = concatAdapter

运行代码。功败垂成!增加 Header 就是这么简略。

下一步

对于 Header 的残缺示例代码,请查阅: https://github.com/android/views-widgets-samples/tree/main/RecyclerViewKotlin

感激浏览 RecyclerView 系列 的最初一篇。如果您尚未浏览本系列中的其它文章,欢送查阅以下列表并浏览。

  • 实战 | 意识 RecyclerView
  • RecyclerView | 在 RecyclerView 中应用 ListAdapter
  • RecyclerView | 解决 RecyclerView 中的点击事件

正文完
 0