Android 基于ImageSwitcher实现的左右切换图片

左右切换图片控件大家都用ViewPager, ViewFipper比较多吧，我之前也用ViewPager实现了，使用ViewPager实现左右循环滑动图片，有兴趣的可以去看下，今天介绍的是基于ImageSwitcher实现的左右切换图片，先上截图吧

好了，接下来来看代码吧，第一张图是一个GridView，点击item跳转到第二个界面，第一个界面可以忽略，主要是讲解ImageSwitcher的左右却换图片，先看布局文件

[html]   view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.     <ImageSwitcher  
6.         android:id="@+id/imageSwitcher1"  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent">  
9.     </ImageSwitcher>  
10.       
11.     <RelativeLayout      
12.         android:layout_width="fill_parent"      
13.         android:layout_height="wrap_content"     
14.         android:orientation="vertical" >      
15.         <LinearLayout      
16.             android:id="@+id/viewGroup"      
17.             android:layout_width="fill_parent"      
18.             android:layout_height="wrap_content"      
19.             android:layout_alignParentBottom="true"     
20.             android:layout_marginBottom="30dp"      
21.             android:gravity="center_horizontal"      
22.             android:orientation="horizontal" >      
23.         </LinearLayout>      
24.     </RelativeLayout>  
25. </FrameLayout>  

然后就是Activity代码啦，总体来说比较简单，代码我添加了注释

[java]   view plain copy

1. package com.example.photoalbum;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.view.View.OnTouchListener;  
8. import android.view.ViewGroup;  
9. import android.view.animation.AnimationUtils;  
10. import android.widget.ImageSwitcher;  
11. import android.widget.ImageView;  
12. import android.widget.LinearLayout;  
13. import android.widget.RelativeLayout.LayoutParams;  
14. import android.widget.Toast;  
15. import android.widget.ViewSwitcher.ViewFactory;  
16.   
17. public class ShowPhotoActivity extends Activity implements ViewFactory, OnTouchListener{  
18.     /** 
19.      * ImagaSwitcher 的引用 
20.      */  
21.     private ImageSwitcher mImageSwitcher;  
22.     /** 
23.      * 图片id数组 
24.      */  
25.     private int[] imgIds;  
26.     /** 
27.      * 当前选中的图片id序号 
28.      */  
29.     private int currentPosition;  
30.     /** 
31.      * 按下点的X坐标 
32.      */  
33.     private float downX;  
34.     /** 
35.      * 装载点点的容器 
36.      */  
37.     private LinearLayout linearLayout;  
38.     /** 
39.      * 点点数组 
40.      */  
41.     private ImageView[] tips;  
42.    
43.     @Override  
44.     protected void onCreate(Bundle savedInstanceState) {  
45.         super.onCreate(savedInstanceState);  
46.         setContentView(R.layout.show_photo);  
47.           
48.         imgIds = new int[]{R.drawable.item01,R.drawable.item02,R.drawable.item03,R.drawable.item04,  
49.                 R.drawable.item05, R.drawable.item06, R.drawable.item07, R.drawable.item08,R.drawable.item09,  
50.                 R.drawable.item10, R.drawable.item11, R.drawable.item12};  
51.         //实例化ImageSwitcher  
52.         mImageSwitcher  = (ImageSwitcher) findViewById(R.id.imageSwitcher1);  
53.         //设置Factory  
54.         mImageSwitcher.setFactory(this);  
55.         //设置OnTouchListener，我们通过Touch事件来切换图片  
56.         mImageSwitcher.setOnTouchListener(this);  
57.           
58.         linearLayout = (LinearLayout) findViewById(R.id.viewGroup);  
59.           
60.         tips = new ImageView[imgIds.length];  
61.         for(int i=0; i<imgIds.length; i++){  
62.             ImageView mImageView = new ImageView(this);  
63.             tips[i] = mImageView;  
64.             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,      
65.                     LayoutParams.WRAP_CONTENT));    
66.             layoutParams.rightMargin = 3;  
67.             layoutParams.leftMargin = 3;  
68.               
69.             mImageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
70.             linearLayout.addView(mImageView, layoutParams);  
71.         }  
72.           
73.         //这个我是从上一个界面传过来的，上一个界面是一个GridView  
74.         currentPosition = getIntent().getIntExtra("position", 0);  
75.         mImageSwitcher.setImageResource(imgIds[currentPosition]);  
76.           
77.         setImageBackground(currentPosition);  
78.           
79.     }  
80.       
81.      /**  
82.      * 设置选中的tip的背景  
83.      * @param selectItems  
84.      */    
85.     private void setImageBackground(int selectItems){    
86.         for(int i=0; i<tips.length; i++){    
87.             if(i == selectItems){    
88.                 tips[i].setBackgroundResource(R.drawable.page_indicator_focused);    
89.             }else{    
90.                 tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);    
91.             }    
92.         }    
93.     }   
94.   
95.     @Override  
96.     public View makeView() {  
97.         final ImageView i = new ImageView(this);  
98.         i.setBackgroundColor(0xff000000);  
99.         i.setScaleType(ImageView.ScaleType.CENTER_CROP);  
100.         i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
101.         return i ;  
102.     }  
103.   
104.     @Override  
105.     public boolean onTouch(View v, MotionEvent event) {  
106.         switch (event.getAction()) {  
107.         case MotionEvent.ACTION_DOWN:{  
108.             //手指按下的X坐标  
109.             downX = event.getX();  
110.             break;  
111.         }  
112.         case MotionEvent.ACTION_UP:{  
113.             float lastX = event.getX();  
114.             //抬起的时候的X坐标大于按下的时候就显示上一张图片  
115.             if(lastX > downX){  
116.                 if(currentPosition > 0){  
117.                     //设置动画，这里的动画比较简单，不明白的去网上看看相关内容  
118.                     mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));  
119.                     mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));  
120.                     currentPosition --;  
121.                     mImageSwitcher.setImageResource(imgIds[currentPosition % imgIds.length]);  
122.                     setImageBackground(currentPosition);  
123.                 }else{  
124.                     Toast.makeText(getApplication(), "已经是第一张", Toast.LENGTH_SHORT).show();  
125.                 }  
126.             }   
127.               
128.             if(lastX < downX){  
129.                 if(currentPosition < imgIds.length - 1){  
130.                     mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));  
131.                     mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.lift_out));  
132.                     currentPosition ++ ;  
133.                     mImageSwitcher.setImageResource(imgIds[currentPosition]);  
134.                     setImageBackground(currentPosition);  
135.                 }else{  
136.                     Toast.makeText(getApplication(), "到了最后一张", Toast.LENGTH_SHORT).show();  
137.                 }  
138.             }  
139.             }  
140.               
141.             break;  
142.         }  
143.   
144.         return true;  
145.     }  
146.   
147. }  

上面切换图片主要用到的就是动画了，用的是translate移动动画，不了解动画的同学到这里看看 http://blog.csdn.net/xiaanming/article/details/8997260 ，我就不介绍了，接下来我吧动画代码贴出来，在res新建一个anim的目录，如下图

左边进入的动画，left_in.xml

[html]   view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate   
4.         android:fromXDelta="-100%p"  
5.         android:toXDelta="0"  
6.         android:duration="500"/>  
7. </set>  

左边出去的动画,left_out.xml

[html]   view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate   
4.         android:fromXDelta="0"  
5.         android:toXDelta="-100%p"  
6.         android:duration="500"/>  
7. </set>  

右边进入的动画，right_in.xml

[html]   view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate   
4.         android:fromXDelta="100%p"  
5.         android:toXDelta="0"  
6.         android:duration="500"/>  
7. </set>  

右边出去的动画,right_out.xml

[html]   view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate   
4.         android:fromXDelta="0"  
5.         android:toXDelta="100%p"  
6.         android:duration="500"/>  
7. </set>  

好了，介绍完了，代码写的不是很好，写的不好的地方希望您指出，谢谢

地址： http://download.csdn.net/category