当前位置: 首页 > 编程笔记 >

Android自定义ViewPager实现纵向滑动翻页效果

夔高寒
2023-03-14
本文向大家介绍Android自定义ViewPager实现纵向滑动翻页效果,包括了Android自定义ViewPager实现纵向滑动翻页效果的使用技巧和注意事项,需要的朋友参考一下

抖音几乎已经成为了我们日常生活中使用比较频繁的App,无聊之时或工作之后可以刷一刷短视频来供我们娱乐与放松。看到抖音的视屏切换效果,觉得用ViewPager可以做出一样的效果。想一想之前用的ViewPager都是横向切换的,虽然很经常用,但是从来没实现过竖向的切换效果,说做就做吧。

我们先看一波效果图:

那么,要想实现这样的效果,当然是自定义ViewPager啦。问了一下度娘,看到有这样一种思路:
首先,把Touch事件的x,y坐标做一下交换,从原先的x坐标差值转变成y坐标的差值,正符合了我们手指从横向滑动转成了纵向滑动。其次,再通过实现PageTransformer接口,改变view的平移方向,便实现了如上效果。
下面我们贴出代码,并理解一下整个实现过程。

public class VerticalViewPager extends ViewPager {
 public VerticalViewPager(Context context) {
  super(context);
 }
 
 public VerticalViewPager(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent ev) {
  return super.onTouchEvent(swapTouchEvent(MotionEvent.obtain(ev)));
 }
 
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
  return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain(ev)));
 }
 
 private MotionEvent swapTouchEvent(MotionEvent event) {
  float width = getWidth();
  float height = getHeight();
  event.setLocation((event.getY() / height) * width, ((event.getX() / width) * height));
  return event;
 }
}

首先,我们自定义一个继承ViewPager的类,我们重点关注一下swapTouchEvent()方法。这个方法是将MotionEvent事件的x坐标换成y坐标,而y坐标换成x坐标。当然,这个是参考百度的,我们理解了就好。其实现实在妙不可言!

public class VerticalPageTransformer implements ViewPager.PageTransformer {
 @Override
 public void transformPage(View view, float position) {
  /**
   * 0 当前界面
   * -1 前一页
   * 1 后一页
   */
  if (position >= -1 && position <= 1) {
   view.setTranslationX(view.getWidth() * -position);
   float yPosition = position * view.getHeight();
   view.setTranslationY(yPosition);
  }
 }
}

上部分代码,实现了界面由原来的横向平移到纵向平移的过程。其思路是这样的,我画了一个草图(凑合看,毕竟连幼儿园都没毕业,画画功底~~)

这张图描述了我们手机的屏幕,我们知道ViewPager,默认是把三个界面横向着排一起的,现在我们将其改为纵向的。
如果手指向下滑动,也就是第一个界面(绿色的),它将会进入到我们的屏幕,然而当前页(红色的)将退出屏幕,这是一套完整的流程,手指向上滑动,则方向相反。

view.setTranslationX(view.getWidth() * -position);
 float yPosition = position * view.getHeight();
 view.setTranslationY(yPosition);

这是对ViewPager中所有子View的x,y坐标进行平移使它能够排成纵向一排。代码不难,就是对x,y坐标的平移处理。例如:
绿色的:它的position为-1,对y坐标而言,平移它的view高度。也就是-height,对x坐标而言,则平移它的width*-position,那它就跑到红色的头上了,现在我们往下滑动手指,它就进入屏幕了。

总体来说,大致实现就是这样,只要理清思路便可以很快的理解。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android ViewPager实现左右滑动翻页效果,包括了Android ViewPager实现左右滑动翻页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: 布局文件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android自定义左右或上下滑动翻页效果,包括了Android自定义左右或上下滑动翻页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android自定义左右或上下滑动翻页展示的具体代码,供大家参考,具体内容如下 该自定义的效果和ViewPage+Fragment差不多 上下滑动翻页,继承ScrollView 左右滑动翻页,继承HorizontalScrollVi

  • 本文向大家介绍android自定义ViewPager水平滑动弹性效果,包括了android自定义ViewPager水平滑动弹性效果的使用技巧和注意事项,需要的朋友参考一下 android ViewPager是一个经常要用到的组件,但android系统本身为我们提供的ViewPager是没有任何效果的,只能是一页一页的滑动,这样会让人感觉很死板,在看一些知名大公司的App时,看到了他们的ViewPa

  • 本文向大家介绍android viewpager实现竖屏滑动效果,包括了android viewpager实现竖屏滑动效果的使用技巧和注意事项,需要的朋友参考一下 Viewpager 横向滑动效果系统就自带了很多种,比如这个 效果 那如果做成竖屏的这种效果呢 。我百度过很多,效果都不是很好,有的代码特别多而且存在很多问题。我结合了以前别人的代码现在来教大家个简单的实现过程。 首先自定义Viewpa

  • 本文向大家介绍Android CardView+ViewPager实现ViewPager翻页动画的方法,包括了Android CardView+ViewPager实现ViewPager翻页动画的方法的使用技巧和注意事项,需要的朋友参考一下 Viewpager通俗一点讲就是一个允许左右翻转带数据的页面的布局管理器,经常用来连接Fragment,它很方便管理每个页面的生命周期,使用ViewPager管

  • 本文向大家介绍Android自定义View实现纵向跑马灯效果详解,包括了Android自定义View实现纵向跑马灯效果详解的使用技巧和注意事项,需要的朋友参考一下 首先看看效果图(录制的gif有点卡,真实的效果还是很流畅的) 实现思路 通过上面的gif图可以得出结论,其实它就是同时绘制两条文本信息,然后通过动画不断的改变两条文本信息距离顶部的高度,以此来实现滚动的效果。 具体实现 首先定义一些要用