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

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

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

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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>  

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

 

代码下载

 

posted @ 2016-11-27 15:53  天涯海角路  阅读(209)  评论(0)    收藏  举报