前言:好久没发博文了,今天抽空做了一个图片的自动切换的小例子。先贴上图片,有图才有激情嘛!
注意:右下角有四个圆点,有四张图片循环切换。
既然图片都上了,那就先来看界面布局是怎么做的吧!
整个界面才用相对布局,然后是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
附上其他几张程序截图!(有美女看哦!)