ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下:
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View; public class ReadViewPager extends ViewPager
{
public ReadViewPager(Context context)
{
super(context);
} public ReadViewPager(Context context, AttributeSet attrs)
{
super(context, attrs);
setAnima();
} public void setAnima()
{
setPageTransformer(true, new PageTransformer()
{
private static final float MIN_SCALE = 0.75f; @Override
public void transformPage(View view, float position)
{ int pageWidth = view.getWidth();
int pageHeight =view.getHeight(); if (position < -)
{
// [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(); }
else if (position <= )
{
// [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha();
view.setTranslationX();
view.setScaleX();
view.setScaleY();
}
else if (position <= )
{
// (0,1] // Fade the page out.
view.setAlpha( - position);
//
// // Counteract the default slide transition
// view.setAlpha(1);
view.setTranslationX(pageWidth * -position);
//
// // Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ ( - MIN_SCALE) * ( - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
else
{
// (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha();
}
} });
}
}
核心代码是android官方demo,以上实现的是翻页效果是:上面一页被滑出界面时,下面一页慢慢显现,透明度慢慢加大,并且大小由小慢慢变大。
不过有一个奇怪的现象,当我做一个答题界面时,刚刚开始我采用ViewPager与View结合实现无限循环切换,并且采用上面的动画效果,可是每当我滑动到最后一张,也就是要开始新的一轮循环的时候,被滑出去的一页也会出现慢慢变透明的情况,而我用ViewPager结合Fragment实现无限循环切换的是就不会出现这种效果
后来发现大概是因为我在适配器里面加上了下面这个方法才会造成上面的奇怪现象,所以下面的方法不能写下
// PagerAdapter只缓存三张要显示的图片,如果滑动的图片超出了缓存的范围,就会调用这个方法,将图片销毁
//在这里不能重写
// @Override
public void destroyItem(ViewGroup container, int position, Object object) {
//// super.destroyItem(container, position, object);
// }
如果想要实现仿造驾考宝典的翻页效果,只要把核心方法改为以下代码便可以了
setPageTransformer(true, new PageTransformer() {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight =view.getHeight();
if (position < -) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha();
} else if (position <= ) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha();
view.setTranslationX();
view.setScaleX();
view.setScaleY();
} else if (position <= ) { // (0,1]
// Fade the page out.
// view.setAlpha(1 - position);
//
// // Counteract the default slide transition
view.setAlpha();
view.setTranslationX(pageWidth * -position);
//
// // Scale the page down (between MIN_SCALE and 1)
// float scaleFactor = MIN_SCALE
// + (1 - MIN_SCALE) * (1 - Math.abs(position));
// view.setScaleX(scaleFactor);
// view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha();
}
}
});
下面我们来讲讲position参数:
position的可能性的值有:
[-Infinity,-1) 已经看不到了
(1,+Infinity] 已经看不到了
[-1,1]
重点看[-1,1]这个区间 , 其他两个的View都已经看不到了~~
假设现在ViewPager在A页现在滑出B页,则:
A页的position变化就是( 0, -1]
B页的position变化就是[ 1 , 0 ]
参考博客:http://blog.csdn.net/lmj623565791/article/details/40411921
http://www.jianshu.com/p/251592d3ec62
ViewPager实现滑动翻页效果的更多相关文章
- 微信里经常看到的滑动翻页效果,slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- 基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName("img-box")[0]; var beginX, beginY, endX, endY, s ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
- 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离
在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- Source Qualifter组件中sqlquery过长导致截取
问题:Source Qualifter组件中sqlquery过长导致截取原因:Source Qualifter组件中sqlquery可以接受的最长字符数是32767个字符,超过这个数字会导致截取解决方 ...
- Liunx服务管理(Centos)
RPM包安装的服务其安装文件是遵循系统默认安装位置,所以可以通过命令快速启动,但源码包的安装是统一放在一个自定义文件夹下,所有其服务要使用绝对路径,但也可以通过软连接方式,让其支持RPM包相同管理方式 ...
- RIPng配置(第十三组)
拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...
- pycharm安装plugins
1 . 启动 PyCharm 软件 2 . 打开 设置(Setting) 窗口.(操作:File -> Setting 或者 按快捷键 Ctrl + Alt + S) 3 . 在搜索框里面搜索: ...
- 运维笔记--ubuntu rm删除文件后 恢复
待补充 特别注意:umount分区,尝试恢复文件,文件夹(目录),全部文件 https://www.cnblogs.com/wangxiaoqiangs/p/5630288.html https:// ...
- 项目ITP(一) 二维码
前言 系列文章:[传送门] 上几周碌碌无为,不行啊不行啊.博客园,不知道你几时改版.老家了,我不会忘记你呢.呵呵,我也会在os,csdn更新的.每天一搏,不管有用没用. 正文 正文先有项目起步,项目中 ...
- Magicodes.NET框架之路——让Magicodes.NET帮你编写代码
时间总是过得很快,而我几乎没有时间来安安静静的写博客和完善文档.不过总算是框架在一直前进,而我的计划是在今年年底(公历)前,让此框架成熟稳定. 在很长一段时间里,我尝试了很多我之前没有接触的技术或者没 ...
- nginx部署django应用
Django部署方式有很多种,之前写过一篇部署在Apache上的博文:https://www.cnblogs.com/shenh/p/7552722.html .下文介绍的是通过Nginx来部署. N ...
- Tomcat8源码笔记(五)组件Container分析
Tomcat8源码笔记(四)Server和Service初始化 介绍过Tomcat中Service的初始化 最先初始化就是Container,而Container初始化过程是咋样的? 说到Contai ...
- JavaScript中常见的十五种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...