仿lofter标签效果 ViewPager实现画廊效果

目前网上关于画廊效果的实现都是采用gallery(已弃用)或作横向 GridView,或作是横向scrollview,这些方式在画廊item滑动的时候效果不是特别流畅,而且代码相对比较繁琐,需要在滑动的时候去处理item的放大缩小(达到突出中间item的效果),代码相对较为复杂。

lofter标签页使用了另一种思路来实现了这种效果,我觉得在流畅度,和代码的简洁程度上都完爆上述的实现方式,先不废话了。翠花,上效果图!!!

下面简单表述下实现思路
先上一张图(画的不好,请见谅哈)
仿lofter标签效果 ViewPager实现画廊效果_第1张图片
如图所示:
外面的黑色框我们表示一个手机屏幕,然后上边的部分就是我们要展示画廊的部分了
即viewpager、
从图中我们可以看出来,实现上图中的效果的原理就是让viewpager的item层叠,然后你就实现了画廊效果了,完!!!!

(开个玩笑)

我们现在要使item层叠,然后头脑里面浮现的立马就是设置一个负值的margin

首先我们假设viewpager宽度就是手机屏幕,要使得item层叠,所以我们的item的父布局应该是一个透明的background 不然后面的会盖在前面的,效果就出不来了。

vp.setPageMargin(-mScreenWidth / 2);
//必须设置,否则会出现后面的item没有被缩小的情况
vp.setOffscreenPageLimit(views.size());

上面的代码就是设置margin值
然后给viewpager一个transform动画

    vp.setPageTransformer(false, new ViewPager.PageTransformer() {

            @Override
            public void transformPage(View page, float position) {
                // TODO Auto-generated method stub
                if (Math.abs(position) == 1) {
                    position = 1;
                }
                final float normalizedposition = Math.abs(Math.abs(position) - 1);
                page.setScaleX(normalizedposition / 2 + 0.5f);
                page.setScaleY(normalizedposition / 2 + 0.5f);
            }
        });

在viewpager滑动的时候放大缩小item
布局


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#00000000"
    android:gravity="center"
    android:paddingLeft="80dp"
    android:paddingRight="80dp"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_item"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/i1"/>

LinearLayout>

记得item最外层布局设置透明背景,并且左右padding值
好了,到这里就结束了,是不是代码特别简洁,
demo已经上传了,象征性收资源分,需要的可以去下载。或者你直接就用上面的代码也可以
欢迎拍砖!!! demo下载

你可能感兴趣的:(android,View)