如何创建分类RecyclerView？求助实现Mockup指定样式的RecyclerView

Hey there! Let's walk through building a categorized RecyclerView that matches your mockup perfectly. I’ll break this down into actionable steps so you can get it right without hassle.

1. Core Concept: How Categorized RecyclerViews Work #

At its core, a categorized RecyclerView uses multiple item types—one for category headers, and another for the content items under each category. We’ll define these types first, then handle them in our adapter.

2. Step 1: Define Data Models #

Create data classes to represent your category headers and content items, plus a sealed class to unify them for the adapter:

// Model for category headers
data class CategoryHeader(val title: String)

// Model for content items
data class ContentItem(val name: String, val iconResId: Int)

// Sealed class to differentiate item types
sealed class RecyclerViewItem {
    data class Header(val header: CategoryHeader) : RecyclerViewItem()
    data class Item(val item: ContentItem) : RecyclerViewItem()
}

3. Step 2: Create Item Layouts #

You’ll need two layout files to match your mockup:

• item_category_header.xml: For category titles—use a TextView with bold text, a distinct background color, or padding to match your mockup’s header style.
• item_content.xml: For individual content items—include an ImageView for icons and a TextView for text, adjusting spacing, sizes, and alignment to mirror the mockup.

4. Step 3: Implement the RecyclerView Adapter #

The key here is distinguishing between item types in getItemViewType(), then handling each type in view holder creation and binding:

class CategorizedAdapter(private val items: List<RecyclerViewItem>) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    companion object {
        private const val VIEW_TYPE_HEADER = 0
        private const val VIEW_TYPE_ITEM = 1
    }

    override fun getItemViewType(position: Int): Int {
        return when (items[position]) {
            is RecyclerViewItem.Header -> VIEW_TYPE_HEADER
            is RecyclerViewItem.Item -> VIEW_TYPE_ITEM
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        return when (viewType) {
            VIEW_TYPE_HEADER -> {
                val view = inflater.inflate(R.layout.item_category_header, parent, false)
                HeaderViewHolder(view)
            }
            else -> {
                val view = inflater.inflate(R.layout.item_content, parent, false)
                ItemViewHolder(view)
            }
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (val item = items[position]) {
            is RecyclerViewItem.Header -> (holder as HeaderViewHolder).bind(item.header)
            is RecyclerViewItem.Item -> (holder as ItemViewHolder).bind(item.item)
        }
    }

    override fun getItemCount() = items.size

    // ViewHolder for category headers
    class HeaderViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val titleTv: TextView = itemView.findViewById(R.id.tv_header_title)

        fun bind(header: CategoryHeader) {
            titleTv.text = header.title
            // Match mockup styles here: font size, color, background, padding
        }
    }

    // ViewHolder for content items
    class ItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val iconIv: ImageView = itemView.findViewById(R.id.iv_item_icon)
        private val nameTv: TextView = itemView.findViewById(R.id.tv_item_name)

        fun bind(item: ContentItem) {
            nameTv.text = item.name
            iconIv.setImageResource(item.iconResId)
            // Adjust icon size, text style, and spacing to match your mockup
        }
    }
}

5. Step 4: Prepare Data & Set Up RecyclerView #

In your Activity or Fragment, assemble the categorized data and attach it to the RecyclerView:

// Build your categorized data list
val recyclerViewItems = mutableListOf<RecyclerViewItem>()

// Add first category
recyclerViewItems.add(RecyclerViewItem.Header(CategoryHeader("Category 1")))
recyclerViewItems.addAll(listOf(
    RecyclerViewItem.Item(ContentItem("Item 1", R.drawable.ic_item1)),
    RecyclerViewItem.Item(ContentItem("Item 2", R.drawable.ic_item2))
))

// Add second category
recyclerViewItems.add(RecyclerViewItem.Header(CategoryHeader("Category 2")))
recyclerViewItems.addAll(listOf(
    RecyclerViewItem.Item(ContentItem("Item 3", R.drawable.ic_item3)),
    RecyclerViewItem.Item(ContentItem("Item 4", R.drawable.ic_item4))
))

// Configure RecyclerView
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = CategorizedAdapter(recyclerViewItems)

6. Pro Tips to Match Your Mockup Exactly #

• Layout Precision: Use android:padding, android:layout_margin, and ConstraintLayout to nail spacing and alignment between elements.
• Style Consistency: Copy the exact text sizes, colors, and fonts from your mockup into your layout files.
• Header Distinction: Give category headers a unique background color or top/bottom borders to make them stand out, just like in the mockup.
• Dividers: If your mockup includes dividers between content items, use DividerItemDecoration or add a thin View in your content item layout.

Troubleshooting Common Issues #

• Mismatched Styles: Double-check your layout XML attributes—small differences in padding or text size can throw off the mockup match.
• Wrong Item Types: Ensure getItemViewType() returns the correct type for each position, and that your view holders bind to the right data.
• Glitchy Scrolling: Verify your LayoutManager is set correctly (LinearLayoutManager is standard for vertical lists) and that your data list doesn’t have duplicates.

内容的提问来源于stack exchange，提问作者Ivan Kravchuk