Android ViewPager打造3D画廊

网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明:

This class was deprecated in API level 16.
This widget is no longer supported. Other horizontally scrolling widgets include HorizontalScrollView and ViewPager from the support library.(来自:https://developer.android.com/reference/android/widget/Gallery.html)

于是我就在想,既然如此,那就用ViewPager来写一个吧,于是就有了这篇博客!

进入正题:

要实现如下图的功能,需要以下几点:

  1.   使用ViewPager
  2. 设置PageTransformer
  3. 获取图片倒影

一、ViewPager的使用

ViewPager是来自android.support.v4的API

来自官方的介绍:

  Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.

  渣翻:ViewPager是一种允许用户左右翻动页面浏览数据的布局管理器,通过应用一个实现了PagerAdapter的实现类来生成展示页面。(翻译渣,有错请提醒,谢谢)

通过上面的解释可以知道,对于ViewPager的使用,和ListView类似,也是需要Adapter来管理每个ITEM的。

让我们来了解一下PagerAdapter的使用

要实现PagerAdapter,必须至少实现以下四个方法:

  (1)public int getCount()

  (2)public Object instantiateItem(ViewGroup container, int position)

  (3)public void destroyItem(ViewGroup container, int position, Object object)

  (4)public boolean isViewFromObject(View view, Object object)

 

方法解释: 

  第一个方法就不用说了,实现过BaseAdapter的童鞋应该知道的,就是用来放回当前List中的Page数量的。

 

  (2)public Object instantiateItem(ViewGroup container, int position)

  先从第二个方法说起,这个方法是负责向ViewGroup也就是ViewPager中添加新的页面,并返回一个继承自Object的key,这个key将会在第三个方法destroyItem和第四个方法isViewFromObject中作为参数调用。

  代码可以写成这样:

  

@Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView=imageViewList.get(position);
                container.addView(imageView,position);
                return imageView;
            }

  (3)public void destroyItem(ViewGroup container, int position, Object object)

  该方法负责从ViewGroup中移除对应position中的page

  代码:

 

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

  (4)public boolean isViewFromObject(View view, Object object)

  确定instantiateItem返回的特定key 对象是否与page View有关联。由于instantiateItem中可以以自身page为key返回,所以在这里就可以这样写:

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

ViewPager作为布局管理器,非常强大,也可以用来展示Fragment,当然adapter需要使用FragmentPagerAdapter或者FragmentStatePagerAdapter

二、设置PageTransformer

  PageTransformer是ViewPager的一个公共成员接口,用于设置当一个页面滑入和滑出的过度特效,当然,由于是通过属性动画来设置的,所以设置的pagetransformer在Android3.0以下会被忽略。

关于实现该接口,只需要实现一个方法即可:

  public void transformPage(View page, float position);


对于参数position,需要好好说明一下:

position的取值有如下说明:

position是指的是页面相对于中间页面的位置参数,根据位置不同,0的时候在中间最前面,1的时候页面完全在右边,-1的时候页面完全在左边。如下图所示:

关于该接口的更多知识可以看鸿洋大大的这篇博客:http://blog.csdn.net/lmj623565791/article/details/40411921/

那么要实现上面的效果要怎么做呢?

代码如下:

MyTransformation.java

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);
        }
    }
}

然后,

viewPager.setPageTransformer(true,new MyTransformation());

效果如下:

诶,和前面给出的效果图不一样啊,为什么呢?一开始我也不明白,后来在网上查阅资料,找到了如下方法:

  (1)为解决不在ViewPager中间页面被剪掉的问题:

  需要在ViewPager和其父容器中设置clipChildren为false

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:layerType="software"
    android:background="@android:color/black"
    tools:context="com.example.evanzeng.viewpagertest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:layout_gravity="center"
        android:clipChildren="false"
        >
    </android.support.v4.view.ViewPager>
</LinearLayout>

  (2)为解决触摸滑动ViewPager左右两边的页面无反应的问题:

  需要为ViewPager的父容器设置OnTouchListener,将触摸事件传递给ViewPager

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

效果如下:

三、获取图片倒影

代码如下:

public class ImageUtil {
    public static Bitmap getReverseBitmapById(int resId, Context context){
        Bitmap sourceBitmap= BitmapFactory.decodeResource(context.getResources(),resId);
        Matrix matrix=new Matrix();
        matrix.setScale(1,-1);
        Bitmap inverseBitmap=Bitmap.createBitmap(sourceBitmap,0,sourceBitmap.getHeight()/2,sourceBitmap.getWidth(),sourceBitmap.getHeight()/3,matrix,false);
        Bitmap groupbBitmap=Bitmap.createBitmap(sourceBitmap.getWidth(),sourceBitmap.getHeight()+sourceBitmap.getHeight()/3+60,sourceBitmap.getConfig());
        Canvas gCanvas=new Canvas(groupbBitmap);
        gCanvas.drawBitmap(sourceBitmap,0,0,null);
        gCanvas.drawBitmap(inverseBitmap,0,sourceBitmap.getHeight()+50,null);
        Paint paint=new Paint();
        Shader.TileMode tileMode= Shader.TileMode.CLAMP;
        LinearGradient shader=new LinearGradient(0,sourceBitmap.getHeight()+50,0,
                groupbBitmap.getHeight(), Color.BLACK,Color.TRANSPARENT,tileMode);
        paint.setShader(shader);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        gCanvas.drawRect(0,sourceBitmap.getHeight()+50,sourceBitmap.getWidth(),groupbBitmap.getHeight(),paint);
        return groupbBitmap;
    }
}

参考自http://blog.csdn.net/lovoo/article/details/51591580

最终效果:

以上代码已上传自GITHUB,地址如下:https://github.com/liberty2015/3DViewPagerGallery

如果您觉得不错的话就点个赞收藏一下,谢谢!

时间: 2024-11-15 23:10:02

Android ViewPager打造3D画廊的相关文章

利用ViewPager实现3D画廊效果及其图片加载优化

前言 对于ViewPager,相信大家都已经很熟悉了,在各种切换场景比如Fragment切换.选项卡的切换或者顶部轮播图片等都可以用ViewPager去实现.那么本篇文章带来ViewPager的一种实现效果:3D画廊.直接上图来看: 从上面的图我们可以看出,整个页面分成三个部分,中间的是大图,正中地显示给用户:而两边的是侧图,而这两幅图片又有着角度的旋转,与大图看起来不在同一平面上,这就形成了3D效果.接着拖动页面,侧面的图慢慢移到中间,这个过程也是有着动画的,包括了图片的旋转.缩放和平移.在欣

android 自定义控件实现3D画廊效果

今天来实现一个3D画廊的效果,这个效果的难点在于计算旋转角度,当然里面会有好几个知识点要讲,针对Paint的2个方法,一个是setShader(),一个是setXfermode(),首先看下大概的效果, 大概是这种,这是我在网上随便找了一个类似的图片,因为我的效果还没写,没关系,这没啥影响,这个效果我准备分开写,然后后面合成起来,上面的效果可以分为如下几步 1:首先是怎么截取一张图片中的一部分 2:怎么把多张图片合成一张图片 3:怎么生成倒影效果, 4:怎么改变倒影中的图片透明度 5:最后一步是

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

Android自定义控件——3D画廊和图像矩阵

转载请注明出处:http://blog.csdn.net/allen315410/article/details/39932689 1.3D画廊的实现 我们知道android系统已经为我们提供好了一个展示图片的"容器"--Gallery,但是这个Gallery显示的效果是平面化的,动态效果不强.这里,我们动手做一个自定义的Gallery组件,实现图片的3D效果展示,想想应该不错吧,先看看效果图: 实现这个3D效果的Gallery该怎么做呢?首先,分析一下, 1,展示图片,系统自带Gal

Android ViewPager使用方法小结

android-support-v4.jar 是谷歌提供给我们的一个兼容低版本安卓设备的软件包,里面包囊了只有在 Android 3.0 以上可用的API.而 ViewPager 就是其中之一.利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 准备 在使用ViewPager之前,需要在 build.gradle 中加入如下语句: compile 'com.android.support:support-v4:25.3.0' compile 'com.github.hackware19

Android ViewPager用法小结

android-support-v4.jar 是谷歌提供给我们的一个兼容低版本号安卓设备的软件包.里面包囊了仅仅有在 Android 3.0 以上可用的API.而 ViewPager 就是当中之中的一个.利用它,我们能够做非常多事情,从最简单的导航,到页面菜单等等. 准备 在使用ViewPager之前,须要在 build.gradle 中加入例如以下语句: compile 'com.android.support:support-v4:25.3.0' compile 'com.github.ha

巧用ViewPager 打造不一样的广告轮播切换效果

一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item且能够添加一些炫酷的动画效果.我当时阅读这篇文章的时候,简单做了下记录,然后想了想,可以按照该思路做一个比较特殊轮播效果,如图: 其实看到这个大家肯定不陌生,对于ViewPager切换有个很出名的库叫JazzViewPager,没错,我又跑了下JazzyViewPager的例子,看看有什么动画效果可

Android——ViewPager+Fragment+ListView之间

Android--ViewPager+Fragment+ListView之间 <span style="font-size:18px;">package com.example.jreduch05; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.A

Android–ViewPager切换动画,PageTransformer

transformPage(View view, float position) view就是滑动中的那个view,position这里是float类型,是当前滑动状态的一个表示,比如当滑动到正全屏时,position是0,如果前一页和下一页基本各在屏幕占一半时,前一页的position是-0.5,后一页的posiotn是0.5(是-0.5还是0.5要看当前的view是前面那一页的view还是后面那一页的),所以根据position的值我们就可以自行设置需要的alpha,x/y信息,就是可以用s