多语言展示
当前在线:1893今日阅读:176今日分享:34

Android实现左右滑动效果

利用Android的ViewFlapper和OnGestureListener实现图片的左右滑动功能,其中当图片播放到最后一张时,会切换到第一张图片,效果图如下:
工具/原料
1

ViewFlipper类和OnGestureListener接口

2

animation动画效果translate和alpha

方法/步骤
1

设置布局文件,其中使用到ViewFlipper控件,内容如下:                                       

2

从左边进入的动画文件,其内容如下:               

3

从左边退出的动画文件,其内容如下:       

4

从右边进入的动画文件,其内容如下:       

5

从右边退出的动画文件,其内容如下:       

6

加载布局文件和动画文件的类,其源码内容为:/** *  */package com.i114gbox.aglieguy;import android.content.Context;import android.os.Bundle;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;import android.widget.ViewFlipper;import com.i114gbox.sdk.activity.I114gBoxActivity;import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;import com.i114gbox.sdk.utils.I114gBoxLogUtils;import com.i114gbox.sdk.utils.I114gBoxResourceUtils;/** * 图片滑动Activity *  * @author SJC *  */public class ImageFlipperActivity extends I114gBoxActivity implements OnGestureListener { private static String TAG = 'ImageFlipperActivity'; private Context ctx = null; private GestureDetector gestureDetector;// 手势监听 private ViewFlipper viewFlipper;// 视图轮播 @Override protected void onCreate(Bundle savedInstanceState) { I114gBoxLogUtils.d(TAG, 'The onCreate method execute.'); super.onCreate(savedInstanceState); I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activity ctx = this; setContentView(I114gBoxResourceUtils.getLayoutId(ctx, 'activity_image_flipper')); gestureDetector = new GestureDetector(this); viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId( ctx, 'vf_image_flipper')); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_01'))); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_02'))); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_03'))); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_04'))); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_05'))); viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId( ctx, 'flipper_06'))); // viewFlipper.addView(addImageView(R.drawable.one)); // viewFlipper.addView(addImageView(R.drawable.two)); // viewFlipper.addView(addImageView(R.drawable.three)); // viewFlipper.addView(addImageView(R.drawable.four)); // viewFlipper.addView(addImageView(R.drawable.five)); Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId( ctx, 'btn_image_flipper_back')); backButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { finish(); } }); } /** 添加ImageView控件 **/ private View addImageView(int id) { ImageView imageView = new ImageView(this); imageView.setImageResource(id); return imageView; } @Override public boolean onTouchEvent(MotionEvent event) { I114gBoxLogUtils.d(TAG, 'The onTouchEvent method execute.'); return gestureDetector.onTouchEvent(event); } @Override public boolean onDown(MotionEvent e) { I114gBoxLogUtils.d(TAG, 'The onDown method execute.'); return false; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { I114gBoxLogUtils.d(TAG, 'The onFling method execute.'); I114gBoxLogUtils.i(TAG, 'e1.x:' + e1.getX() + '|' + 'e2.x:' + e2.getX() + '|' + 'velocityX:' + velocityX + '|' + 'velocityY:' + velocityY); if (e1.getX() - e2.getX() > 120) { this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx, R.anim.push_left_in));// 进入屏幕的动画 this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx, R.anim.push_left_out));// 离开屏幕的动画 this.viewFlipper.showNext();// 手动显示下一个视图 return true; } else if (e1.getX() - e2.getX() < -120) { this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx, R.anim.push_right_in)); this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx, R.anim.push_right_out)); this.viewFlipper.showPrevious();// 手动显示前一个视图 return true; } return false; } @Override public void onLongPress(MotionEvent e) { I114gBoxLogUtils.d(TAG, 'The onLongPress method execute.'); } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { I114gBoxLogUtils.d(TAG, 'The onScroll method execute.'); I114gBoxLogUtils.i(TAG, 'e1.X:' + e1.getX() + '|' + 'e2.X:' + e2.getX() + '|' + 'distanceX:' + distanceX + '|' + 'distanceY:' + distanceY); return false; } @Override public void onShowPress(MotionEvent e) { I114gBoxLogUtils.d(TAG, 'The onShowPress method execute.'); } @Override public boolean onSingleTapUp(MotionEvent e) { I114gBoxLogUtils.d(TAG, 'The onSingleTapUp method execute.'); return false; }}

注意事项
1

scale:渐变尺寸的动画效果

2

rotate:画面转换位置移动动画效果

3

alpha:渐变透明度动画效果

4

translate:画面转换位置动画效果

5

其中实现OnGestureListener接口中的方法,执行顺序为:onTouchEvent()->onDown()->onTouchEvent()->onScroll()->onTouchEvent()->onScroll()->onFling()

推荐信息