8

我正在尝试在我的应用程序中实现视差效果。我有一个FragmentActivity实现OnPageChangeListener接口并监听我的ViewPager滚动事件的接口。

为了在我的 XML 中实现这种效果,我LinearLayout在所有其他视图的后面都有一个背景,我在onPageScrolled回调中移动它。如果我只是滑动就可以了,效果会起作用并且背景位置会发生变化。但是当我的手指离开屏幕时,背景会在他原来的位置重新绘制(即使我在新页面中)。我不明白为什么会这样。这是我的代码FragmentActivity

public class MainActivity extends FragmentActivity implements OnPageChangeListener {

// DEFINE THE PAGEADAPTER
private ViewPager viewPager;
private com.angtrim.ecomilano.PagerAdapter pagerAdapter;
private int oldPosition = 0;
private int offSet = 0;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // CREATE VIEWPAGER
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    pagerAdapter = new PagerAdapter(getApplicationContext(),getSupportFragmentManager());
    // SET THE ADAPTER
    viewPager.setAdapter(pagerAdapter);        
    // SET FIRST ITEM
    viewPager.setCurrentItem(0);   
    // SET CHANGE PAGE LISTENER
    viewPager.setOnPageChangeListener(this);        
}    

@Override
public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub      
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

    // RIGHT SWIPE
    if((oldPosition < arg2))
    {       
        offSet = (int)((arg2 - oldPosition)*0.5);               
        oldPosition = arg2;
    }
    // LEFT SWIPE
    else if( (oldPosition > arg2))
    {   
        offSet = (int) (-(oldPosition - arg2)*0.5);         
        oldPosition = arg2;
    }

    findViewById(R.id.backi).offsetLeftAndRight(offSet);        
}

@Override
public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub

}
}

谢谢你。

4

5 回答 5

9

我知道它有点旧,但看看https://github.com/xgc1986/ParallaxPagerLibrary

它不会覆盖 onDraw 方法,并且效果不仅适用于图像,它适用于各种视图

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

R.id.paraallaxContent 是你想要这个效果的View的id

除非其他解决方案,不需要任何具体结构即可工作,并且与布局无关

演示:YouTube

于 2014-04-25T20:37:21.367 回答
2

我知道这个问题很老了,我无法真正回答你的问题。但是,一个名叫 Matthieu 的人创建了一个 ViewPager 视差效果的优秀示例,可以在以下链接中找到。

https://github.com/MatthieuLJ/ViewPagerParallax

于 2013-09-19T19:13:54.967 回答
2

也许这个库可以帮助你:

https://github.com/garrapeta/ParallaxViewPager

于 2014-03-22T19:34:27.990 回答
2

这个库在 x 和 y 方向上是完全可定制的,并且包括 alpha 效果:

https://github.com/prolificinteractive/ParallaxPager

安装(从 v0.7 开始,检查 README 以获取更新):

  1. 使用 Gradle 添加为 Maven Central 依赖项

  2. 在布局 XML 中使用自定义ParallaxContainer而不是ViewPager

  3. 为每个页面创建一个布局 XML 文件(可以为每个移入/移出页面的对象单独设置 x/y/alpha 属性)

  4. 有一些复制/粘贴行要添加到onCreate您的活动中(前往 README 以获取确切的行)

视差星球动画

于 2014-05-13T00:02:57.580 回答
1

看看我创建的这个小库——它是一个 ViewPager 子类,它不需要额外的配置来实现视差效果。

于 2014-05-09T18:32:41.337 回答