首页 > 代码库 > Android ImageSwitcher和Gallery的使用

Android ImageSwitcher和Gallery的使用

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

我当时晃眼一看,第一感觉好高级的样子。我还没做过这种效果呢,但室友说他们同学已经有人做出来了,我觉得既然有人做出来了,那么我也应该做出来,于是上个星期五的时候在教室研究了一下午,最后在网上找到了两个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对象

        }
    }
}

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