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程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- Robot Framework - 1 - 测试用例与测试库
01- 关于测试库(Test libraries) Test libraries provide the actual testing capabilities to Robot Framework ...
- centos7进入单用户模式
当我们设置用户密码时,有可能会忘记,这时如何登陆呢,单用户模式就可以 首先我们进入开机界面,按e进行选择 会进入以下界面, 然后找到图中红线标注的该行,在行尾添加 init=/bin/sh 按住Ctr ...
- 使用eclipse创建maven+动态web的项目
windows7操作系统 提前安装java jdk1.8版本+apache-maven-3.3.3+wildfly-10.0.0.Final 1.新建maven项目,到other里面找一下 2.使用默 ...
- 解决SVN不显示绿色图标问题
今天是上班的第50天,发现项目上的svn绿色图标没有了,于是上网查了一下,然后很简单的就找到了解决办法: 修改注册表 Windows Explorer Shell支持Overlay Icon最多15个 ...
- (转)[Python 网络编程] makefile (三)
socket.makefile(mode ='r',buffering = None,*,encoding = None,errors = None,newline = None )返回一个与套接字相 ...
- NET Core 1.1中使用Jwt
NET Core里Jwt的生成倒是不麻烦,就是要踩完坑才知道正确的生成姿势…… Jwt的结构 jwt的结构是{Header}.{Playload}.{Signature}三截.其中Header和Pla ...
- 【原】以setTimeout来聊聊Event Loop
平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setT ...
- for循环输出空心菱形的形状【java】
使用for循环语句输出以下“空心菱形”效果: * * * * * * * * * * * * * * * * 建议优先参考笔者的另一篇文章:<for循环输出菱形的形状[java]> 代码: ...
- Win3内存管理之私有内存跟共享内存的申请与释放
Win3内存管理之私有内存跟共享内存的申请与释放 一丶内存简介私有内存申请 通过上一篇文章.我们理解了虚拟内存与物理内存的区别. 那么我们有API事专门申请虚拟内存与物理内存的. 有私有内存跟共享内存 ...
- JAVA课程设计——一个简单的教务人事管理系统
大三上学期期末总结,没错,上学期,写在下学期新学期开始,哈哈哈. 上学期学习了面向对象程序设计,课程设计的题目使用JAVA语言完成一个简单的教务人事管理系统,能够实现访问数据库的登录验证,分别按部门和 ...