【Android笔记】GridView的使用

2019独角兽企业重金招聘Python工程师标准>>>

GridView用于在界面上按行、列分布的方式来显示多个组件。

GridView的使用步骤为：

GridView的关键属性

android:horizontalSpacing="10dp"   两列之间的间距
android:numColumns="auto_fit"      每行显示多少列
android:verticalSpacing="10dp"     两行之间的距离

看一个实例：

1.首先在activity_main.xml中创建GridView

<!--activity_main.xml-->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.demo7.MainActivity">

    <!--
        android:horizontalSpacing="10dp"   两列之间的间距
        android:numColumns="auto_fit"      每行显示多少列
        android:verticalSpacing="10dp"     两行之间的距离
    -->

    <GridView
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:horizontalSpacing="10dp"
        android:numColumns="4"
        android:verticalSpacing="10dp">
    </GridView>

</RelativeLayout>

2.新建item布局

<!--item.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="match_parent"
    android:orientation="vertical"
    android:gravity="center" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text=""/>

</LinearLayout>

3.添加相关代码

//MainActivity.java

package com.example.demo7;

import android.support.v7.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.Toast;

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

public class MainActivity extends AppCompatActivity {

    private GridView gridView;
    private List<Map<String, Object>>dataList;
    private int[] icon = {R.drawable.book,R.drawable.map,R.drawable.message,
                            R.drawable.qq, R.drawable.baidu, R.drawable.tieba};
    private String[] iconName = {"阅读", "地图", "信息", "QQ", "百度", "贴吧"};
    private SimpleAdapter adapter;

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

        /**
         * 1.准备数据源
         * 2.新建适配器（SimpleAdapter）
         * 3.GridView加载适配器
         * 4.GridView配置事件适配器（OnItemClickListener）
         */

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

        dataList = new ArrayList<Map<String, Object>>();
        adapter = new SimpleAdapter(MainActivity.this,getData(), R.layout.item,
                                    new String[]{"image", "name"},
                                    new int[]{R.id.image, R.id.name});
        gridView.setAdapter(adapter);

        //点击事件
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, iconName[i], Toast.LENGTH_SHORT).show();
            }
        });
    }

    private List<Map<String, Object>> getData() {
        for (int i=0; i < icon.length; ++i) {
            Map<String, Object>map = new HashMap<String, Object>();
            map.put("image", icon[i]);
            map.put("name", iconName[i]);
            dataList.add(map);
        }
        return dataList;
    }
}

运行效果如下：

点击一个图标，就会显示所对应的文字：

 

转载于:https://my.oschina.net/daowuming/blog/752779