Android学习笔记二十六之GridView网格视图

Android学习笔记二十六之GridView网格视图

　　前面我们介绍了ListView列表视图的基本用法，这一节我们介绍一下GridView网格视图的基本使用。顾名思义，ListView是显示列表，GridView是显示网格。GridView和ListView一样，都是AbsListView的子类，所以它们的用法基本相同，介绍一下GridView的几个常用属性：

• android:columnWidth：设置列的宽度
• android:gravity：组件对齐方式
• android:horizontalSpacing：水平边距
• android:verticalSpacing：垂直边距
• android:numColumns：设置列数
• android:stretchMode：设置拉伸模式，可选值如下： none：不拉伸；spacingWidth：拉伸元素间的间隔空隙 columnWidth：仅仅拉伸表格元素自身 spacingWidthUniform：既拉元素间距又拉伸他们之间的间隔空袭

下面我们通过一个例子体会一下GridView的基本用法：

Activity代码：

package com.example.gridviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 int[] icons = {R.drawable.calendar, R.drawable.camera, R.drawable.games_control, R.drawable.messenger,
        R.drawable.settings, R.drawable.speech_balloon, R.drawable.weather, R.drawable.world, R.drawable.youtube};

private String[] names = {"日历", "相机", "游戏中心", "信息", "设置", "语音", "天气", "浏览器", "视频"};
private List<Map<String, Object>> datas;
private SimpleAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    gridView = (GridView) findViewById(R.id.gv);
    datas = new ArrayList<>();
    initData();
    adapter = new SimpleAdapter(this, datas, R.layout.item_gv, new String[]{"icons", "names"}, new int[]{R.id.iv_icon, R.id.tv_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, "点击的是：" + names[i], Toast.LENGTH_SHORT).show();
        }
    });
}

/**
 * 初始化数据
 */
private void initData() {
    for (int i = 0; i < names.length; i++) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("icons", icons[i]);
        map.put("names", names[i]);
        datas.add(map);
    }
}
}

布局文件代码：

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

<ImageView
    android:id="@+id/iv_icon"
    android:layout_width="60dp"
    android:layout_height="60dp" />

<TextView
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:text="文本"
    android:textColor="#000000"
    android:textSize="16sp" />

</LinearLayout>

<?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: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.gridviewdemo.MainActivity">

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

实现效果图：

这是非常简单的实现，大家可以根据自己的需求扩展。

照例附上国内镜像API