logo标签列表

安卓ViewPager中的视差效果

androidandroid-viewpagerparallax
14

我想在滑动我的碎片时模拟视差效果，我了解了 beginFakeDrag 和 fakeDragBy，但老实说，我不知道它是否是解决我的问题的最佳方法。

有人用 ViewPager 做过类似的事情吗？或者对我该如何解决这个问题有提示？

谢谢

8个回答
15

如果不使用自定义库，一种简单的方法是实现ViewPager.PageTransformer。

我创建了我的布局来使用相同的id作为它们的背景元素。对于我的示例，所有背景图像都将使用id background。

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

然后当我开始实现 ViewPager.PageTransformer 时，我可以这样引用那个图片：

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

最后，我将我的ViewPager.PageTransformer分配给我的ViewPager，就像这样。

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

这个问题有点老了，但当我试图做到这一点时，我还是找到了它...

我实现了自己的解决方案，基本上是扩展 ViewPager 并覆盖 onDraw。

你可以在这里 找到所有代码和简单示例。

嗨，我要怎么做才能在ViewPager中实现多个视差效果？比如2或3个？ - Tsunaze
6

我知道这有点老了，但是看一下这个https://github.com/xgc1986/ParallaxPagerLibrary

它不会覆盖onDraw方法，并且该效果不仅适用于图像，还适用于各种类型的视图。

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

R.id.paraallaxContent 是你想要添加该效果的视图的ID。

与其他解决方案不同，它不需要任何具体的结构来工作，且与布局无关。

演示：youtube

2

这个库在x和y方向上是完全可定制的，包括透明度效果:

https://github.com/prolificinteractive/ParallaxPager

安装（截至v0.7版本，查看README获取更新）：

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

  2. 在布局XML中使用ParallaxContainer代替ViewPager

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

  4. 在您的Activity的onCreate中添加一些复制/粘贴行

视差星球动画

我实现了这个库，以下是我的代码： parallaxContainer.setupChildren(getLayoutInflater(), R.layout.parallax_view_1, R.layout.parallax_view_2, R.layout.parallax_view_3); 但是它只正确显示最后一个视图。第一个视图是空的，第二个视图实际上是第三个视图的一半，而最后一个视图则如预期一样可见。问题出在哪里？为什么它不能独立地加载所有 3 个视图？ - rosu alin
1
@rosualin 我的第一个建议是检查布局XML中使用的自定义属性。设置过程的这一步可能会有所帮助。根元素是否添加了xmlns:app行？每个布局中视图的x_in等值是什么？感谢您的评论，希望我们能解决这个问题。 - matt---
问题在于它是相对布局而不是线性布局，将其改为线性布局后就可以了。我在线性布局中放置了一些相对布局，也遇到了麻烦。但是我强制所有项目都有一个x_in，x_out（x，y，a无所谓），然后它就可以工作了。显然，即使您不想进行翻译，您也需要调用此函数，因此我只需使用值0调用它们，现在一切都很好，非常感谢！ - rosu alin
2
这是我编写的一个ViewPager子类，非常容易使用。您无需进行任何不同的操作，只需包含依赖项并将其用作标准ViewPager即可。可在GitHub上获取。
2
请问您能否说明如何在gradle文件中添加此内容？ - Anooj Krishnan G
2
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接