03 Android Gallery 和 ImageView 的组合使用

一个关于Gallery 和 ImageView最简单的实例程序，目的是把Gallery和ImageView的使用描述清楚。

程序的运行效果

控件之间的关系图

程序中涉及到的类，接口，及作用：

ImageView：一个图像显示的控件，把大图片显示到设备的屏幕上。

OnItemClickListener：响应用户对Gallery中预览图标的双击操作，把图片设置在ImageView上

Gallery：一个缩略图的浏览器，显示一个图像的列表。

BaseAdapter ：是数据源和UI组件之间的桥梁，为Gallery提供数据源。

一些小的细节

1) 预览图片边框的设置。

首先看看两幅图片的比较，关注Gallery 部分。

实例图片 1



实例图片 2



第一幅的预览图片大小不一，不规整，第二幅图每幅预览图都有一个边框，整体看起来规整清爽。

这里用到的就是设置 <attr name="android:galleryItemBackground" /> 属性。

在工程中添加一个属性文件 attrs.xml

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

在工程中首先取得这个属性：

//在工程中定义了一个attrs.xml的文件，其中定义了一个Gallery的属性，
//它用到了<attr name="android:galleryItemBackground" />
//作用是为每个Gallery的预览的图片设置一边框，显示起来更加美观。
TypedArray attr = obtainStyledAttributes(R.styleable.Gallery);
m_nGalleryItemBackground = attr.getResourceId(
R.styleable.Gallery_android_galleryItemBackground, 0);
attr.recycle();

在设置BaseAdapter getView接口时，我们是为每个预览的小图片都创建了一ImageView，在创建完后，要把setBackgroundResource设置为上面的GalleryItemBackground的属性。

/* 取得目前欲显示的图像View，传入数组ID值使之读取与成像 */
public View getView(int position, View convertView, ViewGroup parent)
{
/* 创建一个ImageView对象 */
ImageView i = new ImageView(this.myContext);

i.setImageResource(myImageIds[position]);
i.setId(myImageIds[position]);

i.setScaleType(ImageView.ScaleType.FIT_XY);
/* 设置这个ImageView对象的宽高，单位为dip */
i.setLayoutParams(new Gallery.LayoutParams(120, 140));

//设置预览图片边框
i.setBackgroundResource(m_nGalleryItemBackground);
return i;
}

2) 在ImageView中使用DrawingCache

在显示大图的ImageView中可以设置setDrawingCacheEnabled 为True。这样在ImageView的显示的时候可以把要显示的图片先画在一个bitmap中，在没有硬件加速的情况下，可以提高一定的速度。

m_MirrorGallery.setOnItemSelectedListener(new OnItemSelectedListener()
{
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3)
{
Bitmap orgBitmap;
// TODO Auto-generated method stub
m_MirrorView.setImageResource(myImageIds[arg2]);

m_MirrorView.setDrawingCacheEnabled(true);
orgBitmap = Bitmap.createBitmap(m_MirrorView.getDrawingCache());
m_MirrorView.setDrawingCacheEnabled(false);
m_MirrorView.setImageBitmap(orgBitmap);
}

@Override
public void onNothingSelected(AdapterView<?> arg0)
{
}
});

实例代码：

attrs.xml

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

main_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/iv"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:background="@color/Black"
android:scaleType="centerInside"
android:src="@drawable/pic_01" />

<Gallery
android:id="@+id/mygallery"
android:layout_width="fill_parent"
android:layout_height="100dp" />

</LinearLayout>

MainActivity.java

package com.example.galleryandimageview;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class MainActivity extends Activity {

private ImageView m_MirrorView;
private Gallery m_MirrorGallery;
private int m_nGalleryItemBackground;

private int[] myImageIds = { R.drawable.pic_01, R.drawable.pic_02,
R.drawable.pic_03, R.drawable.pic_04, R.drawable.pic_05,
R.drawable.pic_06, R.drawable.pic_07, R.drawable.pic_08,
R.drawable.pic_09, };

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

m_MirrorGallery = (Gallery) findViewById(R.id.mygallery);
m_MirrorView = (ImageView) findViewById(R.id.iv);

m_MirrorView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

/* 新增一ImageAdapter并设定给Gallery对象 */
m_MirrorGallery.setAdapter(new ImageAdapter(this));

/* 设定一个itemclickListener并Toast被点选图片的位置 */
m_MirrorGallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v,
int position, long id)
{
}
});

m_MirrorGallery.setOnItemSelectedListener(new OnItemSelectedListener()
{
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3)
{
Bitmap orgBitmap;
// TODO Auto-generated method stub
m_MirrorView.setImageResource(myImageIds[arg2]);

//m_MirrorView.setDrawingCacheEnabled(true);
//orgBitmap = Bitmap.createBitmap(m_MirrorView.getDrawingCache());
//m_MirrorView.setDrawingCacheEnabled(false);
//m_MirrorView.setImageBitmap(orgBitmap);
}

@Override
public void onNothingSelected(AdapterView<?> arg0)
{
}
});
}

public class ImageAdapter extends BaseAdapter
{
/* 类成员 myContext为Context父类 */
private Context myContext;

/* 构造器只有一个参数，即要存储的Context */
public ImageAdapter(Context c)
{
this.myContext = c;

//在工程中定义了一个attrs.xml的文件，其中定义了一个Gallery的属性，
//它用到了<attr name="android:galleryItemBackground" />
//作用是为每个Gallery的预览的图片设置一边框，显示起来更加美观。
TypedArray attr = obtainStyledAttributes(R.styleable.Gallery);
m_nGalleryItemBackground = attr.getResourceId(
R.styleable.Gallery_android_galleryItemBackground, 0);
attr.recycle();
}

/* 返回所有已定义的图片总数量 */
public int getCount()
{
return myImageIds.length;
}

/* 利用getItem方法，取得目前容器中图像的数组ID */
public Object getItem(int position)
{
return position;
}

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

/* 取得目前欲显示的图像View，传入数组ID值使之读取与成像 */
public View getView(int position, View convertView, ViewGroup parent)
{
/* 创建一个ImageView对象 */
ImageView i = new ImageView(this.myContext);

i.setImageResource(myImageIds[position]);
i.setId(myImageIds[position]);

i.setScaleType(ImageView.ScaleType.FIT_XY);
/* 设置这个ImageView对象的宽高，单位为dip */
i.setLayoutParams(new Gallery.LayoutParams(120, 140));

// 设置预览图片的边框
i.setBackgroundResource(m_nGalleryItemBackground);
return i;
}

/* 依据距离中央的位移量 利用getScale返回views的大小(0.0f to 1.0f) */
public float getScale(boolean focused, int offset)
{
/* Formula: 1 / (2 ^ offset) */
// return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
return 0;
}

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

实例代码下载