android view的隐藏和显示_Android使用Viewpager实现3D卡片翻动效果
作者 | 被代码淹没的小伙子地址 | https://www.jianshu.com/p/ee8a37ea736d
先看效果图:
效果:
1.竖向的Viewpager
2.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.9f float 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时,就让它隐藏。源码地址:https://github.com/DrownCoder/GlideStudy到这里就结束啦往期精彩回顾:
Android实现短信验证码自动填充功能
Android仿echo精美弹幕功能
Android实现头像重叠排列功能
Android仿QQ个性标签功能
Android仿QQ侧滑删除的功能
android view的隐藏和显示_Android使用Viewpager实现3D卡片翻动效果相关推荐
- Android 虚拟按键隐藏或显示之后共享元素动画异常解决方案
背景 本篇算是共享元素的第三篇文章.主要还是因为第一篇才会衍生出来了第二篇和第三篇文章,后两篇均属于bug的分析和解决. 1.Android 仿微信朋友圈图片拖拽返回 2.Android 共享元素动画 ...
- Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果
本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下 先放一张效果图: 想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性 ...
- Android下PopupWindow隐藏及显示(showAtLocation/showAsDropDown)
转载:http://orgcent.com/android-popupwindow-showasdropdown-showatlocation/ 上一篇对PopupWindow的用法(位置.动画.焦点 ...
- Android开发:隐藏和显示底部导航栏
描述:视频播放器实现全屏和小屏互相切换时,显示和隐藏底部导航栏的方法 该例子设置的Activity是去除状态栏和标题栏,全屏显示布局和电量等信息.Manifest文件 theme如下: <act ...
- android 根据滑动隐藏或显示导航 类似手机QQ好友个人信息
//重写ScrollViewpublic class NotifyingScrollView extends ScrollView {/*** @author Cyril Mottier*/publi ...
- Android之——史上最简单最酷炫的3D图片浏览效果的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量 ...
- android view控件的显示和隐藏动画效果
// 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...
- android 隐藏状态栏 不起作用,Android 状态栏的隐藏和显示
在Android应用中我们可能会碰到这样的需求,隐藏状态栏或者状态栏和应用背景一样的颜色,比如下图: 状态栏和背景一个颜色 Android应用程序的界面上系统元素构成如下图: 在4.1之后的系统,隐藏 ...
- android 键盘的隐藏与显示
这个其实很简单,但是有时候自己就忘记了,所以在这里记录一下. 1,键盘的隐藏. private void hintKbTwo() { InputMethodManager imm = (InputM ...
最新文章
- 【廖雪峰Python学习笔记】字符串与编码
- 8种Nosql数据库系统对比
- linux shell中的命令自动补全(compgen complete)与 命令行参数解析
- github提交代码403
- Logstash匹配日志日期
- pp助手苹果版_微商相册助手ios版下载-微商相册助手苹果版下载v1.0.8
- 计算机主机运行显示屏黑屏,电脑开机黑屏_电脑启动显示器黑屏的原因和检修-太平洋IT百科...
- java.lang.InstantiationException: class has no zero argument constructor
- 微医战略投资贝联落定,打造全国首家互联网妇幼医院,实现产业闭环
- 2017年6月六级翻译明朝
- CDR插件开发之Addon插件007 - Addon插件简介和案例演示
- CSS在线字体库,外部字体的引用方法@font-face
- 浙大oj(Basic Practice)1004
- TNMT新交通排行榜
- php的数组、排序、查找
- MATLAB怎么做出三叶玫瑰线,《数学实验》期末总复习题
- Date日期——格式化日期时分秒
- DNF 鬼剑士技能设置
- 《夜深人静写算法》总纲
- 图解SQL面试题:多表如何查询?