Android_Gallery（画廊）

Gallery是画廊的意思，可以实现图片的浏览功能。

主要内容

• Gallery控件的使用
• 使用Gallery + ImageSwitcher完成图片浏览功能

一、Gallery控件的使用

要把图片显示到Gallery里面，要使用Gallery的setAdapter()方法，所以我们先写好一个adapter类

GalleryAdapter.java

package com.tianjf;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.Gallery.LayoutParams;
import android.widget.ImageView;

public class GalleryAdapter extends BaseAdapter {

	private Context mContext;

	// 所要显示的图片的数组
	private int[] arrayImages = new int[] { R.drawable.pic01, R.drawable.pic02,
			R.drawable.pic03, R.drawable.pic04, R.drawable.pic05, };

	// 构造方法
	public GalleryAdapter(Context mContext) {
		super();
		this.mContext = mContext;
	}

	@Override
	public int getCount() {
		return arrayImages.length;
	}

	@Override
	public Object getItem(int position) {
		return arrayImages[position];
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	/**
	 * 将资源图片设置到ImageView中
	 */
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageView = new ImageView(mContext);
		imageView.setBackgroundColor(0xFFFFFFFF);
		// 将指定资源图片设置到ImageView中去
		imageView.setImageResource(arrayImages[position]);
		// 设置居中对齐
		imageView.setScaleType(ImageView.ScaleType.CENTER);
		imageView.setLayoutParams(new Gallery.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
		return imageView;
	}
}

接着我们把Gallery定义到布局文件中去

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:spacing="5dip" />

</LinearLayout>

接着我们在Activity中将GalleryAdapter添加到Gallery上并设置Gallery的onItemClick事件

package com.tianjf;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery;

public class GalleryDemoActivity extends Activity implements
		OnItemClickListener {

	private Gallery gallery;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		gallery = (Gallery) findViewById(R.id.gallery);
		gallery.setAdapter(new GalleryAdapter(this));
		// 设置某张图片被点击的事件处理
		gallery.setOnItemClickListener(this);
	}

	/**
	 * 设置某张图片被点击的事件处理
	 */
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		Toast.makeText(this, String.valueOf(position), Toast.LENGTH_SHORT)
				.show();
	}
}

看一看效果：图片可以左右拖动，并且单击了某张图片出来一个Toast

另外，Gallery的实现和ListView是很类似的

除了使用BaseAdapter的方法，还可以直接使用SimpleAdapter的方法，更简单一点。

用SimpleAdapter，我们需要重新新建一个供SimpleAdapter用的布局文件（用来放一个一个的资源图片）

gallery_item.xml

<?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:orientation="vertical" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center" />

</LinearLayout>

下面是修改后的GalleryDemoActivity.java

package com.tianjf;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.SimpleAdapter;
import android.widget.Gallery;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class GalleryDemoActivity extends Activity implements
		OnItemClickListener {

	private Gallery mGallery;
	private SimpleAdapter mSimpleAdapter;
	private List<Map<String, Integer>> mList = new ArrayList<Map<String, Integer>>();

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mGallery = (Gallery) findViewById(R.id.gallery);
		initSimpleAdapter();
		mGallery.setAdapter(mSimpleAdapter);
		mGallery.setOnItemClickListener(this);
	}

	private void initSimpleAdapter() {
		// private int[] arrayImages = new int[] { R.drawable.pic01,
		// R.drawable.pic02, R.drawable.pic03, R.drawable.pic04,
		// R.drawable.pic05, };
		// 以上的方法之适用显示比较少的图片，要是现在要显示1000张图片呢，不可能把1000张图片一个一个列出来
		// 我们可以使用Java的反射机制来解决此问题，可以使用反射机制动态加载（最好图片的命名要有规律）
		Field[] fields = R.drawable.class.getDeclaredFields(); // 取得drawable下的全部属性
		// 循环取得的属性，以pic开头的都是要显示的图片，保存到list里面
		for (Field field : fields) {
			if (field.getName().startsWith("pic")) {
				Map<String, Integer> map = new HashMap<String, Integer>();
				try {
					map.put("image", field.getInt(R.drawable.class));
				} catch (Exception e) {
					e.printStackTrace();
				}
				mList.add(map);
			}
		}
		mSimpleAdapter = new SimpleAdapter(this, mList, R.layout.gallery_item,
				new String[] { "image" }, new int[] { R.id.image });
	}
	
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		Toast.makeText(this, String.valueOf(position), Toast.LENGTH_SHORT)
				.show();
	}
}

运行一下，看看效果是不是和BaseAdapter一样

二、使用Gallery + ImageSwitcher完成图片浏览功能

以上例子只是简单的实现了Gallery控件，能够拖动，但是怎么样使得触摸了其中一张图片，然后将这张图片显示在正中央放大显示呢？这才真正实现了图片浏览效果。

要实现以上效果，就要使用到ImageSwitcher类

首先，修改main.xml，把ImageSwitcher控件添加进去

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

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >
    </ImageSwitcher>

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:spacing="5dip" />

</LinearLayout>

修改GalleryDemoActivity.java，设置ImageSwitcher的mFactory属性，那么factory就会创造ImageView给ImageSwitcher

然后在onItemClick里面把资源图片添加到factory给ImageSwitcher创造出来的ImageView上

package com.tianjf;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.Gallery;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;

public class GalleryDemoActivity extends Activity implements
		OnItemClickListener, ViewFactory {

	private Gallery mGallery;
	private ImageSwitcher mImageSwitcher;
	private SimpleAdapter mSimpleAdapter;
	private List<Map<String, Integer>> mList = new ArrayList<Map<String, Integer>>();

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mGallery = (Gallery) findViewById(R.id.gallery);
		mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);

		initSimpleAdapter();
		mGallery.setAdapter(mSimpleAdapter);
		mGallery.setOnItemClickListener(this);

		// 设置工厂，实现ViewFactory的makeView方法生成ImageView给ImageSwitcher
		mImageSwitcher.setFactory(this);
	}

	private void initSimpleAdapter() {
		// private int[] arrayImages = new int[] { R.drawable.pic01,
		// R.drawable.pic02, R.drawable.pic03, R.drawable.pic04,
		// R.drawable.pic05, };
		// 以上的方法之适用显示比较少的图片，要是现在要显示1000张图片呢，不可能把1000张图片一个一个列出来
		// 我们可以使用Java的反射机制来解决此问题，可以使用反射机制动态加载（最好图片的命名要有规律）
		Field[] fields = R.drawable.class.getDeclaredFields(); // 取得drawable下的全部属性
		// 循环取得的属性，以pic开头的都是要显示的图片，保存到list里面
		for (Field field : fields) {
			if (field.getName().startsWith("pic")) {
				Map<String, Integer> map = new HashMap<String, Integer>();
				try {
					map.put("image", field.getInt(R.drawable.class));
				} catch (Exception e) {
					e.printStackTrace();
				}
				mList.add(map);
			}
		}
		mSimpleAdapter = new SimpleAdapter(this, mList, R.layout.gallery_item,
				new String[] { "image" }, new int[] { R.id.image });
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		@SuppressWarnings("unchecked")
		Map<String, Integer> map = (Map<String, Integer>) parent.getAdapter()
				.getItem(position);
		mImageSwitcher.setImageResource(map.get("image"));
	}

	@Override
	public View makeView() {
		ImageView imageView = new ImageView(this);
		imageView.setBackgroundColor(0xFFFFFFFF);
		// 设置居中对齐
		imageView.setScaleType(ImageView.ScaleType.FIT_XY);
		imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		return imageView;
	}
}

最后附上上面3个demo的代码

GalleryDemo_BaseAdapter.rar

GalleryDemo_SimpleAdapter.rar

Gallery&ImageSwitcherDemo.rar