Material Design 中 RecyclerView 各种 Item 布局实现详解

前言

在移动端应用开发中，RecyclerView 是一个非常流行的组件，它提供了高度的灵活性和性能优化，使得在大数据集下的快速滑动和数据变更成为可能。而在 Material Design 设计规范中，RecyclerView 的 Item 布局是非常重要且影响整体风格的一部分。本文将会介绍 Material Design 中 RecyclerView 各种 Item 布局实现的详细过程，包括如何使用 ConstraintLayout 实现 CardView、利用 Data Binding 实现带有 Avatar 的 List Item 等等。希望可以给前端开发者带来一些启发和指导，使得开发出符合规范的 Material Design 应用成为可能。

使用 ConstraintLayout 实现 CardView

CardView 是 Material Design 中非常常用的一个组件，它可以让应用界面看起来更加逼真和现代。而 ConstraintLayout 是 Android 中高度灵活的布局组件，它可以帮助我们实现非常复杂的界面布局。下面我们将结合这两个组件，实现一个符合规范的 CardView Item。

首先我们需要在 app/build.gradle 中添加依赖项：

implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

然后我们可以在 RecyclerView 的 Adapter 中实现该布局：

// javascriptcn.com 代码示例
class CardAdapter : RecyclerView.Adapter<CardAdapter.CardViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_card, parent, false)
        return CardViewHolder(view)
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {}

    override fun getItemCount(): Int = 10

    class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

接着在 res/layout 目录下创建 item_card.xml 文件：

// javascriptcn.com 代码示例
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="8dp"
    app:cardBackgroundColor="@color/card_background"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:cardPreventCornerOverlap="false"
    app:layout_constraintTop_toTopOf="parent">
  
    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="h,6:5"
        app:layout_constraintEnd_toEndOf="@id/card"
        app:layout_constraintStart_toStartOf="@id/card"
        app:layout_constraintTop_toTopOf="@id/card" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="@color/text_primary"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="@id/card"
        app:layout_constraintStart_toStartOf="@id/card"
        app:layout_constraintTop_toBottomOf="@id/image"
        android:text="这是\n标题" />

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:maxLines="3"
        android:textColor="@color/text_secondary"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@id/card"
        app:layout_constraintStart_toStartOf="@id/card"
        app:layout_constraintTop_toBottomOf="@id/title"
        android:text="这是内容区域，可以\n放一些内容展示相关信息" />

</androidx.cardview.widget.CardView>

将上面的代码复制到 item_card.xml 文件中，并根据实际需求调整文字和颜色等参数即可。在以上代码中，我们使用了一个 CardView、两个 TextView 和一个 ImageView 来实现一个符合规范的 CardView Item。

利用 Data Binding 实现带有 Avatar 的 List Item

除了 CardView，List Item 也是 Material Design 中非常重要的一个组件。而利用 Data Binding 组件可以使得我们更加方便地绑定数据和实现一些常用的效果，同时 Data Binding 还可以很好地集成到 ViewModel 架构中，使得代码更加优雅易维护。下面我们将通过一个实例来讲解如何利用 Data Binding 实现带有 Avatar 的 List Item。

我们在 RecyclerView 的 Adapter 中创建如下 ViewHolder：

// javascriptcn.com 代码示例
class AvatarAdapter : RecyclerView.Adapter<AvatarAdapter.AvatarViewHolder>() {

    private var dataList = listOf<Pair<String, String>>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AvatarViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        return AvatarViewHolder(DataBindingUtil.inflate(layoutInflater, R.layout.item_avatar, parent, false))
    }

    override fun onBindViewHolder(holder: AvatarViewHolder, position: Int) {
        val (avatarUrl, name) = dataList[position]
        holder.bind(avatarUrl, name)
    }

    fun setData(dataList: List<Pair<String, String>>) {
        this.dataList = dataList
        notifyDataSetChanged()
    }

    override fun getItemCount(): Int = dataList.size

    inner class AvatarViewHolder(private val binding: ItemAvatarBinding) :
        RecyclerView.ViewHolder(binding.root) {

        fun bind(avatarUrl: String, name: String) {
            binding.avatarUrl = avatarUrl
            binding.name = name
        }
    }

}

接着在 res/layout 目录下创建 item_avatar.xml 文件：

// javascriptcn.com 代码示例
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="avatarUrl"
            type="String" />

        <variable
            name="name"
            type="String" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp">

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            app:layout_constraintStart_toStartOf="@id/container"
            app:layout_constraintTop_toTopOf="@id/container"
            app:srcCompat="@drawable/ic_person" />

        <TextView
            android:id="@+id/name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@{name}"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="@id/container"
            app:layout_constraintStart_toEndOf="@id/avatar"
            app:layout_constraintTop_toTopOf="@id/avatar" />

        <TextView
            android:id="@+id/time"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@string/time"
            app:layout_constraintEnd_toEndOf="@id/name"
            app:layout_constraintStart_toStartOf="@id/name"
            app:layout_constraintTop_toBottomOf="@id/name" />

        <TextView
            android:id="@+id/message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@string/message_text"
            app:layout_constraintEnd_toEndOf="@id/time"
            app:layout_constraintStart_toStartOf="@id/time"
            app:layout_constraintTop_toBottomOf="@id/time" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

在以上代码中，我们使用了一个 ConstraintLayout、三个 TextView 和一个 ImageView 来实现一个 List Item。其中，Data Binding 的部分则涉及到 data 和 variable 的声明以及 TextView 的属性绑定。

最后，在 RecyclerView 所在的 Activity 或 Fragment 中调用 setData 方法来将数据传入 Adapter 中即可：

// javascriptcn.com 代码示例
class AvatarListActivity : AppCompatActivity() {

    private lateinit var binding: ActivityAvatarListBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityAvatarListBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val dataList = listOf(
            "https://randomuser.me/api/portraits/women/1.jpg" to "Jane Doe",
            "https://randomuser.me/api/portraits/men/1.jpg" to "John Doe",
            "https://randomuser.me/api/portraits/women/2.jpg" to "Mary Smith",
            "https://randomuser.me/api/portraits/men/2.jpg" to "Peter Smith"
        )

        val adapter = AvatarAdapter()
        adapter.setData(dataList)

        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = adapter
    }
}

总结

本文中我们介绍了在 Material Design 中，RecyclerView Item 布局的实现方法和一些技巧。使用 ConstraintLayout 可以实现非常灵活和美观的 CardView Item，而利用 Data Binding 可以简洁清晰地实现 List Item，同时 Data Binding 还可以很好地与 ViewModel 架构结合。希望本文对于前端开发者在 Android 移动端应用开发中有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65457bbf7d4982a6ebf274fe