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

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

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

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

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

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5 
 6     <Gallery
 7         android:id="@+id/gallery"
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:soundEffectsEnabled="false"/>
11 
12     <LinearLayout
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:layout_alignBottom="@+id/gallery"
16         android:layout_alignParentRight="true"
17         android:layout_marginRight="10dp"
18         android:orientation="horizontal" >
19 
20         <ImageView
21             android:id="@+id/image1"
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:contentDescription="@string/app_name"
25             android:src="@drawable/focused" />
26         <ImageView
27             android:id="@+id/image2"
28             android:layout_width="wrap_content"
29             android:layout_height="wrap_content"
30             android:contentDescription="@string/app_name"
31             android:src="@drawable/normal" />
32         <ImageView
33             android:id="@+id/image3"
34             android:layout_width="wrap_content"
35             android:layout_height="wrap_content"
36             android:contentDescription="@string/app_name"
37             android:src="@drawable/normal" />
38         <ImageView
39             android:id="@+id/image4"
40             android:layout_width="wrap_content"
41             android:layout_height="wrap_content"
42             android:contentDescription="@string/app_name"
43             android:src="@drawable/normal" />
44         
45     </LinearLayout>
46 
47 </RelativeLayout>

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

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

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

 1 package com.maandroid.galleryproject;
 2 
 3 import android.content.Context;
 4 import android.view.View;
 5 import android.view.ViewGroup;
 6 import android.view.ViewGroup.LayoutParams;
 7 import android.widget.BaseAdapter;
 8 import android.widget.Gallery;
 9 import android.widget.ImageView;
10 
11 public class GalleryAdapter extends BaseAdapter {
12 
13     private Context context = null;
14     // 定义一个数组，用来存要显示的图片资源
15     private int images[] = { R.drawable.meinv1, R.drawable.meinv2,
16             R.drawable.meinv3, R.drawable.meinv4 };
17 
18     public GalleryAdapter(Context context) {
19         this.context = context;
20     }
21 
22     @Override
23     public int getCount() {// 取得显示的内容数量，这里设为最大
24         return Integer.MAX_VALUE;// 资源数量
25     }
26 
27     @Override
28     public Object getItem(int position) {// 取得显示项
29         return images[position % images.length];
30     }
31 
32     @Override
33     public long getItemId(int position) {// 取得项的ID
34         return images[position % images.length];
35     }
36 
37     @Override
38     public View getView(int position, View convertView, ViewGroup parent) {
39         ImageView image = new ImageView(this.context);// 创建ImageView组件
40         image.setImageResource(images[position % images.length]);// 将指定的资源设置到ImageView组件中
41         image.setScaleType(ImageView.ScaleType.FIT_XY);// 设置图片根据尺寸显示
42         image.setLayoutParams(new Gallery.LayoutParams(// 设置图片的宽高
43                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
44         return image;
45     }
46 }

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

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

1 images[position % images.length]

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

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

先来看主界面的代码：

  1 package com.maandroid.galleryproject;
  2 
  3 import java.util.Timer;
  4 import java.util.TimerTask;
  5 
  6 import android.app.Activity;
  7 import android.os.Bundle;
  8 import android.os.Handler;
  9 import android.view.KeyEvent;
 10 import android.view.View;
 11 import android.widget.AdapterView;
 12 import android.widget.AdapterView.OnItemSelectedListener;
 13 import android.widget.Gallery;
 14 import android.widget.ImageView;
 15 
 16 public class MainActivity extends Activity {
 17 
 18     //定义画廊控件
 19     private Gallery gallery = null;
 20     //定义图片控件
 21     private ImageView image1, image2, image3, image4;
 22     //当前位置
 23     private int position = 0;
 24 
 25     @Override
 26     protected void onCreate(Bundle savedInstanceState) {
 27         super.onCreate(savedInstanceState);
 28         setContentView(R.layout.activity_main);
 29 
 30         //实例化图片控件
 31         image1 = (ImageView) findViewById(R.id.image1);
 32         image2 = (ImageView) findViewById(R.id.image2);
 33         image3 = (ImageView) findViewById(R.id.image3);
 34         image4 = (ImageView) findViewById(R.id.image4);
 35         //实例化画廊控件
 36         gallery = (Gallery) findViewById(R.id.gallery);
 37         //装载内容
 38         gallery.setAdapter(new GalleryAdapter(this));
 39         //设置项的选中监听
 40         gallery.setOnItemSelectedListener(new OnItemSelectedListenerImpl());
 41         //启动线程
 42         timer.schedule(task, 3000, 3000);
 43     }
 44 
 45     //项的监听实现
 46     private class OnItemSelectedListenerImpl implements OnItemSelectedListener {
 47 
 48         @Override
 49         public void onItemSelected(AdapterView<?> parent, View view,
 50                 int position, long id) {
 51             switch (position % 4) {
 52             case 0:
 53                 //设置显示图片
 54                 image1.setImageResource(R.drawable.focused);
 55                 image2.setImageResource(R.drawable.normal);
 56                 image3.setImageResource(R.drawable.normal);
 57                 image4.setImageResource(R.drawable.normal);
 58                 break;
 59             case 1:
 60                 image1.setImageResource(R.drawable.normal);
 61                 image2.setImageResource(R.drawable.focused);
 62                 image3.setImageResource(R.drawable.normal);
 63                 image4.setImageResource(R.drawable.normal);
 64                 break;
 65             case 2:
 66                 image1.setImageResource(R.drawable.normal);
 67                 image2.setImageResource(R.drawable.normal);
 68                 image3.setImageResource(R.drawable.focused);
 69                 image4.setImageResource(R.drawable.normal);
 70                 break;
 71             case 3:
 72                 image1.setImageResource(R.drawable.normal);
 73                 image2.setImageResource(R.drawable.normal);
 74                 image3.setImageResource(R.drawable.normal);
 75                 image4.setImageResource(R.drawable.focused);
 76                 break;
 77             default:
 78                 break;
 79             }
 80         }
 81 
 82         @Override
 83         public void onNothingSelected(AdapterView<?> parent) {
 84             // TODO Auto-generated method stub
 85 
 86         }
 87     }
 88 
 89     //销魂线程
 90     @Override
 91     protected void onDestroy() {
 92         timer.cancel();
 93         super.onDestroy();
 94     }
 95 
 96     // 设置自动循环的线程
 97     private static final int timerAnimation = 1;
 98     private final Handler mHandler = new Handler() {
 99         public void handleMessage(android.os.Message msg) {
100             switch (msg.what) {
101             case timerAnimation:
102                 gallery.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
103                 position++;
104                 break;
105             default:
106                 break;
107             }
108         };
109     };
110     private final Timer timer = new Timer();
111     private final TimerTask task = new TimerTask() {
112         public void run() {
113             mHandler.sendEmptyMessage(timerAnimation);
114         }
115     };
116 }

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

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

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

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

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

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

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

 1 //项的监听实现
 2     private class OnItemSelectedListenerImpl implements OnItemSelectedListener {
 3 
 4         @Override
 5         public void onItemSelected(AdapterView<?> parent, View view,
 6                 int position, long id) {
 7             switch (position % 4) {
 8             case 0:
 9                 //设置显示图片
10                 image1.setImageResource(R.drawable.focused);
11                 image2.setImageResource(R.drawable.normal);
12                 image3.setImageResource(R.drawable.normal);
13                 image4.setImageResource(R.drawable.normal);
14                 break;
15             case 1:
16                 image1.setImageResource(R.drawable.normal);
17                 image2.setImageResource(R.drawable.focused);
18                 image3.setImageResource(R.drawable.normal);
19                 image4.setImageResource(R.drawable.normal);
20                 break;
21             case 2:
22                 image1.setImageResource(R.drawable.normal);
23                 image2.setImageResource(R.drawable.normal);
24                 image3.setImageResource(R.drawable.focused);
25                 image4.setImageResource(R.drawable.normal);
26                 break;
27             case 3:
28                 image1.setImageResource(R.drawable.normal);
29                 image2.setImageResource(R.drawable.normal);
30                 image3.setImageResource(R.drawable.normal);
31                 image4.setImageResource(R.drawable.focused);
32                 break;
33             default:
34                 break;
35             }
36         }

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

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

注意事项：

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

1 android:soundEffectsEnabled="false"

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

1 android:spacing="5dp"

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

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

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

作者：江阳小道

本博客中未标明原文地址的文章归作者江阳小道，欢迎转载，但请在文章页面明显位置给出原文连接。Thanks！

如果觉得本文对你有帮助的话，那么【推荐】给大家吧，希望今后能够为大家带来更好的技术文章！敬请【关注】。