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程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- ES6的Promise
推荐一下我觉得不错关于Promise的好文章,通俗易懂 说起ES6的Promise就要提及一下JQ的$.when()方法,两者基本相同 面试的时候经常会问Promise,如果同学们能在回答Promis ...
- 基于vue-cli3.0构建功能完善的移动端架子,主要功能包括
webpack 打包扩展 css:sass支持.normalize.css._mixin.scss._variables.scss vw.rem布局 跨域设置 eslint设置 cdn引入 路由设计. ...
- 手动实现一个虚拟DOM算法
发现一个好文:<深度剖析:如何实现一个 Virtual DOM 算法> 源码 文章写得非常详细,仔细看了一遍代码,加了一些注释.其实还有有一些地方看的不是很懂(毕竟我菜qaq 先码 有时间 ...
- CentOS7 安装中文输入法
CentOS7输入中文,打开终端,使用管理员权限 su 输入管理员密码,回车 输入 yum install ibus-libpinyin 回车,耐心等待安装完,然后重启系统 重启完后再进行前面的步骤 ...
- 【原】git常用命令笔记
平时要用一些命令老是去网上找还挺麻烦的,所以总结起来,还是写在了github上,博客园啥时候也支持一个markdown啊!! https://xianyulaodi.github.io/2017/03 ...
- eclipse team 没有svn
从资源库把项目导出来之后 右键点击项目 选择第二个 出现 选择SVN 出现你资源库的地址 finish 完成. 这时项目就会出现地址了 就有提交了
- tensorflow 1.12.0 gpu + python3.6.8 + win10 + GTX1060 + cuda9.0 + cudnn7.4 + vs2017)
在安装tensorflow-gpu时,也看过不少的博客,讲得乱七八糟的,也不能这样说,只是每个人安装的环境或需求不一样,因此没有找到一个适合自己的教程去安装tensorflow-gpu版本.当然,入手 ...
- Docker之使用Dockerfile创建定制化镜像(四)--技术流ken
前言 在之前的博客<Docker端口映射及创建镜像演示(二)--技术流ken>,演示了如何使用一个现有容器创建一个镜像,以及镜像在阿里云的上传和下载. 但是这样的镜像有很大的局限性,不能根 ...
- SpringCloud学习(一):微服务简介
一.前情概要 1.单体架构是什么 1).一个归档包包含了应用所有功能的应用程序, 我们通常称之为单体应用. 2).架构单体应用的架构风格, 我们称之为单体架构, 这是一种比较传统的架构风格. 2.单体 ...
- [JavaScript] promise概述
promise promise 是 es6 提出的一个异步解决方案,比传统回调事件的写法更加合理更加强大,主要还是优雅 promise 有 pending(等待中),fulfilled(已成功),re ...