Android ViewPager实现3D画廊效果

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

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

1.直接上布局

****.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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.ViewPagerandroid: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();@Overridepublic 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() {@Overridepublic 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() {}@Overridepublic int getCount() {return images.length;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic 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;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {viewPager.removeView((View) object);}
}

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

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

希望能对您有所帮助

Android ViewPager实现3D画廊效果相关推荐

[原创]自定义ViewPager实现3D画廊效果
经常在群里看到有些开发者在提问:怎么实现3D画廊效果,没思路. 有人出谋划策,你重写onTouch,在里面去判断:或者你去重写滑动监听事件,滑动的时候去动态设置左右两边的图片的大小和缩放效果.可能你们 ...
Android开发学习之基于ViewPager实现Gallery画廊效果
通过我们前面的学习,我们知道ViewPager是可以做出近乎完美的滑动体验,回顾整个Android,我们发现Gallery具备同样的特点,于是我们大胆地猜想,Gallery是否和ViewPager之间 ...
android viewPage 打造3d画廊
之前学习时学习了ViewPager打造3d画廊,今天找出来把他贴上去,给需要的小伙伴用!废话不多说直接贴! 一.Activity /*** 3da 画廊*/ public class Main3Act ...
使用RecyclerView实现旋转3D画廊效果
3D旋转画廊效果实现有哪些方式? 1.Gallery实现(官方已不推荐使用). 2.RecyclerView通过自定义LayoutManager实现. 一.简介 RecyclerView是google ...
Android自带组件之Gallery 实现3D画廊效果
1: 首先我们要了解到这个该控件的常用属性: 如图: 2:通过该组件定义属于我们自己的组件 iphone 中的coverflow中图片切换是有旋转和缩放效果的,而自带的gallery中并没有实现.因此 ...
android画廊效果的轮播图,轮播图（3d画廊效果）
首先需要将轮播图的依赖导入 implementation 'com.github.xiaohaibin:XBanner:1.6.1' 接下来就是在项目目录下bulidgradle中导入(allproj ...
Android 简单的3D动画效果
在Android Api11之后,加入了属性动画,参加我的另一篇博文:Android Property Animation 属性动画也加入了一些View的属性和对应的操作方法: iv.setTran ...
ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果（一）
效果图: 大体上就是这个样子,可能不太清楚但是大家知道是什么效果就好啦~ (PS: 图中没有加高斯模糊图,后边我会加上) 下面来分析一下这个布局底层用一个ImageView 上层用一个定制的Vi ...
ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果（二）
今晚给之前的写的收个尾 http://blog.csdn.net/codenoodles/article/details/50992113 前边没有看的可以先看一下效果. 之前写的没有背景的模糊图片效 ...
android ViewPager 不带滑动效果切换item
其实这是很简单的,但是今晚脑袋晕乎乎的绕了一大圈,记录一下以警同类人. 只需要在setCurrentItem传参数时这么写:mViewPager.setCurrentItem(item序号,fal ...