Android之ViewFlipper滑屏切换效果


设置了三个页面，布局文件如下：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical" android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent" android:background="@drawable/dbj">  
  5.     <ViewFlipper android:id="@+id/ViewFlipper"  
  6.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
  7.         <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  8.             android:orientation="vertical" android:layout_width="fill_parent"  
  9.             android:layout_height="fill_parent">  
  10.             <TextView android:text="第 1 页"  
  11.                 android:textSize="35dp"  
  12.                 android:layout_width="wrap_content"  
  13.                 android:layout_height="wrap_content"  
  14.                 android:layout_x="115dp"  
  15.                 android:layout_y="20dp"/>  
  16.         </AbsoluteLayout>  
  17.         <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  18.             android:orientation="vertical" android:layout_width="fill_parent"  
  19.             android:layout_height="fill_parent">  
  20.             <TextView android:text="第 2 页"  
  21.                 android:textSize="35dp"  
  22.                 android:layout_width="wrap_content"  
  23.                 android:layout_height="wrap_content"  
  24.                 android:layout_x="120dp"  
  25.                 android:layout_y="20dp"/>  
  26.         </AbsoluteLayout>  
  27.         <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  28.             android:orientation="vertical" android:layout_width="fill_parent"  
  29.             android:layout_height="fill_parent">  
  30.             <TextView android:text="第 3 页"  
  31.                 android:textSize="35dp"  
  32.                 android:layout_width="wrap_content"  
  33.                 android:layout_height="wrap_content"  
  34.                 android:layout_x="120dp"  
  35.                 android:layout_y="20dp"/>  
  36.         </AbsoluteLayout>  
  37.     </ViewFlipper>  
  38.     <ImageButton android:layout_width="35dp"  
  39.         android:background="@drawable/pre_button" android:layout_height="40dp"  
  40.         android:id="@+id/preButton1" android:layout_x="101dp"  
  41.         android:layout_y="404dp">  
  42.     </ImageButton>  
  43.     <ImageButton android:layout_width="40dp"  
  44.         android:background="@drawable/next_button" android:layout_height="40dp"  
  45.         android:id="@+id/nextButton1" android:layout_x="182dp"  
  46.         android:layout_y="405dp">  
  47.     </ImageButton>  
  48. </AbsoluteLayout>  
主程序实现了OnGestureListener 接口，具体如下：
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.GestureDetector;  
  4. import android.view.GestureDetector.OnGestureListener;  
  5. import android.view.MotionEvent;  
  6. import android.view.View;  
  7. import android.view.View.OnClickListener;  
  8. import android.view.View.OnTouchListener;  
  9. import android.view.animation.AnimationUtils;  
  10. import android.widget.ImageButton;  
  11. import android.widget.ViewFlipper;  
  12.   
  13. /** 
  14.  * ViewFlipperTest.java 
  15.  * @author Cloay 
  16.  * 2011-6-24 
  17.  */  
  18. public class ViewFlipperTest extends Activity implements OnGestureListener {  
  19.     private ViewFlipper flipper;  
  20.     private GestureDetector detector;  
  21.   
  22.     private ImageButton pre1Button;  
  23.     private ImageButton next1Button;  
  24.   
  25.     @Override  
  26.     public void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.zd);  
  29.   
  30.         pre1Button = (ImageButton)findViewById(R.id.preButton1);  
  31.         pre1Button.setOnTouchListener(new OnTouchListener(){  
  32.   
  33.             @Override  
  34.             public boolean onTouch(View v, MotionEvent event) {  
  35.                 // TODO Auto-generated method stub   
  36.                 if(event.getAction()==MotionEvent.ACTION_DOWN){ //按钮按下背景图片   
  37.                     pre1Button.setBackgroundResource(R.drawable.pre_button1);  
  38.                 }  
  39.                 //按钮up后设置背景图片，并滑动到前一页面   
  40.                 else if(event.getAction()==MotionEvent.ACTION_UP){  
  41.                     pre1Button.setBackgroundResource(R.drawable.pre_button);  
  42.                     flipper.setInAnimation(AnimationUtils.loadAnimation(TestFlip.this, R.anim.push_right_in));  
  43.                     flipper.setOutAnimation(AnimationUtils.loadAnimation(TestFlip.this,R.anim.push_right_out));  
  44.                     flipper.showPrevious();  
  45.                 }  
  46.                 return false;  
  47.             }  
  48.               
  49.         });  
  50.           
  51.         next1Button = (ImageButton)findViewById(R.id.nextButton1);  
  52.         next1Button.setOnTouchListener(new OnTouchListener(){  
  53.   
  54.             @Override  
  55.             public boolean onTouch(View v, MotionEvent event) {  
  56.                 // TODO Auto-generated method stub   
  57.                 if(event.getAction()==MotionEvent.ACTION_DOWN){  
  58.                     next1Button.setBackgroundResource(R.drawable.next_button1);  
  59.                 }  
  60.                 //按钮up后设置背景图片，并滑动到后一页面   
  61.                 else if(event.getAction()==MotionEvent.ACTION_UP){  
  62.                     next1Button.setBackgroundResource(R.drawable.next_button);  
  63.                     flipper.setInAnimation(AnimationUtils.loadAnimation(TestFlip.this, R.anim.push_left_in));  
  64.                     flipper.setOutAnimation(AnimationUtils.loadAnimation(TestFlip.this,R.anim.push_left_out));  
  65.                     flipper.showNext();  
  66.                 }  
  67.                 return false;  
  68.             }  
  69.               
  70.         });  
  71.                   
  72.         detector = new GestureDetector(this);  
  73.         flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);  
  74.     }  
  75.           
  76.     public boolean onDoubleTap(MotionEvent e) {     
  77.            if(flipper.isFlipping()) {     
  78.                flipper.stopFlipping();     
  79.            }else {     
  80.                flipper.startFlipping();     
  81.            }     
  82.            return true;     
  83.         }    
  84.     @Override  
  85.     public boolean onTouchEvent(MotionEvent event) {  
  86.         return this.detector.onTouchEvent(event);  
  87.     }  
  88.   
  89.     @Override  
  90.     public boolean onDown(MotionEvent e) {  
  91.         // TODO Auto-generated method stub   
  92.         return false;  
  93.     }  
  94.       
  95.     @Override  
  96.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {     
  97.           
  98.         //用户按下屏幕，快速移动后松开（就是在屏幕上滑动）   
  99.         //e1:第一个ACTION_DOWN事件（手指按下的那一点）   
  100.         //e2:最后一个ACTION_MOVE事件 （手指松开的那一点）   
  101.         //velocityX:手指在x轴移动的速度 单位：像素/秒   
  102.         //velocityY:手指在y轴移动的速度 单位：像素/秒   
  103.           
  104.         if (e1.getX() - e2.getX() > 60) {  
  105.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));  
  106.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));  
  107.             this.flipper.showNext();  
  108.             return true;  
  109.         } else if (e1.getX() - e2.getX() < -60) {  
  110.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));  
  111.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));  
  112.             this.flipper.showPrevious();  
  113.             return true;  
  114.         }  
  115.         return false;  
  116.     }  
  117.   
  118.       
  119.     @Override  
  120.     public void onLongPress(MotionEvent e) {  
  121.         // TODO Auto-generated method stub   
  122.   
  123.     }  
  124.   
  125.     @Override  
  126.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  127.             float distanceY) {  
  128.         // TODO Auto-generated method stub   
  129.         return false;  
  130.     }  
  131.   
  132.     @Override  
  133.     public void onShowPress(MotionEvent e) {  
  134.         // TODO Auto-generated method stub   
  135.   
  136.     }  
  137.   
  138.     @Override  
  139.     public boolean onSingleTapUp(MotionEvent e) {  
  140.         // TODO Auto-generated method stub   
  141.         return false;  
  142.     }  
  143. }  
测试时，鼠标点击模拟器快速移动松开（就是在屏幕上模拟手指滑动），结果如下：

相关内容