Android控件之GridView

Android控件之GridView

  

---

 1 GridView介绍

GridView是网格视图，它按照行列的方式来显示内容的。常用于九宫格内容显示。

1.1 GridView属性说明

android:columnWidth
设置列的宽度。

android:gravity
设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“|”分开。

android:horizontalSpacing
两列之间的间距。

android:numColumns
设置列数。取值有2种。(01), 可以设置为数字，比如："2"表示有两列。(02)，可以设置为“auto_fit”，表示根据“屏幕宽度”和“GridView宽度”来动态匹配。

android:stretchMode
缩放模式。取值有4种。
(01) none。 禁止缩放。
(02) spacingWidth。 所有列之间的间距都会缩放。
(03) columnWidth。每一列都会缩放。注意比较和spacingWidth之间的区别；一个是缩放“列与列之间的间距”，另一个是缩放“整个列”。
(04) spacingWidthUniform。通过的缩放列。

android:verticalSpacing
两行之间的间距。

---

2 GridView示例

创建一个activity，包含一个GridView。GridView包含9格，每一个格子包含“图片”和“文本”2部分。点击每一个格子，显示一个Toast提示语。

SimpleGridViewTest.java代码：

package com.example.simplegridviewtest;

import android.app.Activity;
import android.content.Intent;
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 android.widget.AdapterView.OnItemClickListener;

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

/**
 * @desc GridView的实例。
 *       GridView包含9格，每一个格子包含“图片”和“文本”2部分。点击每一个格子，显示一个Toast提示语。
 * 
 * @author skywang
 *
 */
public class SimpleGridViewTest extends Activity implements AdapterView.OnItemClickListener{
    private GridView mGridView;
    private String IMAGE_ITEM = "imgage_item";
    private String TEXT_ITEM = "text_item";
    private String[] arrText = new String[]{ 
            "Picture 1", "Picture 2", "Picture 3", 
            "Picture 4", "Picture 5", "Picture 6",
            "Picture 7", "Picture 8", "Picture 9"
            };
    private int[] arrImages=new int[]{
            R.drawable.p1, R.drawable.p2, R.drawable.p3, 
            R.drawable.p4, R.drawable.p5, R.drawable.p6, 
            R.drawable.p7, R.drawable.p8, R.drawable.p9
            };
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_grid_view_test);

        mGridView = (GridView) findViewById(R.id.gridview);

        SimpleAdapter saImageItems = new SimpleAdapter(this, 
                getGridViewData(),
                R.layout.grid_view_item,
                new String[] { IMAGE_ITEM, TEXT_ITEM },
                new int[] { R.id.itemImage, R.id.itemText });
        // 设置GridView的adapter。GridView继承于AbsListView。
        mGridView.setAdapter(saImageItems);
        mGridView.setOnItemClickListener(this);
    }
    
    /**
     * 获取GridView的数据
     */
    private List<HashMap<String, Object>> getGridViewData() {
        List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
        
        for (int i=0; i<9; i++) {
            HashMap<String, Object> map = new HashMap<String, Object>(); 
            map.put(IMAGE_ITEM, arrImages[i]);
            map.put(TEXT_ITEM, arrText[i]);
            list.add(map);
        }
        
        return list;
    }

    /**
     * GridView的点击回调函数
     * 
     * @param adapter  -- GridView对应的dapterView
     * @param view     -- AdapterView中被点击的视图(它是由adapter提供的一个视图)。
     * @param position -- 视图在adapter中的位置。
     * @param rowid    -- 被点击元素的行id。
     */
    @Override
    public void onItemClick(AdapterView<?> adapter, View view, int position, long rowid) {

        // 根据元素位置获取对应的值
        HashMap<String, Object> item = (HashMap<String, Object>) adapter.getItemAtPosition(position);

        String itemText=(String)item.get(TEXT_ITEM);
        Object object=item.get(IMAGE_ITEM);
        Toast.makeText(this.getApplicationContext(), "You Select "+itemText, Toast.LENGTH_SHORT).show();
    }

}

layout布局文件(simple_grid_view_test.xml)代码：

<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=".SimleGridViewTest" >

    <GridView 
        android:id="@+id/gridview"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:numColumns="3"
        android:verticalSpacing="4dip"
        android:horizontalSpacing="4dip"
        android:columnWidth="90dip"
        android:gravity="center" />    

</RelativeLayout>

GridView的每个格子对应的layout布局文件(grid_view_item.xml)代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent">
    
    <ImageView
        android:id="@+id/itemImage"
        android:layout_width="160dip"
        android:layout_height="120dip"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY" />
    
    <TextView 
        android:id="@+id/itemText" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/itemImage"
        android:layout_centerHorizontal="true" 
        android:text="TextView01"/>
    
</RelativeLayout>

点击下载：源代码

运行效果图：