手把手讲解ViewPager翻页特效：向源码学习！_viewpage 动画改成纵向

机器学习之心AI
52 阅读5分钟

前言

2020年后第一篇，来点轻松的话题吧。在家办公，UI美眉心血来潮要搞一个滑动特效。ViewPager+TabLayout，老生常谈的东西了。 ViewPager 是基础的滑动切换控件，TabLayout 是和 ViewPager配合使用的标题栏部分（但是 TabLayout也可以脱离 ViewPager 独立使用)。根据查到的资料显示，谷歌工程师在 ViewPager创立之时，就给风骚的动画特效预留了接口，我们可以很方便地去使用这个接口进行动画编程，但是 TabLayout就比较悲情，不但动画没预留接口，甚至一些常规操作的接口都没有提供，所以网上也出现了一些人按照原 TabLayout的代码，自己去创造新的 xxTabLayout控件。

本文将提供 ViewPager+TabLayout 的实例效果，开发思路，以及**Demo **github工程。有兴趣的童鞋们希望可以留言多多交流。

Demo地址：github.com/18598925736…

正文大纲

  • 参考效果
  • 前置技能
  • 实现思路
  • 关键代码
  • 思维拓展

正文

参考效果

上图 UI 美眉给的手机录屏，是蚂蚁财富 app某一个版本上的滑动切换效果。

我们需要开发的是下面这一半这个滑动切换的控件。

前置技能

经过对 ViewPager可能特效的研究，发现它自身就带有这种动画特效的可能性，不用我们去自定义控件。

但是上方的 TabLayout字体大小变化，指示器indicator的长度和位置变化，谷歌给的TabLayout貌似没法弄，所以只能自己 DIY了.

要完成这个特效，两个技能必须就位：

  • android 视图动画     android体系中比较原始的一种动画类型。原理，是将view的绘制过程在指定区域，按照指定规则再进行一遍，但是原本view所携带的事件交互，则不受影响。由于无法真正地继承事件交互，所以被属性动画所取代。但是它仍然有自己的价值。在不涉及到交互，只考虑视觉效果的情况下，它的效率反而比属性动画更高。
  • 数学建模思想    不要误会，这里说的数学建模是一种思维方式，把我们肉眼看到的现象，用数学公式的形式表达出来而已，并不是什么高深的操作。学过自定义控件并且深入实践过的童鞋应该能够体会到，要想真正从0开始完成一个 DIY控件，会有大量的数学计算，而拥有好的数学思维能力，能够在自定义的时候如鱼得水。

实现思路

一、源码研究

要对ViewPager进行特效改造，那么首先我们要知道ViewPager是一个容器 ViewGroup，它内部的子 View是如何摆放的，虽然从视觉上我们能够感觉到 子view是横向摆放的，但是作为技术人，就要敢于追根究底，用源码说话。

进入源码，找到 onLayout方法( 以下是我提炼的关键代码)：

  1. protected void onLayout(boolean changed, int l, int t, int r, int b) {

  2. final int count = getChildCount();

  3. ...

  4. for (int i = 0; i < count; i++) {

  5. if (child.getVisibility() != GONE) {

  6. final LayoutParams lp = (LayoutParams) child.getLayoutParams();

  7. int childLeft = 0;

  8. int childTop = 0;

  9. if (lp.isDecor) {

  10. ...

  11. }

  12. }

  13. }

  14. ...

  15. for (int i = 0; i < count; i++) {

  16. final View child = getChildAt(i);

  17. if (child.getVisibility() != GONE) {

  18. final LayoutParams lp = (LayoutParams) child.getLayoutParams();

  19. ItemInfo ii;

  20. if (!lp.isDecor && (ii = infoForChild(child)) != null) {

  21. int loff = (int) (childWidth * ii.offset);

  22. int childLeft = paddingLeft + loff;

  23. int childTop = paddingTop;

  24. if (lp.needsMeasure) {

  25. // This was added during layout and needs measurement.

  26. // Do it now that we know what we're working with.

  27. lp.needsMeasure = false;

  28. final int widthSpec = MeasureSpec.makeMeasureSpec(

  29. (int) (childWidth * lp.widthFactor),

  30. MeasureSpec.EXACTLY);

  31. final int heightSpec = MeasureSpec.makeMeasureSpec(

  32. (int) (height - paddingTop - paddingBottom),

  33. MeasureSpec.EXACTLY);

  34. child.measure(widthSpec, heightSpec);

  35. }

  36. if (DEBUG) {

  37. Log.v(TAG, "Positioning #" + i + " " + child + " f=" + ii.object

  38. + ":" + childLeft + "," + childTop + " " + child.getMeasuredWidth()

  39. + "x" + child.getMeasuredHeight());

  40. }

  41. child.layout(childLeft, childTop,

  42. childLeft + child.getMeasuredWidth(),

  43. childTop + child.getMeasuredHeight());

  44. }

  45. }

  46. }

  47. }

上面代码中，对count进行了两轮循环，其中第一轮是针对lp.isDecor为true的，意为：如果当前view是一个decoration装饰，并不是adapter提供的view则返回true。

显然，我们要探讨的是adapter提供的View是如何摆放的，所以忽略这一块。

而在下面的循环中，可以看到：

  1. child.layout(childLeft, childTop,

  2. childLeft + child.getMeasuredWidth(),

  3. childTop + child.getMeasuredHeight());

这个便是child的排布的核心代码，追溯这4个参数，可以得知：第 1，3 参数表示left，right，他们都和一个 intloff=(int)(childWidth*ii.offset); 挂钩，而 第2，4参数表示 top，bottom，则并没有与任何动态参数相挂钩。

因此可以断定，ViewPager的子View排布，只会存在X轴方向上的位置偏差，在Y方向上会保持上下平齐。

其实还可以继续追溯 intloff=(int)(childWidth*ii.offset); 看看x轴方向上的位置偏差是如何造成的，但是目的已经达到，到有必要的时候再去追查。

确定是横向排布，那么左右滑动逻辑又是怎么样的呢？

找到 onTouchEvent() 方法，并且在其中找到 ACTION_MOVE 逻辑分支：

  1. case MotionEvent.ACTION_MOVE:

  2. if (!mIsBeingDragged) {

  3. final int pointerIndex = ev.findPointerIndex(mActivePointerId);

  4. if (pointerIndex == -1) {

  5. // A child has consumed some touch events and put us into an inconsistent

  6. // state.

  7. needsInvalidate = resetTouch();

  8. break;

  9. }

  10. final float x = ev.getX(pointerIndex);

  11. final float xDiff = Math.abs(x - mLastMotionX);

  12. final float y = ev.getY(pointerIndex);

  13. final float yDiff = Math.abs(y - mLastMotionY);

  14. if (DEBUG) {

  15. Log.v(TAG, "Moved x to " + x + "," + y + " diff=" + xDiff + "," + yDiff);

  16. }

  17. if (xDiff > mTouchSlop && xDiff > yDiff) {

  18. if (DEBUG) Log.v(TAG, "Starting drag!");

  19. mIsBeingDragged = true;

  20. requestParentDisallowInterceptTouchEvent(true);

  21. mLastMotionX = x - mInitialMotionX > 0 ? mInitialMotionX + mTouchSlop :

  22. mInitialMotionX - mTouchSlop;

  23. mLastMotionY = y;

  24. setScrollState(SCROLL_STATE_DRAGGING);

  25. setScrollingCacheEnabled(true);

  26. // Disallow Parent Intercept, just in case

  27. ViewParent parent = getParent();

  28. if (parent != null) {

  29. parent.requestDisallowInterceptTouchEvent(true);

  30. }

  31. }

  32. }

  33. // Not else! Note that mIsBeingDragged can be set above.

  34. if (mIsBeingDragged) {

  35. // Scroll to follow the motion event

  36. final int activePointerIndex = ev.findPointerIndex(mActivePointerId);

  37. final float x = ev.getX(activePointerIndex);

  38. needsInvalidate |= performDrag(x);

  39. }

  40. break;

我们需要关注的只是X方向上的拖拽有什么规律。所以，顺着 finalfloatx=ev.getX(pointerIndex); 这个变量去找关键方法，最终锁定：performDrag(x); 它是处理X方向上位移的关键入口。

  1. private boolean performDrag(float x) {

  2. boolean needsInvalidate = false;

  3. final float deltaX = mLastMotionX - x;

  4. mLastMotionX = x;

  5. ...

  6. // Don't lose the rounded component

  7. mLastMotionX += scrollX - (int) scrollX;

  8. scrollTo((int) scrollX, getScrollY()); // 关键代码1， 控件在画布上的横像滚动

  9. pageScrolled((int) scrollX);// 关键代码2，将 scrollX进一步往下传递

  10. return needsInvalidate;

  11. }

发现两句关键代码，一个是处理滑动的scrolllTo，一个是把 scrollX往下传递的 pageScrolled(scrollX)。前面一句都明白，但是这个第二句就有点不懂了，继续深入。

  1. private boolean pageScrolled(int xpos) {

  2. ...

  3. final float pageOffset = (((float) xpos / width) - ii.offset)

  4. / (ii.widthFactor + marginOffset);

  5. final int offsetPixels = (int) (pageOffset * widthWithMargin);

  6. mCalledSuper = false;

  7. onPageScrolled(currentPage, pageOffset, offsetPixels);

  8. if (!mCalledSuper) {

  9. throw new IllegalStateException(

  10. "onPageScrolled did not call superclass implementation");

  11. }

  12. return true;

  13. }

追踪参数 xpos得知，x方向上的偏移量信息，最后进入了onPageScrolled(...)方法。

  1. protected void onPageScrolled(int position, float offset, int offsetPixels) {

  2. // Offset any decor views if needed - keep them on-screen at all times.

  3. if (mDecorChildCount > 0) {

  4. ... // 这里还是在处理 装饰，所以不用看,而且参数也没进入到这里

  5. }

  6. dispatchOnPageScrolled(position, offset, offsetPixels);

  7. if (mPageTransformer != null) {

  8. final int scrollX = getScrollX();

  9. final int childCount = getChildCount();

  10. for (int i = 0; i < childCount; i++) {

  11. final View child = getChildAt(i);

  12. final LayoutParams lp = (LayoutParams) child.getLayoutParams();

  13. if (lp.isDecor) continue;

  14. final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();

  15. mPageTransformer.transformPage(child, transformPos);

  16. }

  17. }

  18. mCalledSuper = true;

  19. }

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

img img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

avatar
文章
阅读
粉丝