android学习笔记14——GridView、ImageSwitcher

GridView--网格视图、ImageSwitcher--图像切换器

==》

GridView，用于在界面上按行、列的分布形式显示多个组件；GridView和ListView父类相同——AbsListView,两者的主要区别是ListView属单方向分布，GridView属两个方向分布。

GridView也是通过Adapter提供显示数据——可通过SimpleAdapter或者自定义方式(开发重写BaseAdapter)提供数据显示。

GridView常用XML属性：

android:columnWidth	setcolumnWidth(int)	设置列的宽度
android:gravity	setGravity(int)	设置对其方式
android:horizontalSpacing	setHorizontalSpacing(int)	设置各元素之间的水平间距
android:numColumns	setNumColumns(int)	设置列数
android:stretchMode	setStretchMode(int)	设置拉伸模式
android:verticalSpacing	setVerticalSpacing(int)	设置各元素

注意：

GridView在使用时，android:columnWidth属性设置一般都大于“1”，默认为1.

android:stretchMode支持的属性：

　　NO_STRETCH:不拉伸

　　STRETCH_SPACING:仅拉伸元素之间的间距

　　STRETCH_SPACING_UNIFORM：表格元素本身、元素之间的间距一起拉伸

　　STRETCH_SPACING_COLUMN_WIDTH：仅拉伸元素表格元素本身　　

ImageSwitcher

==>

ImageSwitcher由FrameLayout派生而来，ImageSwitcher和ImageView很相似，都用于显示图片。

ImageSwitcher比后者多了一个功能——显示的图片切换时可以设置动画效果。

使用ImageSwitcher需要为其设置一个ImageSwitcher.ViewFactory，

实现ImageSwitcher.ViewFactory时需要实现一个makeView()——该方法通常返回一个ImageView,而ImageSwitcher则负责显示这个ImageView.

实例一：

布局文件==》
<LinearLayout 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:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/gvcontent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="2pt"
        android:numColumns="4"
        android:verticalSpacing="2pt" />

    <ImageSwitcher
        android:id="@+id/imgswitcher"
        android:layout_gravity="center_horizontal"
        android:layout_width="320dp"
        android:layout_height="320dp" />

</LinearLayout>

cell.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" >

    <ImageView
        android:id="@+id/imgview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

代码实现==》
package com.example.mygridview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.os.Build;
import android.os.Bundle;
import android.annotation.TargetApi;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher.ViewFactory;

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class MainActivity extends Activity
{
	private int[] ImageIds = new int[]
	{ R.drawable.one, R.drawable.tw, R.drawable.th, R.drawable.eight, R.drawable.ele,
			R.drawable.five, R.drawable.four, R.drawable.nice, R.drawable.seven, R.drawable.six,
			R.drawable.sl, R.drawable.ss, R.drawable.sw, R.drawable.ten, R.drawable.tw,
			R.drawable.oneowne };
	private ImageSwitcher Switcher;

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

		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
		for (int i = 0; i < ImageIds.length; i++)
		{
			Map<String, Object> item = new HashMap<String, Object>();
			item.put("image", ImageIds[i]);
			list.add(item);
		}

		Switcher = (ImageSwitcher) this.findViewById(R.id.imgswitcher);
		// 设置图片更换的动画效果
		Switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
		Switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
		// 为ImageSwitcher设置图片切换的动画效果
		Switcher.setFactory(new ViewFactory()
		{
			@Override
			public View makeView()
			{
				ImageView img = new ImageView(MainActivity.this);
				img.setBackgroundColor(0xff0000);
				img.setScaleType(ImageView.ScaleType.FIT_CENTER);
				img.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
				return img;
			}
		});

		// 创建一个SimpleAdapter
		SimpleAdapter adaper = new SimpleAdapter(this, list, R.layout.cell, new String[]
		{ "image" }, new int[]
		{ R.id.imgview });

		GridView gv = (GridView) this.findViewById(R.id.gvcontent);
		gv.setAdapter(adaper);
		// 以下为两种处理事件的方式
		// 方式一，建议使用
		gv.setOnItemClickListener(new myGridViewItemOnListener());
		// 方式二
		gv.setOnItemClickListener(new OnItemClickListener()
		{
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id)
			{
				// 显示当前被选中的图片
				Switcher.setImageResource(ImageIds[position % ImageIds.length]);
			}
		});
	}

	private class myGridViewItemOnListener implements OnItemClickListener
	{
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position, long id)
		{
			// 显示当前被选中的图片
			Switcher.setImageResource(ImageIds[position % ImageIds.length]);
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu)
	{
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

注意：单击GridView中的图片ImageSwitcher会显示对应的图片信息。

运行效果如下：