Android ViewPager实现3D画廊效果

上效果图,这个效果图应该图片的原因就很粗糙,砖友,放下砖,放过在下吧.

大家能看到左右俩个图都是有点斜度的,下面就实现这个UI效果吧

1.直接上布局

****.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:clipChildren="false"
    android:gravity="center"
    android:layerType="software">

    <android.support.v4.view.ViewPager
        android:id="@+id/gallery"
        android:layout_width="300dp"
        android:layout_height="500dp"/>
</LinearLayout>

android:clipChildren=”false”属性

android:clipChildren的意思：是否限制子View在其范围内，默认值为true。在这个例子中我们想要实现画廊效果，所以android:clipChildren
设置为false，而且还必须是在ViewPager的父布局设置，否则没有效果的。同时注意要实现图片中的效果，ViewPager的宽度是不能设为match_parent的，ViewPager宽度与卡片的宽度设置一致即可。

2.创建一个MyTransformation的类,在这直接把包给大家cp上了,为了防止大家导错包(看看我多么贴心)

这是个实现扁平切换，中间放大，两边模糊的动画

import android.graphics.Camera;
import android.support.v4.view.ViewPager;
import android.view.View;

public class MyTransformation implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;
    private static final float MAX_ROTATE = 30;
    private Camera camera = new Camera();

    @Override
    public void transformPage(View page, float position) {
        float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
        float rotate = 20 * Math.abs(position);
        if (position < -1) {

        } else if (position < 0) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(rotate);
        } else if (position >= 0 && position < 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(-rotate);
        } else if (position >= 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(-rotate);
        }
    }

}

3.在******Activity中添加

//设置viewpager的切换动画
viewPager.setOffscreenPageLimit(5);
viewPager.setPageTransformer(true, new MyTransformation());

加以前先findViewById

4.将父布局的touch事件传递给viewpager，解决触摸滑动ViewPager左右两边的页面无反应的问题

findViewById(R.id.activity_main).setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        return viewPager.dispatchTouchEvent(motionEvent);
    }
});

5.重点的适配器来了

class GalleryAdapter extends PagerAdapter {
    private int selectPos = 0;
    private List<View> viewList = new ArrayList<View>();
    Integer[] images = {
            R.drawable.zfb,
            R.drawable.add,
            R.drawable.weixin
    };

    public GalleryAdapter() {

    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.gallery_item, null);
        ImageView poster = (ImageView) view.findViewById(R.id.poster);
        poster.setImageResource(images[position]);
        // view.setImageBitmap(ImageUtil.getReverseBitmapById(images[i],Gallery.this));
        viewPager.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        viewPager.removeView((View) object);
    }
}

6. 3D画廊到这里就完成了,快运行自己的项目看看吧

上面的适配器代码还需要自己去创建一个适配器写哦 不要向我学习 emmmm

希望能对您有所帮助