用Gallery（画廊）做的图片自动切换（可用作广告图片展示）

前言：好久没发博文了，今天抽空做了一个图片的自动切换的小例子。先贴上图片，有图才有激情嘛！

注意：右下角有四个圆点，有四张图片循环切换。

 

既然图片都上了，那就先来看界面布局是怎么做的吧！

整个界面才用相对布局，然后是Gallery控件；之后是一个线性布局，线性布局使用水平方式排列，里面有四张图片。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:soundEffectsEnabled="false"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/gallery"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/focused" />
        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/normal" />
        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/normal" />
        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/normal" />
        
    </LinearLayout>

</RelativeLayout>

其中第一张图片和其他图片不同，表示当前是第一张图片。

 

布局说完了，再来看图片切换的实现，图片切换采用Gallery(画廊)控件实现。

首先自定义一个适配器继承BaseAdapter，用于实现图片的切换。下面是整个适配器的代码：

 

package com.maandroid.galleryproject;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class GalleryAdapter extends BaseAdapter {

    private Context context = null;
    // 定义一个数组，用来存要显示的图片资源
    private int images[] = { R.drawable.meinv1, R.drawable.meinv2,
            R.drawable.meinv3, R.drawable.meinv4 };

    public GalleryAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {// 取得显示的内容数量，这里设为最大
        return Integer.MAX_VALUE;// 资源数量
    }

    @Override
    public Object getItem(int position) {// 取得显示项
        return images[position % images.length];
    }

    @Override
    public long getItemId(int position) {// 取得项的ID
        return images[position % images.length];
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView image = new ImageView(this.context);// 创建ImageView组件
        image.setImageResource(images[position % images.length]);// 将指定的资源设置到ImageView组件中
        image.setScaleType(ImageView.ScaleType.FIT_XY);// 设置图片根据尺寸显示
        image.setLayoutParams(new Gallery.LayoutParams(// 设置图片的宽高
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        return image;
    }
}

上面代码的注释已经很详细了，这里需要注意的是

@Override
    public int getCount() {// 取得显示的内容数量，这里设为最大
        return Integer.MAX_VALUE;// 资源数量
    }

images[position % images.length]

（这里要注意在任何使用数据的时候千万要记得取模.否则就边界值异常了哦。）

这两个是关键，用于实现图片的循环滑动，不过现在还是手动的，接下来需要让图片自动滑动。

先来看主界面的代码：

 

package com.maandroid.galleryproject;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery;
import android.widget.ImageView;

public class MainActivity extends Activity {

    //定义画廊控件
    private Gallery gallery = null;
    //定义图片控件
    private ImageView image1, image2, image3, image4;
    //当前位置
    private int position = 0;

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

        //实例化图片控件
        image1 = (ImageView) findViewById(R.id.image1);
        image2 = (ImageView) findViewById(R.id.image2);
        image3 = (ImageView) findViewById(R.id.image3);
        image4 = (ImageView) findViewById(R.id.image4);
        //实例化画廊控件
        gallery = (Gallery) findViewById(R.id.gallery);
        //装载内容
        gallery.setAdapter(new GalleryAdapter(this));
        //设置项的选中监听
        gallery.setOnItemSelectedListener(new OnItemSelectedListenerImpl());
        //启动线程
        timer.schedule(task, 3000, 3000);
    }

    //项的监听实现
    private class OnItemSelectedListenerImpl implements OnItemSelectedListener {

        @Override
        public void onItemSelected(AdapterView<?> parent, View view,
                int position, long id) {
            switch (position % 4) {
            case 0:
                //设置显示图片
                image1.setImageResource(R.drawable.focused);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.normal);
                break;
            case 1:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.focused);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.normal);
                break;
            case 2:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.focused);
                image4.setImageResource(R.drawable.normal);
                break;
            case 3:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.focused);
                break;
            default:
                break;
            }
        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {
            // TODO Auto-generated method stub

        }
    }

    //销魂线程
    @Override
    protected void onDestroy() {
        timer.cancel();
        super.onDestroy();
    }

    // 设置自动循环的线程
    private static final int timerAnimation = 1;
    private final Handler mHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case timerAnimation:
                gallery.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
                position++;
                break;
            default:
                break;
            }
        };
    };
    private final Timer timer = new Timer();
    private final TimerTask task = new TimerTask() {
        public void run() {
            mHandler.sendEmptyMessage(timerAnimation);
        }
    };
}

这里自动切换用线程来实现，停留时间设置为3秒（可以根据需要来实现）

//启动线程
        timer.schedule(task, 3000, 3000);

在线程里写了一个，向右滑动的操作；每次运行一次都向右滑动一次，以此来实现自动切换图片。同时每次线程运行一次，当前位置都加一。

gallery.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
                position++;

到这里图片的自动循环切换就讲完了。接下来，来看右下角的四个圆点是怎么实现的？

这里先对gallery控件注册了一个OnItemSelectedListener监听事件，然后在这个事件里实现四个圆点的显示。

//设置项的选中监听
        gallery.setOnItemSelectedListener(new OnItemSelectedListenerImpl());

//项的监听实现
    private class OnItemSelectedListenerImpl implements OnItemSelectedListener {

        @Override
        public void onItemSelected(AdapterView<?> parent, View view,
                int position, long id) {
            switch (position % 4) {
            case 0:
                //设置显示图片
                image1.setImageResource(R.drawable.focused);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.normal);
                break;
            case 1:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.focused);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.normal);
                break;
            case 2:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.focused);
                image4.setImageResource(R.drawable.normal);
                break;
            case 3:
                image1.setImageResource(R.drawable.normal);
                image2.setImageResource(R.drawable.normal);
                image3.setImageResource(R.drawable.normal);
                image4.setImageResource(R.drawable.focused);
                break;
            default:
                break;
            }
        }

这里对用position%4，这样就保证结果在0、1、2、3四个数字波动，还有因为有四个圆点，所以是模4（可根据需要自己改变数字）。

最后根据结果设置四张图片的显示。

注意事项：

1、在真机上滑动的时候，会产生声音，需要在gallery的布局里加上下面的属性

android:soundEffectsEnabled="false"

2、还有gallery的布局属性不能设置图片之间的间隙，不然将无法实现图片的自动切换。如下

android:spacing="5dp"

程序代码我已经上传到CSDN了，有需要的去下载吧！
http://download.csdn.net/detail/ouyangjiangtao/5347791

欢迎大家访问我的个人博客网站：http://www.cnpath.com

附上其他几张程序截图！（有美女看哦！）