代码改变世界

android 滑动翻页手势实现

2013-04-02 18:38  waddell  阅读(602)  评论(0编辑  收藏  举报

这个例子是用手势实现翻页效果,相当酷,个人觉得比gallery漂亮,可以用于广告场合。思路:把Activity的TouchEvent交给GestureDetector处理。

这个程序使用了ViewFlipper组件,其实这个组件就是容器组件,可以调用addView(View v)添加多个组件,然后就可以用ViewFlipper使用动画控制多个组件之间的切换效果

首先第一步是布局main.xml文件

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
     <ViewFlipper 
         android:id="@+id/flipper"
         android:layout_width="wrap_content"
         android:layout_height="120dp"/>
 </LinearLayout>

第二步:添加照片和在res文件夹下建立一个anim文件,里面放四个动画xml文件,分别为left_in.xml,left_out.xml,right_in.xml.right_out.xml

<?xml version="1.0" encoding="utf-8"?>
 <!-- 左边的进来left_in -->
 <set
     xmlns:android="http://schemas.android.com/apk/res/android">
     <translate
         android:fromXDelta="100%p"
         android:toXDelta="0"
         android:duration="500" />
     <alpha
         android:fromAlpha="0.0"
         android:toAlpha="1.0"
         android:duration="500" />
 </set>  
 
 
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 左边的出去left_out -->
 <set
     xmlns:android="http://schemas.android.com/apk/res/android">
     <translate
         android:fromXDelta="0"
         android:toXDelta="-100%p"
         android:duration="500" />
     <alpha
         android:fromAlpha="1.0"
         android:toAlpha="0.0"
         android:duration="500" />
 </set>  
 
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 右边的出去left_in -->
 <set
     xmlns:android="http://schemas.android.com/apk/res/android">
     <translate
         android:fromXDelta="-100%p"
         android:toXDelta="0"
         android:duration="500" />
     <alpha
         android:fromAlpha="0.0"
         android:toAlpha="1.0"
         android:duration="500" />
 </set>  
 
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 右边的出去left_out -->
 <set
     xmlns:android="http://schemas.android.com/apk/res/android">
     <translate
         android:fromXDelta="0"
         android:toXDelta="100%p"
         android:duration="500" />
     <alpha
         android:fromAlpha="1.0"
         android:toAlpha="0.0"
         android:duration="500" />
 </set>

第三步:编写GestureActivity.java文件

package cn.shaoyangjiang.com;
 
 import android.app.Activity;
 import android.os.Bundle;
 import android.view.GestureDetector;
 import android.view.GestureDetector.OnGestureListener;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.animation.Animation;
 import android.view.animation.AnimationUtils;
 import android.widget.ImageView;
 import android.widget.ViewFlipper;
 
 public class GestureActivity extends Activity implements OnGestureListener{
     // ViewFlipper实例
     ViewFlipper flipper;
     // 定义手势检测器实例
     GestureDetector detector;
     //定义一个动画数组,用于为ViewFlipper指定切换动画效果
     Animation[] animations = new Animation[4];
     //定义手势动作两点之间的最小距离
     final int FLIP_DISTANCE = 50;
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         //创建手势检测器
         detector = new GestureDetector(this);
      // 获得ViewFlipper实例
         flipper = (ViewFlipper)findViewById(R.id.flipper);
      // 为ViewFlipper添加5个ImageView组件
         flipper.addView(addImageView(R.drawable.katong));
         flipper.addView(addImageView(R.drawable.meinv));
         flipper.addView(addImageView(R.drawable.shan));
         flipper.addView(addImageView(R.drawable.tian));
         flipper.addView(addImageView(R.drawable.touming));
         //初始化Animation数组
         animations[0] = AnimationUtils.loadAnimation(this,R.anim.left_in);
         animations[1] = AnimationUtils.loadAnimation(this,R.anim.left_out);
         animations[2] = AnimationUtils.loadAnimation(this,R.anim.right_in);
         animations[3] = AnimationUtils.loadAnimation(this,R.anim.right_in);
 
     }
     // 定义添加ImageView的工具方法
     private View addImageView(int resId){
         ImageView imageView = new ImageView(this);
         imageView.setImageResource(resId);
         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         return imageView;
     }
     
     @Override
     public boolean onDown(MotionEvent arg0) {
         // TODO Auto-generated method stub
         return false;
     }
     @Override
     public boolean onFling(MotionEvent event1, MotionEvent event2, float velocityX,
             float velocityY) {
         /*
          * 如果第一个触点事件的X座标大于第二个触点事件的X座标超过FLIP_DISTANCE
          * 也就是手势从右向左滑。
 */
         if (event1.getX() - event2.getX() > FLIP_DISTANCE)
         {
             // 为flipper设置切换的的动画效果
             flipper.setInAnimation(animations[0]);
             flipper.setOutAnimation(animations[1]);
             flipper.showPrevious();
             return true;
         }
         /*
          * 如果第二个触点事件的X座标大于第一个触点事件的X座标超过FLIP_DISTANCE 
          * 也就是手势从右向左滑。
 */
         else if (event2.getX() - event1.getX() > FLIP_DISTANCE)
         {
             // 为flipper设置切换的的动画效果
             flipper.setInAnimation(animations[2]);
             flipper.setOutAnimation(animations[3]);
             flipper.showNext();
             return true;
         }
         return false;
     }
     @Override
     public void onLongPress(MotionEvent event) {
 
     }
     @Override
     public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
             float arg3) {
         return false;
     }
     @Override
     public void onShowPress(MotionEvent arg0) {
         
     }
     @Override
     public boolean onSingleTapUp(MotionEvent event) {
         return false;
     }
 
     @Override
     public boolean onTouchEvent(MotionEvent event) {
         //将该Activity上的触碰事件交给GestureDetector处理
         return detector.onTouchEvent(event);
     }
 }