巧用ViewPager实现驾考宝典做题翻页效果

效果如下所示:

思路:

a.利用ViewPager自带的动画效果,略作修改,实现滑动覆盖翻页效果。

b.移动时加入阴影效果。

1.关键代码如下所示:

public class ReaderViewPager extends ViewPager { public ReaderViewPager(Context context) { this(context, null); } public ReaderViewPager(Context context, AttributeSet attrs) { super(context, attrs); setReadEffect(); setScrollerDuration(); } private void setScrollerDuration() { try { Field field = ViewPager.class.getDeclaredField("mScroller"); field.setAccessible(true); FixedSpeedScroller scroller = new FixedSpeedScroller(getContext(), new DecelerateInterpolator()); field.set(this, scroller); scroller.setmDuration(300); } catch (Exception e) { Log.e("@", "", e); } } public void setReadEffect() { 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 < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // Fade the page out. // view.setAlpha(1 - 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 // + (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(0); } } }); } }

2.阴影效果添加(其实阴影是一张图片,本来是要在ReadViewPager内部添加阴影效果,但是不显示,貌似被ReadViewPage自己遮住了,就用笨办法实现了^_^):

<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.zhangyipeng.anwerdemo.view.ReaderViewPager android:id="@+id/readerViewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--阴影--> <ImageView android:id="@+id/shadowView" android:layout_width="20dp" android:layout_height="match_parent" android:background="@mipmap/shadow_right"/> </FrameLayout>

3.阴影随翻页而移动效果实现

readerViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { shadowView.setTranslationX(readerViewPager.getWidth()-positionOffsetPixels); } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } });

4.OK,就是这么简单,快去做一个自己的驾考宝典吧 。。。

5.我自己写了一些简单的实现方法,有3个View的实现方式,还有其他使用开源控件实现的,这是地址,欢迎提意见哦

GitHub项目demo地址

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

时间: 2024-08-22 04:35:52

巧用ViewPager实现驾考宝典做题翻页效果的相关文章

程序员驾考宝典

开始 大学的时候就想着考驾照,但是由于时间原因+金钱原因,没有考.因此选择了工作之后再考.从今年(2017)4月2日到7月18日,历时107天(3个多月),成功拿到了驾照.本文主要是对我整个考驾照之路的记录与总结.希望也能帮助到大家. 另外,我是在北京考的驾照,所以下面所有的信息都是北京相关.驾校都是和海淀驾校(以下也简称海驾)相关. 目录 该文章主要的内容如下: 一. 如何选择驾校? 二. 报考准备材料以及报考流程 三. 科目一的学习与考试 四. 科目二的学习与考试 五. 科目三的学习与考试

驾考宝典使用指南

工具/原料 驾考宝典电脑版 驾考宝典手机版(Android.iPhone.Symbian) 步骤/方法 设置车型,选择对应题库. 首次启动驾考宝典,可设置车型,小车.客车.货车专属题库.驾考宝典会根据车型自动选择题库,多种练习模式全方位覆盖考题.         图形化菜单面板,最新版全国标准题库. 电脑常识 驾考宝典采用交管局最新公布的考试题库,聚合了通用标准题725道.客车专用57题.货车专用68题.闲暇之余,拿起手机看上几题,零散时间得到最大化利用.         顺序练习,答题模式智能

驾考宝典打不开怎么办?

  电脑版的话可以查看一下下载的驾考宝典是安装版还是绿色版,建议使用安装版哦~另外可能是因为电脑缺少"NET Framework2.0"直接下载即可. 手机版的话大家要注意软件格式哦,因为驾考宝典有很多版本         注:更多精彩教程请关注三联电脑教程栏目

2014驾考宝典电脑版如何下载

  其实2014驾考宝典电脑版下载安装方法很简单,只要进入系统天堂软件下载站搜索驾考宝典,点击进入驾考宝典2014电脑版官方pc版,如下图所示,进入页面点击下载即可. 驾考宝典2014电脑版特点: 1.题库最新 驾考宝典采用全国标准题库和各省市地区题库综合的方式并确保同步更新 2.多维练习 针对上班一族.学生等不同学车群体推出了章节.顺序.随机练习结合的方式 3.图文详解 采用图文并茂的形式,介绍交通标志.交警手势.事故图解加深对交通法规的理解 4.全真模拟考试 按照考纲中各章节所占比例自动组卷

驾考宝典2016怎么用

  安装驾考宝典2016,打开软件首先会出现选择考区,选择你所在的考区.   在选项卡中选择科目一,点击模拟考试就可以在驾考宝典2016感受科目一真实的考试感觉,只要平均在90分以上,通过是很有保证的.   可以在驾考宝典2016里面查看到错题统计,我的错题,排行榜,考试记录,也可以进行章节练习进行知识扩展,交通标志,交通法规,过关秘籍等等.

Android自定义View实现仿驾考宝典显示分数效果(收藏)

小编最近发现,一些炫酷的view效果,通过需要自定义view和属性动画结合在一起,才能更容易的实现. 实现的效果图如下: 所用的知识有: (1)自定义View中的 path ,主要用来绘制指示块. (2)属性动画-ValueAnimator,并设置属性动画的监听器. (3)根据属性动画是否结束的标志,决定是否绘制分数对应的描述文本内容. 实现步骤: 继承自View,在构造函数中获取自定义属性和初始化操作(初始化画笔) private void obtainAttrs(Context contex

android 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 ReadV

一步步实现Viewpager卡片翻页效果_Android

这个CardStackViewpager的灵感来自Github上面的 FlippableStackView开源项目,而我想实现的效果方向上恰好与FlippableStackView相反,并且细节上也有些区别,详见下面的效果对比图: FlippableStackView运行效果图: CardStackViewpager运行效果图: 这里讲一个小插曲,自己尝试实现CardStackViewpager的过程中,由于一开始对PageTransformer的onTransform(View page, f

轻松实现驾考宝典等驾考项目答题界面

开源这个项目主要是想帮助更多想做驾考类项目的同志们参谋参谋,亦或是想做答题项目的,本项目实现了单选和复选的的混合,该项目配合的数据源是来自阿凡达,之前做驾考的时候,记得聚合数据也有的,后来关掉了,所以就用了阿凡达的,该接口每天可以请求1000次,感觉不算太多,但足够使用,如果运用到项目的话,安装应用的时候将所有题目缓存到数据库,以后取数据的时候就去数据库里面取数据,这样就方便了多次请求这个api,毕竟物以稀为贵,哈哈. 代码我已经封装成库文件了,数据源也倒进了asset文件夹里面,希望能帮助到大