高级控件2：GridView

使用场景：淘宝、京东等软件上，主界面上的布局通常是两列，每一个条目都是由图片和描述以及价格构成，这样的布局可以使用GridView轻松实现。

1.布局文件中使用GridView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="4"/>
</LinearLayout>

设计图效果

其中，每一个Item表示一个条目

核心代码：

android:numColumns="4"

该代码设置列数为4列，如果将4改为2，则效果如下：

2.设置每个条目中的布局排版

<?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="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_gravity="center"
        android:src="@color/cardview_dark_background"/>
    <TextView
        android:id="@+id/label"
        android:layout_width="64dp"
        android:gravity="center_vertical"
        android:layout_gravity="center"
        android:textSize="24sp"
        android:layout_height="wrap_content"/>
</LinearLayout>

条目设计图效果：

3.关联适配器

package com.yibinu.gridviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.GridView;
import android.widget.ListAdapter;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gridView);
        List<Map<String, String>> data = new ArrayList<>();
        for (int i = 0; i < 30; i++) {
            Map<String, String> map = new HashMap<>();
            map.put("img",R.drawable.ic_launcher_background+"");
            map.put("label","描述"+i);
            data.add(map);
        }
        SimpleAdapter adapter = new SimpleAdapter(
                this,
                data,
                R.layout.gridview_item,
                new String[]{"img","label"},
                new int[]{R.id.img,R.id.label});
        gridView.setAdapter(adapter);
    }
}

编程思路：

由于要关联适配器，所以 会调用setAdapter方法；【gridView.setAdapter(***)】

此时，你会发现该方法中需要传入一个 ListAdapter对象，于是，你可以打开Android Developers，查看一下文档

从文档中可以看出，SimpleAdapter是ListAdapter的已知的间接子类，ListAdapter是一个接口

仔细查看后，发现ArrayAdapter和SimpleAdapter均是BaseAdapter的直接子类

有了这些API，所以可以知道传入一个SimpleAdapter对象是可以的，所以需要先实例化一个SimpleAdapter对象，于是需要调SimpleAdapter的构造方法。【gridView.setAdapter(SimpleAdapter对象)】

于是开始造数据，SimpleAdapter需要几个参数，每个参数是什么含义，根据API造好数据，即可进行测试，检测运行结果

当把列数分别设置为1、2、3、4的结果依次如下

该控件比较简单，如果你学会了SimpleAdapter，基本没有难度。

如果你想要增加单击事件监听和长按事件监听，和ListView是一样的，此处只展示一个案例（单击）

package com.yibinu.gridviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gridView);
        List<Map<String, String>> data = new ArrayList<>();
        for (int i = 0; i < 30; i++) {
            Map<String, String> map = new HashMap<>();
            map.put("img",R.drawable.ic_launcher_background+"");
            map.put("label","描述"+i);
            data.add(map);
        }
        SimpleAdapter adapter = new SimpleAdapter(
                this,
                data,
                R.layout.gridview_item,
                new String[]{"img","label"},
                new int[]{R.id.img,R.id.label});
        gridView.setAdapter(adapter);
        //增加点击条目的监听事件，此处写法为拉姆达表达式
        gridView.setOnItemClickListener((parent, view, position, id) -> {
            TextView label = view.findViewById(R.id.label);
            Toast.makeText(MainActivity.this, "您点击的是文字:"+label.getText(), Toast.LENGTH_SHORT).show();
        });
    }
}

则在点击某一个条目的时候，弹出提示信息