Parallax Effect in Android's ViewPager

问题

I'm trying to emulate a parallax effect when sliding through my fragments, I've read about beginFakeDrag and fakeDragBy but to be honest, I don't know even if it's the best approach to my problem.

Anyone has done something similar with the ViewPager or have a hint about how should I approach this?

Thank you

回答1:

This question is a bit old, but I found it when I was trying to do exactly that...

I implemented my own solution, basically extending ViewPager and overriding onDraw.

You can find all the code with a simple example here

回答2:

An easy way to do this without using a custom library is to implement ViewPager.PageTransformer

I created my layouts to use the same id for their background element. For my example all background images will use the id background

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/background"
    android:src="@drawable/img12"
    android:scaleType="fitXY"/>

Then when I go in to implement ViewPager.PageTransformer I can reference that image like so:

public class Transformer implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {
        if(position >= -1 && position <= 1){
            page.findViewById(R.id.background).setTranslationX(-position * page.getWidth() / 2);
        } else {
            page.setAlpha(1);
        }
    }
}

Finally, I assign my ViewPager.PageTransformer to my ViewPager like so.

ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageTransformer(false, new Transformer());

回答3:

I know that it's a bit old but take a look to that https://github.com/xgc1986/ParallaxPagerLibrary

It not overrides the onDraw method, and the effect not only with images, it works with every kind of view

mPager.setPageTransformer(false, new ParallaxTransformer(R.id.parallaxContent));

R.id.paraallaxContent is the id of the View you want to have this effect

unless the other solutions, don't need any any concrete structure to work, and also is layout independant

demo: youtube

回答4:

Maybe this library can help you:

https://github.com/garrapeta/ParallaxViewPager

回答5:

You can take a look at this :

https://github.com/luxsypher/ParallaxViewPager

you can apply a parallax effect on any element of your view and gave them all different speed

回答6:

This is a ViewPager subclass I wrote, pretty easy to use. You don't need to do anything different with it, just include the dependency and use it as a standard ViewPager. Available on GitHub.

回答7:

This library is fully customizable in x and y directions and includes alpha effects:

https://github.com/prolificinteractive/ParallaxPager

Installation (as of v0.7, check README for updates):

Add as a Maven Central dependency with Gradle
Use a ParallaxContainer in layout XML instead of ViewPager
Create a layout XML file for each page (the x/y/alpha attributes can be set separately for each object moving in/out of the page)
There are a few copy/paste lines to add to onCreate of your Activity

回答8:

Maybe this library could be useful: https://github.com/matrixxun/ProductTour ?

it uses "ViewPager.PageTransformer" for making things move differently inside.

来源：https://stackoverflow.com/questions/12424088/parallax-effect-in-androids-viewpager

标签

android

android-viewpager

parallax