图像类组件GridView

介绍

网格视图（ GridView ）是按照行、列分布的方式来显示多个组件，通常用于显示图片或图标等。

例如， QQ 相册相片预览界面（如图 4.26 所示），以及口袋购物浏览商品界面（如图 4.27 所示）， 都应用了网格视图。

在使用网格视图时，需要在屏幕上添加 GridView 组件，通常在 XML 布局文件中使用

<GridView> 标记实现，其基本语法如下：

<GridView
 属性列表
 >
</GridView>

XML属性

GridView 组件支持的 XML 属性如表

XML属性	描述
android:columnWidth	用于设置列的宽度
android:gravity	用于设置对齐方式
android:horizontalSpacing	用于设置各元素之间的水平间距
android:verticalSpacing	用于设置各元素之间的垂直间距
android:numColumns	用于设置列数，其属性值通常为大于 1 的值，如果只有 1 列，那么最好使用 ListView 实现
android:stretchMode	用于设置拉伸模式，其中属性值可以是 none（不拉伸）、 spacingWidth（仅拉伸元素之间的间距）、columnWidth（仅拉伸表格元素本身）、spacingWidthUniform（表格元素本身、元素之间的间距一起拉伸）

例子

 下面通过一个具体的实例演示如何通过 BaseAdapter 适配器指定内容的方式创建 GridView

定制GridView的界面

定义GridView布局文件

<?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"
    android:padding="15dp">


    <GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp" />

</LinearLayout>

定义menu_item.xml

定制自己所要展示的效果，这里我用的LinearLayout，设置为图片在上，文字在下

<?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"
    android:gravity="center_horizontal">

    <ImageView
        android:id="@+id/menu_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/menu_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:textColor="@color/orange"
        android:gravity="center"
        android:layout_marginTop="10dp" />

</LinearLayout>

 定义实体类MenuItem.java

public class MenuItem {

    String menuName;
    int menuDrawableId;

    public MenuItem(String menuName, int menuDrawableId) {
        this.menuName = menuName;
        this.menuDrawableId = menuDrawableId;
    }

}

定义适配器MenuAdapter.java

public class MenuAdapter extends BaseAdapter {

    private List<MenuItem> dataList;

    public MenuAdapter(List<MenuItem> dataList){
        this.dataList=dataList;
    }
    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public Object getItem(int position) {
        return dataList.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View menuView = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_grid_item, null);

        ImageView imageViewMenu=(ImageView)menuView.findViewById(R.id.menu_img);
        TextView tvMenuName=(TextView) menuView.findViewById(R.id.menu_title);

        imageViewMenu.setImageResource(dataList.get(position).menuDrawableId);
        tvMenuName.setText(dataList.get(position).menuName);

        return menuView;
    }

}

编写MainActivity

public class GridViewActivity extends AppCompatActivity {

    private GridView gridView;
    private List<MenuItem> dataList;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        initMenu();
        gridView = (GridView) findViewById(R.id.gv);
        MenuAdapter menuAdapter=new MenuAdapter(dataList);
        gridView.setAdapter(menuAdapter);

    
    }
    private void initMenu(){

        dataList=new ArrayList<>();
        dataList.add(new MenuItem("地图",R.drawable.menu1));
        dataList.add(new MenuItem("基金",R.drawable.menu2));
        dataList.add(new MenuItem("地狱",R.drawable.menu3));
        dataList.add(new MenuItem("管家",R.drawable.menu4));
        dataList.add(new MenuItem("图片",R.drawable.menu5));
        dataList.add(new MenuItem("理财",R.drawable.menu6));
        dataList.add(new MenuItem("购物",R.drawable.menu7));
    }
}

效果