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

来源：互联网发布：c二维数组列排序编辑：程序博客网时间：2024/05/01 18:27

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

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

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

整个界面才用相对布局，然后是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     <LinearLayout13         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         <ImageView21             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         <ImageView27             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         <ImageView33             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         <ImageView39             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     @Override23     public int getCount() {// 取得显示的内容数量，这里设为最大24         return Integer.MAX_VALUE;// 资源数量25     }26 27     @Override28     public Object getItem(int position) {// 取得显示项29         return images[position % images.length];30     }31 32     @Override33     public long getItemId(int position) {// 取得项的ID34         return images[position % images.length];35     }36 37     @Override38     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 @Override2     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

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