Android开发10.3：UI组件GridView网格视图

GridView(网格视图)

概述

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

        GridView和ListView有共同的父类 ： AbsListView

        区别：ListView只显示一列，而GridView可以显示多列

        GridView也需要通过Adapter来提供显示的数据

XML属性

android:columnWidth	setColumnWidth(int)	设置列的宽度
android:gravity	setGravity(int)	设置对齐方式
android:horizontalSpacing	setHorizontalSpacing(int)	设置各元素之间的水平间距
android:numColumns	setNumColumns(int)	设置列数
android:verticalSpacing	setVerticalSpacing(int)	设置各元素之间 的垂直间距

案例：带预览的图片

Android_GridView/res/layout_mian.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    >
    <!-- 定义一个GridView组件 -->
    <GridView 
        android:id="@+id/grid01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="1pt"
        android:verticalSpacing="1px"
        android:numColumns="4"
        android:gravity="center"
        />
    <!-- 定义一个ImageView组件 -->
    <ImageView android:id="@+id/image01"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>

Android_GridView/res/cell.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:gravity="center_horizontal"
	android:padding="2pt"
	>
<ImageView
	android:id="@+id/image1"
	android:layout_width="50dp" 
	android:layout_height="50dp" 
	/>	
</LinearLayout>

java代码

package com.example.android_gridview;

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

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {
	
	GridView grid;
	ImageView image;
	int[] imageIds = new int[]
			{
				R.drawable.one,
				R.drawable.two,
				R.drawable.three,
				R.drawable.four,
				R.drawable.one_one,
				R.drawable.two_two,
				R.drawable.three_three,
				R.drawable.four_four
			};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//创建一个List对象，List对象的元素是Map
		List<Map<String,Object>> listItems = new ArrayList<Map<String,Object>>();
		for(int i = 0 ; i < imageIds.length; i++){
			Map<String,Object> listItem = new HashMap<String,Object>();
			listItem.put("image", imageIds[i]);
			listItems.add(listItem);
		}
		//获取显示图片的 ImageView
		image = (ImageView) findViewById(R.id.image01);
		grid = (GridView) findViewById(R.id.grid01);
		//创建一个SimpleAdapter
		SimpleAdapter simpleAdapter = new SimpleAdapter (this,
				listItems,R.layout.cell,new String[] {"image"},new int[] {R.id.image1});
		
		//为GridView设置Adapter
		grid.setAdapter(simpleAdapter);
		//添加列表项被选中的监听器
		grid.setOnItemSelectedListener(new OnItemSelectedListener()
		{

			@Override
			public void onItemSelected(AdapterView<?> parent, View view,
					int position, long id) {
				// TODO Auto-generated method stub
				//显示当前被选中的图片
				image.setImageResource(imageIds[position]);
			}

			@Override
			public void onNothingSelected(AdapterView<?> arg0) {
				// TODO Auto-generated method stub
				
			}
			
		});
		//添加列表被单击的监听器
		grid.setOnItemClickListener(new OnItemClickListener()
		{

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position,
					long id) {
				// TODO Auto-generated method stub
				//显示被单击的图片
				image.setImageResource(imageIds[position]);
			}
			
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

调试效果