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;}@Overridepublic int getCount() {return arrayImages.length;}@Overridepublic Object getItem(int position) {return arrayImages[position];}@Overridepublic long getItemId(int position) {return position;}/** * 將資源圖片設定到ImageView中 */@Overridepublic 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 implementsOnItemClickListener {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);}/** * 設定某張圖片被點擊的事件處理 */@Overridepublic 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 implementsOnItemClickListener {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 });}@Overridepublic 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 implementsOnItemClickListener, 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給ImageSwitchermImageSwitcher.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 });}@Overridepublic 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"));}@Overridepublic View makeView() {ImageView imageView = new ImageView(this);imageView.setBackgroundColor(0xFFFFFFFF);// 設定置中對齊imageView.setScaleType(ImageView.ScaleType.FIT_XY);imageView.setLayoutParams(new ImageSwitcher.LayoutParams(