如何使用Kotlin创建三列布局的RecyclerView

1. 配置RecyclerView的LayoutManager #

核心是使用GridLayoutManager并指定列数为3，直接在代码中设置即可：

Kotlin 代码：

val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
// 第二个参数为列数，固定设为3
recyclerView.layoutManager = GridLayoutManager(this, 3)
recyclerView.adapter = YourAdapter(yourDataList)

Java 代码：

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
recyclerView.setAdapter(new YourAdapter(yourDataList));

2. 创建Grid Item布局 #

新建item_grid.xml作为列表项的布局，根据需求调整样式：

<?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:padding="8dp"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:background="#f0f0f0"/>

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="14sp"/>

</LinearLayout>

3. 实现RecyclerView Adapter #

创建适配类完成数据与布局的绑定：

Kotlin 版本：

class YourAdapter(private val dataList: List<GridItem>) : RecyclerView.Adapter<YourAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val itemImage: ImageView = itemView.findViewById(R.id.item_image)
        val itemText: TextView = itemView.findViewById(R.id.item_text)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = dataList[position]
        holder.itemText.text = item.title
        // 加载图片示例（需引入Glide/Picasso等图片加载库）
        // Glide.with(holder.itemView.context).load(item.imageUrl).into(holder.itemImage)
    }

    override fun getItemCount() = dataList.size
}

// 数据模型类
data class GridItem(val title: String, val imageUrl: String)

Java 版本：

public class YourAdapter extends RecyclerView.Adapter<YourAdapter.ViewHolder> {

    private List<GridItem> dataList;

    public YourAdapter(List<GridItem> dataList) {
        this.dataList = dataList;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView itemImage;
        TextView itemText;

        public ViewHolder(View itemView) {
            super(itemView);
            itemImage = itemView.findViewById(R.id.item_image);
            itemText = itemView.findViewById(R.id.item_text);
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_grid, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        GridItem item = dataList.get(position);
        holder.itemText.setText(item.getTitle());
        // 加载图片示例
        // Glide.with(holder.itemView.getContext()).load(item.getImageUrl()).into(holder.itemImage);
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }
}

// 数据模型类
public class GridItem {
    private String title;
    private String imageUrl;

    public GridItem(String title, String imageUrl) {
        this.title = title;
        this.imageUrl = imageUrl;
    }

    public String getTitle() {
        return title;
    }

    public String getImageUrl() {
        return imageUrl;
    }
}

4. 添加依赖 #

确保Module级别的build.gradle中引入RecyclerView依赖：

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.3.2'
    // 如果使用Glide加载图片，添加：
    // implementation 'com.github.bumptech.glide:glide:4.15.1'
}

内容的提问来源于stack exchange，提问作者RONI BaCk