android 滑动翻页手势实现

jopen 12年前

  这个例子是用手势实现翻页效果,相当酷,个人觉得比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);       }   }