【Android 开发教程】Gallery和ImageView

本章节翻译自《Beginning-Android-4-Application-Development》，如有翻译不当的地方，敬请指出。

原书购买地址http://www.amazon.com/Beginning-Android-4-Application-Development/dp/1118199545/

Gallery可以显示一系列的图片，并且可以横向滑动。下面展示如何使用Gallery去显示一系列的图片。

1. 创建一个工程，Gallery。

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Images of San Francisco" />    
    
    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="320dp"
        android:layout_height="250dp"
        android:scaleType="fitXY" />

</LinearLayout>

3. 在res/values文件夹下面新建一个文件，attrs.xml。

4. attrs.xml中的代码。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Gallery1">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

5. 准备一些图片。将这些图片放在res/drawable-mdpi下面。

6. GalleryActivity.java中的代码。

public class GalleryActivity extends Activity {	
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Gallery gallery = (Gallery) findViewById(R.id.gallery1);

        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView<?> parent, View v,
            int position, long id)
            {
                Toast.makeText(getBaseContext(),
                        "pic" + (position + 1) + " selected",
                        Toast.LENGTH_SHORT).show();
                
                ImageView imageView = (ImageView) findViewById(R.id.image1);
                imageView.setImageResource(imageIDs[position]);
            }
        });
    }
    
    public class ImageAdapter extends BaseAdapter
    {
        Context context;
        int itemBackground;

        public ImageAdapter(Context c)
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);            
            
            itemBackground = a.getResourceId(
                R.styleable.Gallery1_android_galleryItemBackground, 0);                
            
            a.recycle();
        }

        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        }

        
        //---returns the item---
        public Object getItem(int position) {
            return position;
        }

         //---returns the ID of an item---
        public long getItemId(int position) {
            return position;
        }      
        
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
        	ImageView imageView;
            if (convertView == null) {
            	imageView = new ImageView(context);
                imageView.setImageResource(imageIDs[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));                	
            } else {
            	imageView = (ImageView) convertView;
            }            
            imageView.setBackgroundResource(itemBackground);
            return imageView;
        }
    }

}

7. 按F11在模拟器上面调试。会看见一系列的图片，这些图片可以左右滑动。当单击单个图片的时候，会弹出消息。

首先，我们在main.xml中添加Gallery和ImageView控件：

<Gallery
    android:id="@+id/gallery1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

<ImageView
    android:id="@+id/image1"
    android:layout_width="320dp"
    android:layout_height="250dp"
    android:scaleType="fitXY" />

前面已经提到过，Gallery用来显示一系列的图片，ImageView用来显示被选中的图片。

这些图片的id被保存在imageIDs数组中：

    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7
    };

接下来创建BaseAdapter的子类：ImageAdapter，这样一来，我们就能把Gallery与图片资源绑定在一起了。这个适配器起到了桥梁的作用。

使用BaseAdapter的视图的还有：

• ListView
• GridView
• Spinner
• Gallery

BaseAdapter也有一些子类：

• ListAdapter
• ArrayAdapter
• CursorAdapter
• SpinnerAdapter

在ImageAdapter中我们主要实现以下的方法：

public class ImageAdapter extends BaseAdapter
    {
        Context context;
        int itemBackground;

        public ImageAdapter(Context c)
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);            
            
            itemBackground = a.getResourceId(
                R.styleable.Gallery1_android_galleryItemBackground, 0);                
            
            a.recycle();
        }

        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        }

        
        //---returns the item---
        public Object getItem(int position) {
            return position;
        }

         //---returns the ID of an item---
        public long getItemId(int position) {
            return position;
        }      
        
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
        	ImageView imageView;
            if (convertView == null) {
            	imageView = new ImageView(context);
                imageView.setImageResource(imageIDs[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));                	
            } else {
            	imageView = (ImageView) convertView;
            }            
            imageView.setBackgroundResource(itemBackground);
            return imageView;
        }
    }