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

2401_84160310

于 2024-04-18 10:02:57 发布

阅读量378

点赞数 5

分类专栏： 2024年程序员学习文章标签：学习

本文链接：https://blog.csdn.net/2401_84160310/article/details/137908823

版权

2024年程序员学习专栏收录该内容

115 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

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

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

htt

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

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

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

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

前置技能

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

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

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

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

实现思路

一、源码研究

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

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

protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int count = getChildCount();
...
for (int i = 0; i < count; i++) {
if (child.getVisibility() != GONE) {
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
int childLeft = 0;
int childTop = 0;
if (lp.isDecor) {
...
}
}
}
...
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
ItemInfo ii;
if (!lp.isDecor && (ii = infoForChild(child)) != null) {
int loff = (int) (childWidth * ii.offset);
int childLeft = paddingLeft + loff;
int childTop = paddingTop;
if (lp.needsMeasure) {
// This was added during layout and needs measurement.
// Do it now that we know what we're working with.
lp.needsMeasure = false;
final int widthSpec = MeasureSpec.makeMeasureSpec(
(int) (childWidth * lp.widthFactor),
MeasureSpec.EXACTLY);
final int heightSpec = MeasureSpec.makeMeasureSpec(
(int) (height - paddingTop - paddingBottom),
MeasureSpec.EXACTLY);
child.measure(widthSpec, heightSpec);
}
if (DEBUG) {
Log.v(TAG, "Positioning #" + i + " " + child + " f=" + ii.object
+ ":" + childLeft + "," + childTop + " " + child.getMeasuredWidth()
+ "x" + child.getMeasuredHeight());
}
child.layout(childLeft, childTop,
childLeft + child.getMeasuredWidth(),
childTop + child.getMeasuredHeight());
}
}
}
}

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

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

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

child.layout(childLeft, childTop,
childLeft + child.getMeasuredWidth(),
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 逻辑分支：

case MotionEvent.ACTION_MOVE:
if (!mIsBeingDragged) {
final int pointerIndex = ev.findPointerIndex(mActivePointerId);
if (pointerIndex == -1) {
// A child has consumed some touch events and put us into an inconsistent
// state.
needsInvalidate = resetTouch();
break;
}
final float x = ev.getX(pointerIndex);
final float xDiff = Math.abs(x - mLastMotionX);
final float y = ev.getY(pointerIndex);
final float yDiff = Math.abs(y - mLastMotionY);
if (DEBUG) {
Log.v(TAG, "Moved x to " + x + "," + y + " diff=" + xDiff + "," + yDiff);
}
if (xDiff > mTouchSlop && xDiff > yDiff) {
if (DEBUG) Log.v(TAG, "Starting drag!");
mIsBeingDragged = true;
requestParentDisallowInterceptTouchEvent(true);
mLastMotionX = x - mInitialMotionX > 0 ? mInitialMotionX + mTouchSlop :
mInitialMotionX - mTouchSlop;
mLastMotionY = y;
setScrollState(SCROLL_STATE_DRAGGING);
setScrollingCacheEnabled(true);
// Disallow Parent Intercept, just in case
ViewParent parent = getParent();
if (parent != null) {
parent.requestDisallowInterceptTouchEvent(true);
}
}
}
// Not else! Note that mIsBeingDragged can be set above.
if (mIsBeingDragged) {
// Scroll to follow the motion event
final int activePointerIndex = ev.findPointerIndex(mActivePointerId);
final float x = ev.getX(activePointerIndex);
needsInvalidate |= performDrag(x);
}
break;

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

private boolean performDrag(float x) {
boolean needsInvalidate = false;
final float deltaX = mLastMotionX - x;
mLastMotionX = x;
...
// Don't lose the rounded component
mLastMotionX += scrollX - (int) scrollX;
scrollTo((int) scrollX, getScrollY()); // 关键代码1，控件在画布上的横像滚动
pageScrolled((int) scrollX);// 关键代码2，将 scrollX进一步往下传递
return needsInvalidate;
}

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

private boolean pageScrolled(int xpos) {
...
final float pageOffset = (((float) xpos / width) - ii.offset)
/ (ii.widthFactor + marginOffset);
final int offsetPixels = (int) (pageOffset * widthWithMargin);
mCalledSuper = false;
onPageScrolled(currentPage, pageOffset, offsetPixels);
if (!mCalledSuper) {
throw new IllegalStateException(
"onPageScrolled did not call superclass implementation");
}
return true;
}

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

protected void onPageScrolled(int position, float offset, int offsetPixels) {
// Offset any decor views if needed - keep them on-screen at all times.
if (mDecorChildCount > 0) {
... // 这里还是在处理装饰，所以不用看,而且参数也没进入到这里
}
dispatchOnPageScrolled(position, offset, offsetPixels);
if (mPageTransformer != null) {
final int scrollX = getScrollX();
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

ScrollX();`

final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
[外链图片转存中…(img-8NP7EhX2-1713405706002)]

2401_84160310

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
手把手讲解ViewPager翻页特效：向源码学习！_viewpage 动画改成纵向(4)

这个便是child的排布的核心代码，追溯这4个参数，可以得知：第 1，3 参数表示left，right，他们都和一个。是如何摆放的，虽然从视觉上我们能够感觉到子view是横向摆放的，但是作为技术人，就要敢于追根究底，用源码说话。挂钩，而第2，4参数表示 top，bottom，则并没有与任何动态参数相挂钩。看看x轴方向上的位置偏差是如何造成的，但是目的已经达到，到有必要的时候再去追查。显然，我们要探讨的是adapter提供的View是如何摆放的，所以忽略这一块。得知，x方向上的偏移量信息，最后进入了。
复制链接

扫一扫