安卓实现网格布局的效果

news2025/7/16 3:05:03

文章目录

页面
- 子项布局
Activity
- 适配器
运行结果
其他文章

页面

RecyclerView是Android开发中常用的列表控件之一，可以用于展示大量数据以及实现各种布局效果。本文章使用RecyclerView的GridLayoutManager来实现网格布局，显示指定列数。
首先，在你的布局文件中添加一个RecyclerView：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

子项布局

创建一个布局文件作为子项的布局，命名为item_layout，使用的根节点是LinearLayout。
在这里插入图片描述
布局代码示例如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- item_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/itemTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textSize="16sp" />

</LinearLayout>

设置android:orientation="vertical"来垂直排列布局中的子组件。布局中包含一个TextView用于展示项的文本信息。
当然了，你可以根据实际需求自定义布局，添加和调整组件的样式、位置和属性。

Activity

然后在Activity或Fragment中获取RecyclerView的实例，并设置LayoutManager为GridLayoutManager。

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)

// 设置GridLayoutManager，指定列数
// 第二个参数用于设置列数，这里是2列
val layoutManager = GridLayoutManager(this, 2)
recyclerView.layoutManager = layoutManager

通过上述代码，我们创建了一个GridLayoutManager实例，并指定了列数为2。然后，将该实例设置给RecyclerView的LayoutManager属性，以实现网格布局的效果。

// 创建数据源
val data = mutableListOf<String>()
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")

// 创建适配器
val adapter = MyAdapter(data)
recyclerView.adapter = adapter

在上述代码中，我们创建了一个字符串列表作为数据源，并添加了几个示例项。接着，创建了一个自定义的适配器类MyAdapter，并将数据源传入适配器的构造函数中。最后，将适配器设置给RecyclerView的Adapter属性，以显示数据。

适配器

然后，创建和设置适配器来展示网格布局中的数据，创建一个类，命名为MyAdapter，来当我们的适配器，代码如下所示。

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class MyAdapter(private val dataList: List<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val data = dataList[position]
        holder.bindData(data)
    }

    override fun getItemCount(): Int {
        return dataList.size
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bindData(data: String) {
            // 在这里设置布局中的数据展示逻辑
            val itemTextView: TextView = itemView.findViewById(R.id.itemTextView)
            itemTextView.text = data
        }
    }
}

在上述代码中，我们创建了一个名为MyAdapter的适配器类，并继承自RecyclerView.Adapter。适配器需要传入一个数据源dataList，这里是一个字符串列表。
在onCreateViewHolder方法中，我们通过加载布局文件item_layout来创建ViewHolder实例，并返回该实例。item_layout是一个用于展示单个项的布局文件，也就是我们在上一节里写的那个子项的布局文件。
在onBindViewHolder方法中，我们根据对应位置的数据，将数据绑定到ViewHolder中。这里只是简单地将数据设置到一个TextView组件中，你可以根据你具体的布局文件和数据来绑定。
在getItemCount方法中，我们返回数据源的大小，即要展示的项的数量。

最后，内部类ViewHolder是每个项的视图持有者，在ViewHolder中可以绑定数据和设置点击事件。

这样我们的网格布局就做好了。