Android_Gallery（画廊）

转：http://blog.csdn.net/tianjf0514/article/details/7521398

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

主要内容

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

一、Gallery控件的使用

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

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"
&nbsp;       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;
    }
}