巧用ViewPager实现驾考宝典做题翻页效果
程序员文章站
2023-12-12 23:44:40
效果如下所示:
思路:
a.利用viewpager自带的动画效果,略作修改,实现滑动覆盖翻页效果。
b.移动时加入阴影效果。
1.关键代码如下所示:...
效果如下所示:
思路:
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的实现方式,还有其他使用开源控件实现的,这是地址,欢迎提意见哦
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!