前几天,听说室友的老师要求他们做一个图片效果。其效果如下图所示(可左右滑动切换图片):

Android ImageSwitcher和Gallery的使用-LMLPHP

我当时晃眼一看,第一感觉好高级的样子。我还没做过这种效果呢,但室友说他们同学已经有人做出来了,我觉得既然有人做出来了,那么我也应该做出来,于是上个星期五的时候在教室研究了一下午,最后在网上找到了两个Demo都与这个效果类似但又不完全一样,果断下载下来研究研究,结果才发现其实这个效果并没有你想的那么难。

废话不多说,上代码:

main.xml:(其实就是两个控件的使用ImageSwitcher和Gallery)

<?xml version="1.0" encoding="utf-8"?>

<!-- 相对布局 -->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- 单个图片显示 -->
<ImageSwitcher
android:id="@+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<!-- 显示图片列表控件 -->
<Gallery
android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dip" >
</Gallery> </RelativeLayout>

创建一个新的JAVA文件galleryImage.java(并在清单文件中设置为默认):

public class galleryImage extends Activity {
private Gallery gallery;
ImageSwitcher imageSwitcher; // 声明ImageSwitcher对象,图片显示区域
public List<Map<String, Object>> list;
private int[] myImageIds = { R.drawable.i1, R.drawable.i2, R.drawable.i3,
R.drawable.i4 }; /** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
Init(); } /**
* 初始化
*/
public void Init(){
// 通过控件的ID获得imageSwitcher的对象
imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
// 设置自定义的图片显示工厂类
imageSwitcher.setFactory(new MyViewFactory(this)); Animation();
/*adapter = new SwitchereAdapter(this);
adapter.createReflectedImages(); // 创建倒影效果
gallery.setAdapter(adapter);*/
gallery = (Gallery) findViewById(R.id.gallery);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemSelectedListener(new OnItemSelectedListener() { @Override
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
// 通过求余数,循环显示图片 imageSwitcher.setImageResource(myImageIds[position
% myImageIds.length]);
} @Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub } });
} public void ChangeScale(){ } /**
* 动画效果
*/
public void Animation() {
// 设置ImageSwitcher组件显示图像的动画效果
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
} /**
* Gallery的图片适配器
* @author AF74776
*
*/
public class ImageAdapter extends BaseAdapter {
// 声明一个变量
int mGalleryItemBackGround;
private Context mContext; public ImageAdapter(Context c) {
mContext = c;
// 实用布局文件中的Gallery属性
TypedArray a = obtainStyledAttributes(R.styleable.Gallery);
// 取得gallery属性饿index id
mGalleryItemBackGround = a.getResourceId(
R.styleable.Gallery_android_galleryItemBackground, 0);
// 让对象的styleable属性能反复实用
a.recycle();
} public int getCount() {// 返回数组长度
// TODO Auto-generated method stub
return Integer.MAX_VALUE;
} public Object getItem(int position) {
return position;
} public long getItemId(int position) {// 得到图片ID
return position;
} public View getView(int position, View converView, ViewGroup parent) {
ImageView i = new ImageView(mContext);
// i.setImageResource(myImageIds[position %myImageIds.length ]);
i.setImageResource(myImageIds[position % myImageIds.length]);
i.setAdjustViewBounds(true); // 图片自动调整显示
i.setScaleType(ImageView.ScaleType.FIT_XY);// 重新设置图片的宽高
i.setLayoutParams(new Gallery.LayoutParams(200, 200));// 设置layout的宽高
i.setBackgroundResource(mGalleryItemBackGround);// 设置背景
return i;// 返回对象
} } // 自定义图片显示工厂类,继承ViewFactory class MyViewFactory implements ViewFactory { private Context context; // 定义上下文 // 参数为上下文的构造方法 public MyViewFactory(Context context) { this.context = context; } // 显示图标区域 public View makeView() { ImageView iv = new ImageView(context); // 创建ImageView对象 iv.setScaleType(ImageView.ScaleType.FIT_CENTER); // 图片自动居中显示 // 设置图片的宽和高 iv.setLayoutParams(new ImageSwitcher.LayoutParams(
400, 400)); return iv; // 返回ImageView对象 }
}
}

代码中有详细的注释,我觉得我都能看懂(自认为自己比较笨),相信大家也一定能看懂。

04-26 23:30