作者| 被代码淹没的小伙子地址|/p/ee8a37ea736d先看效果图:
效果:
1.竖向的Viewpager2.3D翻动效果
3.Glide加载图片
实现思路:
Viewpager的竖向滑动
这里说下我的实现方式:交换触摸位置的x,y方向,
利用PageTransformer的transformPage()方法,
在移动过程中通过translation动态改变页面方向实现竖向移动。
2. 3D翻转效果:也是利用PageTransformer的transformPage()方法,主要通过setRotationX方法,绕X轴旋转,这里注意要改变视角距离不然无法实现效果。
主要代码:
/** * Swaps the X and Y coordinates of your touch event. */private MotionEvent swapXY(MotionEvent ev) {float width = getWidth(); float height = getHeight(); float newX = (ev.getY() / height) * width; float newY = (ev.getX() / width) * height; ev.setLocation(newX, newY); return ev;}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {boolean intercepted = super.onInterceptTouchEvent(swapXY(ev)); return intercepted;}
可以看到这里,重写了onInterceptTouchEvent,在这里调用了swapXY方法,这个方法主要是交换了触摸位置的X,Y坐标,但是代码可能理解起来有点困难,可以这样理解:
Viewpager的默认布局方式如图所示,也就是只能触发你的横向事件,竖向的滑动并不会影响Viewpager的滑动。
这里为了使竖向的滑动起效果,可以看到newX = (ev.getY() / height) * width这里当你Y轴移动了,通过高宽比,转变成X轴的移动。当手指移动距离:ev.getY() = height,newX = height/heightwidth = width对应的X轴就移动了width长度,这也就为后来的实现提供了基础
当手指移动距离:ev.getX() = width,newY = width/widthheight = height(这个其实对后面并没有影响,因为Viewpager不会触发Y轴的移动)
private class VerticalPageTransformer implements ViewPager.PageTransformer {@Override public void transformPage(View view, float position) {if (position <= 0) {view.setAlpha(1); view.setTranslationY((float) (-view.getHeight() * (1 - Math.pow(0.9f, -position)))); //设置缩放中点 view.setPivotX(view.getWidth() / 2f); view.setPivotY(view.getHeight() / 2f); //设置缩放的比例 此处设置两个相邻的卡片的缩放比率为0.9f float Scale = (float) Math.pow(0.9f, -position); if (Scale > 0.7f) {view.setScaleX(Scale);view.setScaleY(Scale); } else {view.setAlpha(0); } } else {//(0,++) view.setPivotY(view.getHeight()); setCameraDistance(view); view.setRotationX(180 * -position); view.setAlpha(1 - position); } view.setTranslationX(view.getWidth() * -position); }}
重写的PageTransformer的transformPage的方法,这里重点要理解position参数。这里我画了个图方便理解,由图可见:初始时,前三张的position分别为0,1,2。
向左滑动一页:前三张的position分别为-1,0,1
再向左滑一页:前三张的position分别为-2,-1,0
所以可以得到position的变化范围,当前页显示的position为0,当前页左边的显示的<0,当前页右边的显示的>0。
这里我将当前页设置为最后一页(总量为8),那么显示的position分别为-7,-6...-2,-1,0
现在来一步一步实现
1.实现X坐标相同
view.setTranslationX(view.getWidth() * -position);
现在要将布局显示成竖向排列,所以很容易想到把每个View的X坐标+width*-position这时候可以想到,所有的页面都重叠在一起,位置在position=0的地方。
2.实现Y坐标逐减
现在则需要将页面的Y坐标,分别向上移动一点距离,这里我通过0.9的幂函数来实现错开。
view.setTranslationY((float) (-view.getHeight() * (1 - Math.pow(0.9f, -position))));
position=0:对应的y
position=-1:要上移一点,y-height(1-0.9) = y-height0.1
position=-2:再上移一点,y-height(1-0.90.9) = y-height*0.19
...以此类推
3.实现逐层缩小
这块应该就比较好实现了,现在position=0,-1,-2,-3,...,-7(我是设第一页显示末页,倒着来)
//设置缩放中点view.setPivotX(view.getWidth() / 2f);view.setPivotY(view.getHeight() / 2f);//设置缩放的比例 此处设置两个相邻的卡片的缩放比率为0.9ffloat Scale = (float) Math.pow(0.9f, -position);view.setScaleX(Scale);view.setScaleY(Scale);
可以看到,代码还是比较好理解的,前两句设置缩放中点,后面就是设置缩放比例为0.9的幂函数
position=0:对应Scale = 1
position=-1:Scale=0.9
position=-2:Scale=0.9*0.9=0.81
4.实现3D绕轴旋转
view.setPivotY(view.getHeight());setCameraDistance(view);view.setRotationX(180 * -position); /*** 改变视角距离, 贴近屏幕*/ private void setCameraDistance(View view) {int distance = 10000; float scale = getResources().getDisplayMetrics().density * distance; view.setCameraDistance(scale); }
首先根据我们要实现的效果,可以发现我们是绕图片的下边线旋转的,所以我们首先设轴为y=height
view.setPivotY(view.getHeight());
setCameraDistance()这个函数我们等会说
这里我们轴确定了好就要确定我们的旋转的角度,根据效果,我们发现,我们旋转的角度是[0,-180],而position的变化范围是[0,1],所以代码就很好理解了
view.setRotationX(180 * -position);
一开始我以为这样就实现了效果,但是运行效果会发现很奇怪最后通过网上搜寻发现原因就是需要使用这个函数,改变视角距离,贴近屏幕,看起来才正确。
/*** 改变视角距离, 贴近屏幕*/ private void setCameraDistance(View view) {int distance = 10000; float scale = getResources().getDisplayMetrics().density * distance; view.setCameraDistance(scale); }
5.透明度变化
这块就很好理解了,我将position分为了两个区段,(负无穷,0),[0,正无穷)
(负无穷,0) alpha =1
[0,1] alpha =1-position逐渐透明
[1,正无穷)alpha <=0透明
6.设置显示页数
这里可以发现,实现出来的效果,后面的页会一直显示在后面,看起来密集恐惧症+强迫症有木有
if (Scale > 0.7f) {view.setScaleX(Scale);view.setScaleY(Scale);} else {view.setAlpha(0);}
所以我在这设置了一下,当缩放值小于0.7时,就让它隐藏。源码地址:/DrownCoder/GlideStudy到这里就结束啦往期精彩回顾:
Android实现短信验证码自动填充功能
Android仿echo精美弹幕功能
Android实现头像重叠排列功能
Android仿QQ个性标签功能
Android仿QQ侧滑删除的功能