码迷，mamicode.com
首页 > 其他好文 > 详细

左右页面滑动

时间：2017-10-05 13:03:07      阅读：280      评论：0      收藏：0      [点我收藏+]

标签：bundle   win   relative   strong   length   nis   隐藏   放大   水平滑动   

前言

通过左右滑动屏幕来切换页面，有4种方式：

(0) 使用ScrollLayout；

(1) 使用动画；

(2) Activity 实现 OnTouchListener 和 OnGestureListener 接口；

(3) 使用 ViewPager；

本文将对上述各个方式逐一介绍。

(0)使用ScrollLayout

将scrolllayout 的布局方向设置为水平，当layout的水平尺寸大于手机屏幕时，即可实现左右滑动效果。有1款叫做 do it tomorrow 的应用，就是典型的代表。解压后可以看到，其背景图片其实是1张1280x960的图片(如下图)，隐藏滚动条，即有水平滑动的效果。

技术分享

(1)使用动画

这里的动画是指，使用Activity 中的 overridePendingTransition(,) 方法，具体能实现的动画效果如下表：

 

动画效果列表
淡入淡出效果 overridePendingTransition(R.anim.fade, R.anim.hold);
放大淡出效果 overridePendingTransition(R.anim.my_scale_action,R.anim.my_alpha_action);
转动淡出效果 overridePendingTransition(R.anim.scale_rotate,R.anim.my_alpha_action);
转动淡出效果 overridePendingTransition(R.anim.scale_translate_rotate,R.anim.my_alpha_action);
左上角展开淡出效果 overridePendingTransition(R.anim.scale_translate,R.anim.my_alpha_action);
压缩变小淡出效果 overridePendingTransition(R.anim.hyperspace_in,R.anim.hyperspace_out);
右往左推出效果 overridePendingTransition(R.anim.push_left_in,R.anim.push_left_out);
下往上推出效果 overridePendingTransition(R.anim.push_up_in,R.anim.push_up_out);
左右交错效果 overridePendingTransition(R.anim.slide_left,R.anim.slide_right);
放大淡出效果 overridePendingTransition(R.anim.wave_scale,R.anim.my_alpha_action);
缩小效果 overridePendingTransition(R.anim.zoom_enter,R.anim.zoom_exit);
上下交错效果 overridePendingTransition(R.anim.slide_up_in,R.anim.slide_down_out);

 

我们以“右往左推出效果”为例，其中R.anim.slide_left 和 R.anim.slide_right 文件分别如下：

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <translate android:fromXDelta="0%p" android:toXDelta="-100%p"  
  4.         android:duration="500" />  
  5. </set>  

 

 

[html] view plain copy
 
  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%p"  
  4.         android:duration="500" />  
  5. </set>  

上述xml文件中，有3个值需要解释：fromXDelta 是指页面滑动的起点，toXDelta 是指页面滑动的终点，duration 是指滑动耗时，单位为毫秒（1/1000 秒）。可以实现AnimLeftActivity  和 AnimRightActivity 之间的左右滑动。具体手机屏幕和 x 轴、y 轴的关系见下图：

 

技术分享


public class AnimLeftActivity extends Activity {

[java] view plain copy
 
  1.  private Button btnStart = null;  
  2.   
  3.  @Override  
  4.  public void onCreate(Bundle savedInstanceState) {  
  5.      super.onCreate(savedInstanceState);  
  6.        
  7.      // 移除Title  
  8.      requestWindowFeature(Window.FEATURE_NO_TITLE);  
  9.        
  10.      setContentView(R.layout.left_layout);  
  11.   
  12.      // 开始按钮  
  13.      btnStart = (Button) findViewById(R.id.btn_anim_left);  
  14.        
  15.      /** 
  16.       * 开始测试按钮 的监听函数 
  17.       *  
  18.       * */  
  19.      btnStart.setOnClickListener(new View.OnClickListener() {  
  20.   
  21. public void onClick(View view) {  
  22.       
  23.     Intent i = new Intent(getApplicationContext(), AnimRightActivity.class);  
  24.     startActivity(i);  
  25.       
  26.     // 设置切换动画，从右边进入，左边退出  
  27.        overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);  
  28.          
  29.     finish();             
  30. }  
  31. );  
  32.  }  
[java] view plain copy
 
  1. public class AnimRightActivity extends Activity {  
  2.       
  3.     private Button btnStart = null;  
  4.       
  5.     public void onCreate(Bundle savedInstanceState) {  
  6.           
  7.         super.onCreate(savedInstanceState);  
  8.           
  9.         // 移除Title  
  10.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  11.           
  12.         setContentView(R.layout.right_layout);  
  13.           
  14.         // 开始按钮  
  15.         btnStart = (Button) findViewById(R.id.btn_anim_right);  
  16.           
  17.         /** 
  18.          * 开始测试按钮 的监听函数 
  19.          *  
  20.          * */  
  21.         btnStart.setOnClickListener(new View.OnClickListener() {  
  22.               
  23.             public void onClick(View view) {  
  24.                 Intent i = new Intent(getApplicationContext(), AnimLeftActivity.class);  
  25.                 startActivity(i);  
  26.                   
  27.                 // 设置切换动画，从右边进入，左边退出  
  28.                 overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);  
  29.                   
  30.                 finish();           }  
  31.         });  
  32.     }  
  33. }  

 

(2)Activity 实现 OnTouchListener 和 OnGestureListener 接口

[java] view plain copy
 
  1. public class GestureLeftActivity extends Activity implements OnTouchListener, OnGestureListener {  
  2.       
  3.     // 按钮  
  4.     private Button btnStart = null;  
  5.       
  6.     // 监听左划动作  
  7.     private RelativeLayout rlLeft = null;  
  8.     private GestureDetector gd    = null;  
  9.       
  10.     // 最小的水平有效划动距离和速度，超过该距离和速度才触发划动事件  
  11.     private int slideMinDistance = 20;    
  12.     private int slideMinVelocity = 0;    
  13.       
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.           
  18.         // 移除Title  
  19.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  20.           
  21.         setContentView(R.layout.left_layout);  
  22.           
  23.         btnStart = (Button) findViewById(R.id.btn_anim_left);  
  24.         btnStart.setText("");  
  25.           
  26.         btnStart.setOnClickListener(new View.OnClickListener() {  
  27.               
  28.             public void onClick(View v) {  
  29.                 Toast.makeText(GestureLeftActivity.this, "请向左滑动", Toast.LENGTH_SHORT).show();  
  30.             }  
  31.         });  
  32.           
  33.         // 处理左划事件  
  34.         gd = new GestureDetector((OnGestureListener) this);      
  35.         rlLeft = (RelativeLayout) findViewById(R.id.rl_left);      
  36.         rlLeft.setOnTouchListener(this);      
  37.         rlLeft.setLongClickable(true);  
  38.     }  
  39.       
  40.       
  41.     /** 
  42.      * 滑动到手写页面 
  43.       * @Title:       slideToAnalyser 
  44.       * @Description: TODO 
  45.       * @param         
  46.       * @return       void 
  47.       * @throws 
  48.      */  
  49.     private void slideToGestureRightActivity() {  
  50.         Intent i = new Intent(getApplicationContext(), GestureRightActivity.class);  
  51.         startActivity(i);  
  52.           
  53.         // 设置切换动画，从右边进入，左边退出  
  54.         overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);  
  55.           
  56.         finish();  
  57.     }  
  58.       
  59.     /* 
  60.       * <p>Title: onDown</p> 
  61.       * <p>Description: </p> 
  62.       * @param arg0 
  63.       * @return 
  64.       * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent) 
  65.       */  
  66.     public boolean onDown(MotionEvent arg0) {  
  67.   
  68.         // TODO Auto-generated method stub  
  69.         return false;  
  70.     }  
  71.   
  72.   
  73.     /* 
  74.       * <p>Title: onFling</p> 
  75.       * <p>Description: </p> 
  76.       * @param e1 
  77.       * @param e2 
  78.       * @param velocityX 
  79.       * @param velocityY 
  80.       * @return 
  81.       * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float) 
  82.       */  
  83.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {  
  84.   
  85.         if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {    
  86.                 
  87.             // 切换Activity    
  88.             slideToGestureRightActivity();  
  89.             Toast.makeText(this, "向左手势", Toast.LENGTH_SHORT).show();    
  90.         } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {    
  91.         
  92.             // 切换Activity    
  93.             // Intent intent = new Intent(ViewSnsActivity.this, UpdateStatusActivity.class);    
  94.             // startActivity(intent);    
  95.             Toast.makeText(this, "向右手势", Toast.LENGTH_SHORT).show();  
  96.         }  
  97.         
  98.         return false;    
  99.     }  
  100.   
  101.   
  102.     /* 
  103.       * <p>Title: onLongPress</p> 
  104.       * <p>Description: </p> 
  105.       * @param e 
  106.       * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent) 
  107.       */  
  108.       
  109.       
  110.     public void onLongPress(MotionEvent e) {  
  111.   
  112.         // TODO Auto-generated method stub  
  113.           
  114.     }  
  115.   
  116.   
  117.     /* 
  118.       * <p>Title: onScroll</p> 
  119.       * <p>Description: </p> 
  120.       * @param e1 
  121.       * @param e2 
  122.       * @param distanceX 
  123.       * @param distanceY 
  124.       * @return 
  125.       * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float) 
  126.       */  
  127.       
  128.       
  129.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {  
  130.   
  131.         // TODO Auto-generated method stub  
  132.         return false;  
  133.     }  
  134.   
  135.   
  136.     /* 
  137.       * <p>Title: onShowPress</p> 
  138.       * <p>Description: </p> 
  139.       * @param e 
  140.       * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent) 
  141.       */  
  142.       
  143.       
  144.     public void onShowPress(MotionEvent e) {  
  145.   
  146.         // TODO Auto-generated method stub  
  147.           
  148.     }  
  149.   
  150.   
  151.     /* 
  152.       * <p>Title: onSingleTapUp</p> 
  153.       * <p>Description: </p> 
  154.       * @param e 
  155.       * @return 
  156.       * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent) 
  157.       */  
  158.       
  159.       
  160.     public boolean onSingleTapUp(MotionEvent e) {  
  161.   
  162.         // TODO Auto-generated method stub  
  163.         return false;  
  164.     }  
  165.   
  166.   
  167.     /* 
  168.       * <p>Title: onTouch</p> 
  169.       * <p>Description: </p> 
  170.       * @param v 
  171.       * @param event 
  172.       * @return 
  173.       * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent) 
  174.       */  
  175.       
  176.       
  177.     public boolean onTouch(View v, MotionEvent event) {  
  178.   
  179.         // TODO Auto-generated method stub  
  180.         return gd.onTouchEvent(event);  
  181.     }  
  182.       
  183.     public boolean dispatchTouchEvent(MotionEvent ev) {  
  184.   
  185.         gd.onTouchEvent(ev);  
  186.           
  187.         // scroll.onTouchEvent(ev);  
  188.         return super.dispatchTouchEvent(ev);  
  189.     }   
  190. }  


 
[java] view plain copy
 
  1. public class GestureRightActivity extends Activity implements OnTouchListener, OnGestureListener {  
  2.       
  3.     // 按钮  
  4.     private Button btnStart = null;  
  5.       
  6.     // 监听左划动作  
  7.     private RelativeLayout rlRight = null;  
  8.     private GestureDetector gd    = null;  
  9.       
  10.     // 最小的水平有效划动距离和速度，超过该距离和速度才触发划动事件  
  11.     private int slideMinDistance = 20;    
  12.     private int slideMinVelocity = 0;    
  13.       
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.           
  18.         // 移除Title  
  19.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  20.           
  21.         setContentView(R.layout.right_layout);  
  22.           
  23.         btnStart = (Button) findViewById(R.id.btn_anim_right);  
  24.         btnStart.setText("");  
  25.           
  26.         btnStart.setOnClickListener(new View.OnClickListener() {  
  27.               
  28.             public void onClick(View v) {  
  29.                 Toast.makeText(GestureRightActivity.this, "请向右滑动", Toast.LENGTH_SHORT).show();  
  30.             }  
  31.         });  
  32.           
  33.         // 处理左划事件  
  34.         gd = new GestureDetector((OnGestureListener) this);      
  35.         rlRight = (RelativeLayout) findViewById(R.id.rl_right);      
  36.         rlRight.setOnTouchListener(this);      
  37.         rlRight.setLongClickable(true);  
  38.     }  
  39.       
  40.       
  41.     /** 
  42.      * 滑动到手写页面 
  43.       * @Title:       slideToAnalyser 
  44.       * @Description: TODO 
  45.       * @param         
  46.       * @return       void 
  47.       * @throws 
  48.      */  
  49.     private void slideToGestureLeftActivity() {  
  50.         Intent i = new Intent(getApplicationContext(), GestureLeftActivity.class);  
  51.         startActivity(i);  
  52.           
  53.         // 设置切换动画，从右边进入，左边退出  
  54.         overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);  
  55.           
  56.         finish();  
  57.     }  
  58.       
  59.     /* 
  60.       * <p>Title: onDown</p> 
  61.       * <p>Description: </p> 
  62.       * @param arg0 
  63.       * @return 
  64.       * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent) 
  65.       */  
  66.     public boolean onDown(MotionEvent arg0) {  
  67.   
  68.         // TODO Auto-generated method stub  
  69.         return false;  
  70.     }  
  71.   
  72.   
  73.     /* 
  74.       * <p>Title: onFling</p> 
  75.       * <p>Description: </p> 
  76.       * @param e1 
  77.       * @param e2 
  78.       * @param velocityX 
  79.       * @param velocityY 
  80.       * @return 
  81.       * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float) 
  82.       */  
  83.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {  
  84.   
  85.         if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {    
  86.             Toast.makeText(this, "向左手势", Toast.LENGTH_SHORT).show();    
  87.         } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {    
  88.         
  89.             // 切换Activity    
  90.             slideToGestureLeftActivity();  
  91.             Toast.makeText(this, "向右手势", Toast.LENGTH_SHORT).show();  
  92.         }  
  93.         
  94.         return false;    
  95.     }  
  96.   
  97.   
  98.     /* 
  99.       * <p>Title: onLongPress</p> 
  100.       * <p>Description: </p> 
  101.       * @param e 
  102.       * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent) 
  103.       */  
  104.       
  105.       
  106.     public void onLongPress(MotionEvent e) {  
  107.   
  108.         // TODO Auto-generated method stub  
  109.           
  110.     }  
  111.   
  112.   
  113.     /* 
  114.       * <p>Title: onScroll</p> 
  115.       * <p>Description: </p> 
  116.       * @param e1 
  117.       * @param e2 
  118.       * @param distanceX 
  119.       * @param distanceY 
  120.       * @return 
  121.       * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float) 
  122.       */  
  123.       
  124.       
  125.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {  
  126.   
  127.         // TODO Auto-generated method stub  
  128.         return false;  
  129.     }  
  130.   
  131.   
  132.     /* 
  133.       * <p>Title: onShowPress</p> 
  134.       * <p>Description: </p> 
  135.       * @param e 
  136.       * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent) 
  137.       */  
  138.       
  139.       
  140.     public void onShowPress(MotionEvent e) {  
  141.   
  142.         // TODO Auto-generated method stub  
  143.           
  144.     }  
  145.   
  146.   
  147.     /* 
  148.       * <p>Title: onSingleTapUp</p> 
  149.       * <p>Description: </p> 
  150.       * @param e 
  151.       * @return 
  152.       * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent) 
  153.       */  
  154.       
  155.       
  156.     public boolean onSingleTapUp(MotionEvent e) {  
  157.   
  158.         // TODO Auto-generated method stub  
  159.         return false;  
  160.     }  
  161.   
  162.   
  163.     /* 
  164.       * <p>Title: onTouch</p> 
  165.       * <p>Description: </p> 
  166.       * @param v 
  167.       * @param event 
  168.       * @return 
  169.       * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent) 
  170.       */  
  171.       
  172.       
  173.     public boolean onTouch(View v, MotionEvent event) {  
  174.   
  175.         // TODO Auto-generated method stub  
  176.         return gd.onTouchEvent(event);  
  177.     }  
  178.       
  179.     public boolean dispatchTouchEvent(MotionEvent ev) {  
  180.   
  181.         gd.onTouchEvent(ev);  
  182.           
  183.         // scroll.onTouchEvent(ev);  
  184.         return super.dispatchTouchEvent(ev);  
  185.     }   
  186. }  


(3)使用 ViewPager

左右页面滑动

标签：bundle   win   relative   strong   length   nis   隐藏   放大   水平滑动   

原文地址：http://www.cnblogs.com/ouyangping/p/7628997.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！