`
zxs19861202
  • 浏览: 915177 次
  • 性别: Icon_minigender_1
  • 来自: 湖北—》上海
社区版块
存档分类
最新评论

android通过ViewFlipper实现左右滑动效果

阅读更多

 

1)View切换的控件—ViewFlipper介绍

ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout。

查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果。该类有如下几个和动画相关的方法。

setInAnimation:设置View进入屏幕时候使用的动画。该方法有两个重载方法,即可以直接传入Animation对象,也可以传入定义的Animation文件的resourceID。

setOutAnimation:设置View退出屏幕时候使用的动画。使用方法和setInAnimation方法一样。

showNext:调用该方法可以显示FrameLayout里面的下一个View。

showPrevious:调用该方法可以来显示FrameLayout里面的上一个View。

查看ViewFlipper的源码可以看到,ViewFlipper主要用来实现View的自动切换。该类提供了如下几个主要的方法。

setFilpInterval:设置View切换的时间间隔。参数为毫秒。

startFlipping:开始进行View的切换,时间间隔是上述方法设置的间隔数。切换会循环进行。

stopFlipping:停止View切换。

setAutoStart:设置是否自动开始。如果设置为“true”,当ViewFlipper显示的时候View的切换会自动开始。

一般情况下,我们都会使用ViewFilpper类实现View的切换,而不使用它的父类ViewAnimator类。

2)实现滑动—GestureDetector介绍

如果想要实现滑动翻页的效果,就要了解另外一个类:android.view.GestureDetector类。GestureDetector类中可以用来检测各种手势事件。该类有两个回调接口,分别用来通知具体的事件。

GestureDetector.OnDoubleTapListener:用来通知DoubleTap事件,类似于PC上面的鼠标的双击事件。

GestureDetector.OnGestureListener:用来通知普通的手势事件,该接口有六个回调方法,具体的可以查看API。这里想要实现滑动的判断,就需要用到其中的onFling()方法。

3)具体的实现

下面的代码片段详细说明了如何实现滑动翻页。

  1. public class ViewFlipperActivity extends Activity implements OnGestureListener {  
  2.       
  3.     private static final int FLING_MIN_DISTANCE = 100;  
  4.     private ViewFlipper flipper;  
  5.     private GestureDetector detector;  
  6.   
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.viewflipper);  
  11.         // 注册一个GestureDetector  
  12.         detector = new GestureDetector(this);  
  13.         flipper = (ViewFlipper) findViewById(R.id.ViewFlipper);  
  14.         ImageView image1 = new ImageView(this);  
  15.         image1.setBackgroundResource(R.drawable.image1);  
  16.         // 增加第一个view  
  17.         flipper.addView(image1);  
  18.         ImageView image2 = new ImageView(this);  
  19.         image2.setBackgroundResource(R.drawable.image2);  
  20.         // 增加第二个view  
  21.         flipper.addView(image2);  
  22.     }  
  23.   
  24.     @Override  
  25.     public boolean onTouchEvent(MotionEvent event) {  
  26.         // 将触屏事件交给手势识别类处理  
  27.         return this.detector.onTouchEvent(event);  
  28.     }  
  29.   
  30.     @Override  
  31.     public boolean onDown(MotionEvent e) {  
  32.         return false;  
  33.     }  
  34.   
  35.     @Override  
  36.     public void onShowPress(MotionEvent e) {  
  37.     }  
  38.   
  39.     @Override  
  40.     public boolean onSingleTapUp(MotionEvent e) {  
  41.         return false;  
  42.     }  
  43.   
  44.     @Override  
  45.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  46.             float distanceY) {  
  47.         return false;  
  48.     }  
  49.   
  50.     @Override  
  51.     public void onLongPress(MotionEvent e) {  
  52.     }  
  53.   
  54.     @Override  
  55.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  56.             float velocityY) {  
  57.         if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE) {  
  58.             //设置View进入和退出的动画效果  
  59.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  60.                     R.anim.left_in));  
  61.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  62.                     R.anim.left_out));  
  63.             this.flipper.showNext();  
  64.             return true;  
  65.         }  
  66.         if (e1.getX() - e2.getX() < -FLING_MIN_DISTANCE) {  
  67.             this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
  68.                     R.anim.right_in));  
  69.             this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
  70.                     R.anim.right_out));  
  71.             this.flipper.showPrevious();  
  72.             return true;  
  73.         }  
  74.         return false;  
  75.     }  
  76. }  

 

在这段代码里,创建了两个IamgeView(用来显示图片),加入到了ViewFlipper中。程序运行后,当用手指在屏幕上向左滑动,会显示前一个图片,用手指在屏幕上向右滑动,会显示下一个图片。实现滑动切换的主要代码都在onFling()方法中,用户按下触摸屏,快速移动后松开,就会触发这个事件。在这段代码示例中,对手指滑动的距离进行了计算,如果滑动距离大于100像素,就做切换动作,否则不做任何切换动作。

可以看到,onFling()方法有四个参数,e1和e2上面代码用到了,比较好理解。参数velocityX和velocityY是做什么用的呢?velocityX和velocityY实际上是X轴和Y轴上的移动速度,单位是像素/秒。结合这两个参数,可以判断滑动的速度,从而做更多的处理。

为了显示出滑动的效果,这里调用了ViewFlipper的setInAnimation()和setOutAnimation()方法设置了View进入和退出的动画。

left_in.xml

 

 

<?xml version="1.0" encoding="utf-8"?>   

<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>   

 

left_out.xml代码

 

<?xml version="1.0" encoding="utf-8"?>   

<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>  

 

分享到:
评论

相关推荐

    Android使用ViewFlipper实现左右滑动效果面

    实现左右滑动效果的关键在于监听用户的触摸事件并处理滑动手势。这通常需要自定义一个GestureDetector,来检测用户在屏幕上左右滑动的手势。以下是一个简单的步骤: 1. **创建GestureDetector对象**: 首先,你...

    最简单的ViewFlipper实现图片跟随手势滑动

    在这个“最简单的ViewFlipper实现图片跟随手势滑动”的教程中,我们将深入探讨如何通过源码和工具来创建一个用户可以通过手势左右滑动来切换图片的应用。 首先,我们要了解ViewFlipper的基本用法。ViewFlipper继承...

    Android ViewFlipper实现页面的滑动切换

    在Android开发中,ViewFlipper是一个非常实用的控件,用于在多个视图之间进行切换,通常用于实现页面滑动效果。ViewFlipper是ViewAnimator的子类,它提供了自动翻页、手动翻页以及动画过渡等特性。下面将详细探讨...

    android 利用ViewFlipper来实现滑动切换

    在Android开发中,ViewFlipper是一个非常有用的布局组件,它允许开发者轻松地实现在多个视图之间进行滑动切换的效果。这种效果常见于各种应用程序,如轮播图、页面导航等。下面我们将深入探讨如何利用ViewFlipper...

    Android 滑动效果ViewFlipper

    总结,`ViewFlipper`是Android中实现滑动效果的强大工具,通过灵活地配置动画、定时器和事件监听,我们可以轻松创建出丰富的用户界面。在实际项目中,结合其他组件和动画库,`ViewFlipper`可以满足各种滑动切换的...

    android中使用ViewFlipper实现滑动翻页示例

    Android提供了多种内置的动画,如`R.anim.fade_in`和`R.anim.fade_out`用于淡入淡出效果,或者`R.anim.slide_in_left`和`R.anim.slide_out_right`用于左右滑动效果。在代码中设置动画: ```java public class ...

    ViewFlipper实现左右切换

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许我们轻松地在多个视图之间进行切换,常用于实现类似轮播图或者卡片左右滑动的效果。本篇文章将详细解析如何使用ViewFlipper来实现左右切换的功能,并结合...

    UI开发第八篇——ViewFlipper 左右滑动效果

    本篇将深入探讨如何利用ViewFlipper组件和GestureDetector类实现左右滑动切换视图的效果,这在主页面或多个内容区域展示的场景中非常常见。 ViewFlipper是Android提供的一个布局容器,它可以方便地在多个子视图之间...

    Android使用ViewFlipper实现Switch动画特效。

    在Android开发中,ViewFlipper是一个非常有用的布局组件,它允许开发者轻松地在多个视图之间切换,并且可以添加各种动画效果,使用户界面更加生动和互动。本篇将深入探讨如何利用ViewFlipper实现Switch动画特效,...

    android viewflipper 图片滑动demo

    4. **设置动画**:为了实现平滑的滑动效果,我们需要为ViewFlipper添加切换动画。这可以通过创建两个Animation对象(一个向左,一个向右)实现,然后将它们分别设置为in和out动画。 ```java // 创建向左的动画 ...

    ViewPager和ViewFlipper实现图片左右滑动

    在Android开发中,为了提供优秀的用户体验,经常需要实现图片的左右滑动切换功能,这通常是通过ViewPager或ViewFlipper组件来完成的。这两个组件都属于Android SDK中的布局管理器,可以方便地展示多个视图并支持用户...

    ViewFlipper实现界面滑动切换

    当设置动画后,ViewFlipper能够自动在这些子视图间进行切换,给用户带来流畅的滑动效果。 **一、添加ViewFlipper到布局** 在XML布局文件中,你可以像添加其他视图一样添加ViewFlipper。例如: ```xml &lt;androidx....

    Android ViewFlipper图片水平滑动

    说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4.jar的支持),自定义实现Viewgroup,...

    安卓Android源码——ViewFlipper水平滑动.rar

    在本压缩包中,我们可能会找到相关的源代码示例,以展示如何在应用程序中有效地使用ViewFlipper来实现水平滑动效果。 【描述】"安卓Android源码——ViewFlipper水平滑动.rar"可能包含了一个Android项目,该项目专注...

    ViewFlipper实现滑动轮播

    本文将深入探讨如何使用ViewFlipper来实现滑动轮播效果,并结合实际示例进行详细讲解。 首先,我们需要了解ViewFlipper的基本概念。ViewFlipper是LinearLayout的子类,它可以包含多个子视图,并自动管理这些子视图...

    TabHost + ViewFlipper实现滑动翻页

    同时,我们可以设置`ViewFlipper`的滑动监听器,实现平滑的滑动效果。 在`TabHost`中实现背景图片自动切换的功能,可以通过定时器和`ImageView`的`setImageResource()`方法来实现。设定一个定时任务,每隔一段时间...

    Android高级应用源码-ViewFlipper水平滑动.zip

    【标题】"Android高级应用源码-ViewFlipper水平滑动.zip" 提供了一个关于在Android平台上使用ViewFlipper实现水平滑动效果的示例。ViewFlipper是Android SDK中的一个视图容器,它允许我们在两个或多个视图之间进行...

    Android应用源码之Gallery+ImageSwitcher+ViewFlipper实现手机查看壁纸效果.zip

    本项目“Android应用源码之Gallery+ImageSwitcher+ViewFlipper实现手机查看壁纸效果”就提供了这样一个功能的实现,通过集成Gallery、ImageSwitcher和ViewFlipper三个组件,为用户提供流畅的图片切换体验。...

    Android ViewFlipper水平滑动Demo.zip

    本示例"Android ViewFlipper水平滑动Demo"着重展示了如何利用ViewFlipper实现水平滑动效果。下面将详细讲解ViewFlipper的使用及其水平滑动的实现方式。 **1. ViewFlipper介绍** ViewFlipper是Android SDK中的一个...

Global site tag (gtag.js) - Google Analytics