Android 多页面左右滑动

最新推荐文章于 2024-07-23 11:04:22 发布
最新推荐文章于 2024-07-23 11:04:22 发布
阅读量1w 收藏 25
点赞数
分类专栏： Android UI 开发 Android UI 开发 文章标签： android viewpager 滑动页面
本文为博主原创文章，欢迎转载，请保留原文出处。
本文链接：https://blog.csdn.net/zhaizu/article/details/39101969
版权

前言

通过左右滑动屏幕来切换页面，有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 文件分别如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate android:fromXDelta="0%p" android:toXDelta="-100%p"
        android:duration="500" />
</set>

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



public class AnimLeftActivity extends Activity {

    private Button btnStart = null;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 移除Title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.left_layout);

        // 开始按钮
        btnStart = (Button) findViewById(R.id.btn_anim_left);
        
        /**
         * 开始测试按钮 的监听函数
         * 
         * */
        btnStart.setOnClickListener(new View.OnClickListener() {
			
			public void onClick(View view) {
				
				Intent i = new Intent(getApplicationContext(), AnimRightActivity.class);
				startActivity(i);
				
				// 设置切换动画，从右边进入，左边退出
		        overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);
		        
				finish();			
			}
		});
    }
}
public class AnimRightActivity extends Activity {
	
    private Button btnStart = null;
	
	public void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
        // 移除Title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
		
        setContentView(R.layout.right_layout);
        
        // 开始按钮
        btnStart = (Button) findViewById(R.id.btn_anim_right);
        
        /**
         * 开始测试按钮 的监听函数
         * 
         * */
        btnStart.setOnClickListener(new View.OnClickListener() {
			
			public void onClick(View view) {
				Intent i = new Intent(getApplicationContext(), AnimLeftActivity.class);
				startActivity(i);
				
				// 设置切换动画，从右边进入，左边退出
		        overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);
		        
				finish();			}
		});
	}
}

(2)Activity 实现 OnTouchListener 和 OnGestureListener 接口

public class GestureLeftActivity extends Activity implements OnTouchListener, OnGestureListener {
    
	// 按钮
	private Button btnStart = null;
	
    // 监听左划动作
    private RelativeLayout rlLeft = null;
    private GestureDetector gd    = null;
    
    // 最小的水平有效划动距离和速度，超过该距离和速度才触发划动事件
    private int slideMinDistance = 20;  
    private int slideMinVelocity = 0;  
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 移除Title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.left_layout);
        
        btnStart = (Button) findViewById(R.id.btn_anim_left);
        btnStart.setText("");
        
        btnStart.setOnClickListener(new View.OnClickListener() {
			
			public void onClick(View v) {
		        Toast.makeText(GestureLeftActivity.this, "请向左滑动", Toast.LENGTH_SHORT).show();
			}
		});
        
        // 处理左划事件
        gd = new GestureDetector((OnGestureListener) this);    
        rlLeft = (RelativeLayout) findViewById(R.id.rl_left);    
        rlLeft.setOnTouchListener(this);    
        rlLeft.setLongClickable(true);
    }
    
    
    /**
     * 滑动到手写页面
      * @Title:       slideToAnalyser
      * @Description: TODO
      * @param        
      * @return       void
      * @throws
     */
    private void slideToGestureRightActivity() {
		Intent i = new Intent(getApplicationContext(), GestureRightActivity.class);
		startActivity(i);
		
		// 设置切换动画，从右边进入，左边退出
        overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);
        
		finish();
    }
    
	/*
	  * <p>Title: onDown</p>
	  * <p>Description: </p>
	  * @param arg0
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent)
	  */
	public boolean onDown(MotionEvent arg0) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onFling</p>
	  * <p>Description: </p>
	  * @param e1
	  * @param e2
	  * @param velocityX
	  * @param velocityY
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
	  */
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

		if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {  
			  
	        // 切换Activity  
			slideToGestureRightActivity();
	        Toast.makeText(this, "向左手势", Toast.LENGTH_SHORT).show();  
	    } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {  
	  
	        // 切换Activity  
	        // Intent intent = new Intent(ViewSnsActivity.this, UpdateStatusActivity.class);  
	        // startActivity(intent);  
	        Toast.makeText(this, "向右手势", Toast.LENGTH_SHORT).show();
	    }
	  
	    return false;  
	}


	/*
	  * <p>Title: onLongPress</p>
	  * <p>Description: </p>
	  * @param e
	  * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent)
	  */
	
	
	public void onLongPress(MotionEvent e) {

		// TODO Auto-generated method stub
		
	}


	/*
	  * <p>Title: onScroll</p>
	  * <p>Description: </p>
	  * @param e1
	  * @param e2
	  * @param distanceX
	  * @param distanceY
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)
	  */
	
	
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onShowPress</p>
	  * <p>Description: </p>
	  * @param e
	  * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent)
	  */
	
	
	public void onShowPress(MotionEvent e) {

		// TODO Auto-generated method stub
		
	}


	/*
	  * <p>Title: onSingleTapUp</p>
	  * <p>Description: </p>
	  * @param e
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent)
	  */
	
	
	public boolean onSingleTapUp(MotionEvent e) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onTouch</p>
	  * <p>Description: </p>
	  * @param v
	  * @param event
	  * @return
	  * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent)
	  */
	
	
	public boolean onTouch(View v, MotionEvent event) {

		// TODO Auto-generated method stub
		return gd.onTouchEvent(event);
	}
	
	public boolean dispatchTouchEvent(MotionEvent ev) {

		gd.onTouchEvent(ev);
		
		// scroll.onTouchEvent(ev);
		return super.dispatchTouchEvent(ev);
	} 
}



public class GestureRightActivity extends Activity implements OnTouchListener, OnGestureListener {
    
	// 按钮
	private Button btnStart = null;
	
    // 监听左划动作
    private RelativeLayout rlRight = null;
    private GestureDetector gd    = null;
    
    // 最小的水平有效划动距离和速度，超过该距离和速度才触发划动事件
    private int slideMinDistance = 20;  
    private int slideMinVelocity = 0;  
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 移除Title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.right_layout);
        
        btnStart = (Button) findViewById(R.id.btn_anim_right);
        btnStart.setText("");
        
        btnStart.setOnClickListener(new View.OnClickListener() {
			
			public void onClick(View v) {
		        Toast.makeText(GestureRightActivity.this, "请向右滑动", Toast.LENGTH_SHORT).show();
			}
		});
        
        // 处理左划事件
        gd = new GestureDetector((OnGestureListener) this);    
        rlRight = (RelativeLayout) findViewById(R.id.rl_right);    
        rlRight.setOnTouchListener(this);    
        rlRight.setLongClickable(true);
    }
    
    
    /**
     * 滑动到手写页面
      * @Title:       slideToAnalyser
      * @Description: TODO
      * @param        
      * @return       void
      * @throws
     */
    private void slideToGestureLeftActivity() {
		Intent i = new Intent(getApplicationContext(), GestureLeftActivity.class);
		startActivity(i);
		
		// 设置切换动画，从右边进入，左边退出
        overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);
        
		finish();
    }
    
	/*
	  * <p>Title: onDown</p>
	  * <p>Description: </p>
	  * @param arg0
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent)
	  */
	public boolean onDown(MotionEvent arg0) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onFling</p>
	  * <p>Description: </p>
	  * @param e1
	  * @param e2
	  * @param velocityX
	  * @param velocityY
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
	  */
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

		if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {  
	        Toast.makeText(this, "向左手势", Toast.LENGTH_SHORT).show();  
	    } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {  
	  
	        // 切换Activity  
			slideToGestureLeftActivity();
	        Toast.makeText(this, "向右手势", Toast.LENGTH_SHORT).show();
	    }
	  
	    return false;  
	}


	/*
	  * <p>Title: onLongPress</p>
	  * <p>Description: </p>
	  * @param e
	  * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent)
	  */
	
	
	public void onLongPress(MotionEvent e) {

		// TODO Auto-generated method stub
		
	}


	/*
	  * <p>Title: onScroll</p>
	  * <p>Description: </p>
	  * @param e1
	  * @param e2
	  * @param distanceX
	  * @param distanceY
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)
	  */
	
	
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onShowPress</p>
	  * <p>Description: </p>
	  * @param e
	  * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent)
	  */
	
	
	public void onShowPress(MotionEvent e) {

		// TODO Auto-generated method stub
		
	}


	/*
	  * <p>Title: onSingleTapUp</p>
	  * <p>Description: </p>
	  * @param e
	  * @return
	  * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent)
	  */
	
	
	public boolean onSingleTapUp(MotionEvent e) {

		// TODO Auto-generated method stub
		return false;
	}


	/*
	  * <p>Title: onTouch</p>
	  * <p>Description: </p>
	  * @param v
	  * @param event
	  * @return
	  * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent)
	  */
	
	
	public boolean onTouch(View v, MotionEvent event) {

		// TODO Auto-generated method stub
		return gd.onTouchEvent(event);
	}
	
	public boolean dispatchTouchEvent(MotionEvent ev) {

		gd.onTouchEvent(ev);
		
		// scroll.onTouchEvent(ev);
		return super.dispatchTouchEvent(ev);
	} 
}


(3)使用 ViewPager

待续。。。

陈蒙_
关注
专栏目录
【Android入门到项目实战-- 11.3】—— 实现可左右滑动切换页面的导航栏（ViewPager+TabLayout+Fragment）
张修宇的博客
05-20 2340
Android如何实现可左右滑动的导航栏，使用ViewPager+TabLayout+Fragment实现，在导航栏页面里加入左右滑动的导航栏。
Android页面左右滑动
11-22
Android页面左右滑动，ViewPager的简单应用。Android页面左右滑动，ViewPager的简单应用。
「MDN web 入门」学习笔记
最新发布
weixin_41978174的博客
07-23 92
这篇文章主要参考了MDN的文档教程，但并非完全相同。有些方面是根据我的理解以及面向ChatGPT学习进行整理改动。在发表这篇博客时，我曾担忧过是否有抄袭之嫌，因为在CSDN上看到不少抄袭的文章。但我学识有限，对于版权这方面的了解甚微。按照我的理解，“MDN Web 文档是免费使用的，且允许我们记录开放 web 平台的资源。”，这也是官方的介绍。如果这篇文章仅仅作为个人学习笔记来看是没有什么不妥的。这个担忧是基于如果这篇文章的传阅范围很广泛，很有可能造成不必要的争端，所以在此声明。
android 左右滑动切换页面
03-31
左右滑动切换Activity ，类似网易客户端左右划的效果。
Android页面左右滑动（Gallery）
huluhong的博客
10-23 924
自从滑动功能出来后人们都习惯手滑来滑去，现在我做了一个简单例子，实现页面之间的左右滑动。实现的方法有很多，我这里用的是Gallery加载适配器的方法。 有图有真像： 第一界面，内容差不多，只是前面的编号不一样。   滑动过程 例子结构   一个activity
android中的左右滑动
软件开发、电子设计
04-23 734
iphone中有很多应用都能够左右滑动，非常cool，关键是实现起来非常简单。android比起来就差远了，网上有不少帖子。 我在这边重新分享下自己的经验吧，将实现细节详细解释下。 FlingGallery这个类摘自网上，有少许修改。 Java代码   package com.nuomi.ui;    import java.util.HashSet;  import j
（转载）Android工具类：实现左右滑动页面
X154150的博客
05-29 304
ViewGroup 左右滑动页面
android实现上下左右滑动界面布局
08-25
Android 实现上下左右滑动界面布局 Android 实现上下左右滑动界面布局是 Android 开发中的一种常见需求，今天我们将详细介绍如何使用 ScrollView 和 HorizontalScrollView 实现上下左右滑动的界面布局。 首先，...
Android 界面禁止左右滑动切换
05-05
首先，Android界面的左右滑动切换通常是通过`ViewPager`组件实现的，它允许用户通过横向滑动来浏览多个页面。如果我们想要禁止这种行为，我们需要对`ViewPager`进行定制。以下是一种可能的方法： 1. **自定义...
Android ViewPager实现左右滑动翻页效果
08-28
"Android ViewPager实现左右滑动翻页效果" Android ViewPager是Android平台上一种常用的滑动翻页控件，能够实现左右滑动翻页效果，下面将详细介绍ViewPager实现左右滑动翻页效果的知识点。 一、ViewPager概述 ...
Android上下左右滑动支持同时滑动斜向任意方向滑动大图片浏览大图表浏览
07-01
标题提到的“Android上下左右滑动支持同时滑动斜向任意方向滑动大图片浏览大图表浏览”是一个旨在提升用户体验的技术解决方案。这个功能允许用户在设备上更加流畅地查看大尺寸的内容，而不会受到单一滑动方向的限制...
Android实现界面左右滑动切换功能
08-31
相信大家一定都使用过手机QQ和微信之类的软件，当我们使用时不难发现其界面的切换不仅可以通过点击页标签来实现，还可以通过左右滑动来实现的，下面小编给大家介绍下如何实现这个功能
android-左右滑动页面设计-仿微信滑动引导页面
05-02
SlidePageView组件实现的仿微信上次使用时引导页面demo， 还有SlidePageView实现的自定义的等宽和不等宽显示单元页面的demo 详情可以看我的博客http://blog.csdn.net/swadair/article/details/7529159
Android左右菜单滑动
04-09
这是一个可以从左，或右端滑出菜单，菜单中可以添加ListView，并写了个公共控件来处理上下，左右手势处理，避免冲突。
android 之ViewPager左右滑动切换界面
04-19
NULL 博文链接：https://fuchangle.iteye.com/blog/1876429
android左右滑动页面
01-17
根据别人的代码进行修改，原先用java写的布局改为用xml布局文件，另外各个页面做了按钮点击相应事件。
android 实现页面左右滑动
gmxstar的专栏
01-16 294
通过Button实现页面的左右滑动切换   public class jipiao extends Activity {    /** Called when the activity is first created. */            @Override    public void onCreate(Bundle savedInstanceState) {           ...
android实现左右滑动界面
Linux灰灰的云深无迹
07-21 3151
首先要说的是，界面滑动，就需要多个view来进行切换，实际上可以用一个ArrayList pageViews来保存这些view的信息，然后进行切换 LayoutInflater inflater = getLayoutInflater(); pageViews = new ArrayList(); pageViews.add(inflater.inflate(R.layout.item0
Android工具类：实现左右滑动页面
weixin_34153893的博客
10-04 227
本文介绍Android中实现左右滑动切换页面的效果 网络上实现的方法多种多样，前段时间稍微研究过，这几天又整理了一下，拿出来分享希望对码友们会有帮助。 这里把实现方法封装成一个继承于ViewGroup的类（DragableLuncher），便于复用。 如标题写的，我把它封装成了一个工具类，因此先介绍使用方式。 1.使用方式 在DragableLuncher内通过include标签添...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值