公司项目中有如下效果的需求
我在网上找了好多文章,终于找到一篇实现的效果和这个效果一样的,但是代码的篇幅同样不短,也没有去看具体的代码,只是copy过来用。现在我用上一篇介绍的知识点同样可以实现这个效果,而且理解起来比较简单,代码篇幅小,效果如下
我只是实现了主要的效果,具体细节的地方没有做处理,比如无限轮播等地方,我只是提供一种思路,由需要的伙伴自己处理一下就好,也是比较容易的。全篇幅的代码我在上一篇已经贴出来了,这里我只贴一下核心的代码和注释
CoverFlowViewPager.java的代码如下
/** * 设置显示的数据,进行一层封装 * @param lists */ public void setViewList(List<View> lists){ if(lists==null){ return; } mViewList.clear(); for(View view:lists){ FrameLayout layout = new FrameLayout(getContext()); //设置缩放的倍数和透明度的倍数 layout.setScaleX(0.83f); layout.setScaleY(0.83f); layout.setAlpha(0.5f); //这里设置位移,实现中间的pager盖住两边pager的效果 layout.setTranslationX(mAdapter.dp2px(-60)); layout.addView(view); mViewList.add(layout); } // 刷新数据 mAdapter.notifyDataSetChanged(); mViewList.get(0).bringToFront(); }
CoverFlowAdapter.java的代码如下
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // 该方法回调ViewPager 的滑动偏移量 if (mViewList.size() > 0 && position < mViewList.size()) { //这里是中间pager所实现的效果,根据positionOffset进行缩放,位移,透明度动画的设置 mViewList.get(position).setScaleX(1 - positionOffset * 0.17f); mViewList.get(position).setScaleY(1 - positionOffset * 0.17f); mViewList.get(position).setAlpha(1 - positionOffset * 0.5f); mViewList.get(position).setTranslationX(dp2px(60) * positionOffset); // position+1 为即将显示的页面,越来越大 if (position < mViewList.size() - 1) { //这里是两边pager所实现的效果 mViewList.get(position + 1).setScaleX(0.83f + positionOffset * 0.17f); mViewList.get(position + 1).setScaleY(0.83f + positionOffset * 0.17f); mViewList.get(position + 1).setAlpha(0.5f + positionOffset * 0.5f); mViewList.get(position + 1).setTranslationX(dp2px(60) * (positionOffset - 1)); //下面的代码比较重要,如果不加如下代码,最上面的pager有时候并不是中间的pager,根据positionOffset进行左右滑动的判定,来决定那个pager此时应该在最上面 //bringToFront就是view在最上面的方法 if(positionOffset>=mPositionOffset) { if (positionOffset >= 0.7f) { mViewList.get(position + 1).bringToFront(); }else if(positionOffset==0&&position==0){ mViewList.get(position).bringToFront(); } }else{ if(positionOffset<=0.6f){ mViewList.get(position).bringToFront(); } } //这里的代码可加可不加,这里是从中间数第三个pager的动画效果,如果屏幕只显示三个页,可以不设置,如果是五个页可以设置,具体效果可以自己调试 if (position < mViewList.size() - 2) { mViewList.get(position + 2).setScaleX(0.66f + positionOffset * 0.17f); mViewList.get(position + 2).setScaleY(0.66f + positionOffset * 0.17f); mViewList.get(position + 2).setTranslationX(dp2px(30) * (positionOffset - 1)); } } } mPositionOffset=positionOffset; }
mPositionOffset用来记录每次滑动的postionOffset,用来和下次的positionOffset作比较,mPositionOffset大说明右滑动,反之左滑动。关于为什么要做左右滑动的判断,注释中已作说明。
如有疑问可以加我QQ:954831816或留言