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;

	}



}

调试效果