Android控件GridView的使用

封面图 • 2025-10-09 • Android开发

`GridView` 是 Android 中用于展示**二维网格布局**的控件，常用于显示图片、图标等需要按行和列排列的内容。它类似于 `ListView`，但支持多列显示。

---

## 一、GridView 简介

- **功能**：以网格形式展示数据。
- **继承关系**：`GridView` 继承自 `AbsListView`，和 `ListView` 类似。
- **适用场景**：相册、图标列表、商品展示等。

---

## 二、基本使用步骤

### 1. 在 XML 布局中添加 GridView

```xml
<GridView
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"     
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth" />
```

> - `numColumns`：设置每行显示多少列（可以是数字，也可以用 `auto_fit` 自动适配）。
> - `stretchMode`：控制列宽的伸缩方式，如 `columnWidth`、`spacingWidth` 等。

---

### 2. 准备数据源

通常是一个 `List` 或数组，比如：

```java
String[] items = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};
```

或者一个包含图片资源的列表：

```java
int[] images = {R.drawable.image1, R.drawable.image2, ...};
```

---

### 3. 创建 Adapter（Adapter 用于绑定数据到 GridView）

#### 使用 ArrayAdapter（简单文本）

```java
ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
        android.R.layout.simple_list_item_1, items);
gridView.setAdapter(adapter);
```

#### 使用自定义 Adapter（适合图片或复杂内容）

```java
public class GridAdapter extends BaseAdapter {
    private Context context;
    private int[] images;

public GridAdapter(Context context, int[] images) {
        this.context = context;
        this.images = images;
    }

@Override
    public int getCount() {
        return images.length;
    }

@Override
    public Object getItem(int position) {
        return images[position];
    }

@Override
    public long getItemId(int position) {
        return position;
    }

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(context);
            imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(5, 5, 5, 5);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(images[position]);
        return imageView;
    }
}
```

然后在 Activity 中使用：

```java
GridView gridView = findViewById(R.id.gridView);
GridAdapter adapter = new GridAdapter(this, images);
gridView.setAdapter(adapter);
```

---

### 4. 设置点击事件（可选）

```java
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(MainActivity.this, "点击了第 " + (position + 1) + " 项", Toast.LENGTH_SHORT).show();
    }
});
```

---

## 三、常见问题与技巧

### 1. 动态设置列数

```java
gridView.setNumColumns(3); // 可以动态设置列数
```

### 2. 自适应列宽

```xml
android:numColumns="auto_fit"
android:columnWidth="100dp"
```

### 3. 处理滚动性能问题

- 使用 `ViewHolder` 模式优化 `getView()` 性能（适用于自定义 Adapter）。
- 避免在 `getView()` 中做耗时操作。

---

## 四、示例代码完整版

### XML 布局文件（activity_main.xml）

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

<GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth" />
</LinearLayout>
```

### Java 代码（MainActivity.java）

```java
public class MainActivity extends AppCompatActivity {

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

GridView gridView = findViewById(R.id.gridView);

int[] images = {
                R.drawable.image1,
                R.drawable.image2,
                R.drawable.image3,
                R.drawable.image4,
                R.drawable.image5,
                R.drawable.image6
        };

GridAdapter adapter = new GridAdapter(this, images);
        gridView.setAdapter(adapter);

gridView.setOnItemClickListener((parent, view, position, id) -> {
            Toast.makeText(this, "点击了第 " + (position + 1) + " 张图片", Toast.LENGTH_SHORT).show();
        });
    }
}
```

---

## 五、总结

| 功能 | 说明 |
|------|------|
| `GridView` | 用于显示二维网格布局 |
| `ArrayAdapter` | 用于简单文本显示 |
| `BaseAdapter` / `CustomAdapter` | 用于图片或其他复杂内容 |
| `setNumColumns()` | 设置列数 |
| `onItemClick()` | 点击事件处理 |

如果你有更具体的使用需求（例如图片加载、分页、动画等），可以告诉我，我可以进一步帮你实现！