• 【转载】android手势翻页效果


    在android中实现手势翻页效果,主要用到ViewFlipper和GestureDetector. 
    ViewFlipper变化当前显示内容,GestureDetector监听手势. 
    用于多页的展示非常酷. 
    以下是简略说明: 

    首先创建工程:TestFlip,创建主Activity:TestFlip. 
    在res/layout/main.xml中添加flipper信息,如下: 

    Java代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:orientation="vertical"  
    4.     android:layout_width="fill_parent"  
    5.     android:layout_height="fill_parent"  
    6.     >  
    7.     <ViewFlipper android:id="@+id/ViewFlipper01"  
    8.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
    9.     </ViewFlipper>  
    10. </LinearLayout>  


    然后将TestFlip实现OnGestureListener接口,并实现所有抽象方法,然后开始改造这个类. 
    首先,声明两个私有成员. 

    Java代码  收藏代码
    1. private ViewFlipper flipper;//ViewFlipper实例  
    2. private GestureDetector detector;//触摸监听实例  


    然后在onCreate方法中添加成员初始化. 

    Java代码  收藏代码
    1. detector = new GestureDetector(this);//初始化触摸探测  
    2. flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01);//获得ViewFlipper实例  
    3.    
    4. flipper.addView(addTextView("step 1"));//将View添加到flipper队列中  
    5. flipper.addView(addTextView("step 2"));  
    6. flipper.addView(addTextView("step 3"));  
    7. flipper.addView(addTextView("step 4"));  
    8. flipper.addView(addTextView("step 5"));  


    addTextView方法如下: 

    Java代码  收藏代码
    1. private View addTextView(String text) {  
    2.         TextView tv = new TextView(this);  
    3.         tv.setText(text);  
    4.         tv.setGravity(1);  
    5.         return tv;  
    6.     }  


    flipper将按照你的添加顺序排列这些View,并通过flipper.showNext()和flipper.showPrevious()显示. 
    还需要多重写一个方法:onTouchEvent(MotionEvent event),否则detector检测不到触摸,这个方法非常简单. 

    Java代码  收藏代码
    1. @Override  
    2.     public boolean onTouchEvent(MotionEvent event) {  
    3.         return this.detector.onTouchEvent(event);  
    4.     }  


    现在开始做动作监听,在onFling方法中加入以下内容: 

    Java代码  收藏代码
    1. @Override  
    2.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
    3.             float velocityY) {  
    4.         this.flipper.showNext();//显示flipper中的下一个view  
    5.         return true;  
    6.     }  


    现在可以运行一下看看效果了.你会发现当鼠标滑动时画面只是很简单的从Step 1变成Step 2,并没有那种画面滑动的效果,而且无论你从左向右滑动还是从右向左滑动都是按照同一个顺序,现在我们修改一些,让效果更炫一点. 
    先在res目录下创建anim目录,并创建4个基于Animation的xml文件,分别命名为:left_in.xml,left_out.xml,right_in.xml,right_left.xml 
    内容分别为: 
    left_in.xml: 

    Java代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
    3.     <translate android:fromXDelta="100%p" android:toXDelta="0"  
    4.         android:duration="500" />  
    5. </set>  


    left_out.xml: 

    Java代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
    3.     <translate android:fromXDelta="0" android:toXDelta="-100%p"  
    4.         android:duration="500" />  
    5. </set>  


    right_in.xml: 

    Java代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
    3.     <translate android:fromXDelta="-100%p" android:toXDelta="0"  
    4.         android:duration="500" />  
    5. </set>  


    right_out.xml: 

    Java代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
    3.     <translate android:fromXDelta="0" android:toXDelta="100%p"  
    4.         android:duration="500" />  
    5. </set>  


    主要是做一个translation动画,fromXDelta:动画的开始X位置,toXDelta:动画的结束X位置,duration:持续时间. 
    然后将onFling方法修改为如下: 

    Java代码  收藏代码
    1. @Override  
    2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
    3.         float velocityY) {  
    4.     if (e1.getX() - e2.getX() > 120) {//如果是从右向左滑动  
    5.                     //注册flipper的进出效果  
    6.         this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.left_in));  
    7.         this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.left_out));  
    8.         this.flipper.showNext();  
    9.         return true;  
    10.     } else if (e1.getX() - e2.getX() < -120) {//如果是从左向右滑动  
    11.         this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.right_in));  
    12.         this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.right_out));  
    13.         this.flipper.showPrevious();  
    14.         return true;  
    15.     }  
    16.     return false;  
    17. }  


    然后重新运行看看效果,如果图片之类的多,还可以在animation里加入alpha的效果,如下 

    Java代码  收藏代码
    1. <alpha android:fromAlpha="0.1" android:toAlpha="1.0"  
    2.         android:duration="500" />  


    一个手势翻页效果就搞定了,用在多内容的展示效果上会非常棒. 
    源代码下载:http://u.115.com/file/f5fb0acb23(压缩包7Z的,javaeye不让传???)

  • 相关阅读:
    Java Stream 去重对象
    CentOS7安装JDK8
    CentOS7安装Tomcat9
    MySQL 8.0 安装
    面相对象7大原则
    Spring Boot MyBatis连接MySQL数据库
    win11右键改回win10风格,win10右键改回win11风格,不用重启
    【转载】NetCore 开发实战(目录整理)
    viewState cookie session _VIEWSTATE
    外部JS得到客户端ID
  • 原文地址:https://www.cnblogs.com/greywolf/p/2829821.html
Copyright © 2020-2023  润新知