Question

我正在实现一个ViewPager，它显示下一个和上一个项目，并使用ViewPager.PageTransformer动画页面过渡。它具有缩小和淡出效果。为了显示下一个和上一个，我使用负的PageMargin，在viewpager上填充和clipToPadding为false。这就是它的样子

这就是我想要的。问题是PageTransform使用左边缘作为参考，即当图像接触左边缘而不是当它在中心时它显示最大变焦。为了解决这个问题，我在代码中使用了一个偏移量，如下所示

viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            if (position < -1) {
                page.setAlpha(0);
            } else if (position <= 1) {
                float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setAlpha(scaleFactor);
            } else {
                page.setAlpha(0);
            }
        }
    });

当图像位于中心时，我记录了位置值并找到了偏移量。但是此偏移仅适用于xxhdpi设备。在xxxhdpi上，值为0.12068965f。此外，当我在ViewPager上更改填充时，偏移也会更改。此外，使用dpi进行下一次和上一次更改的预览大小。

问题

如何计算填充，边距和特别是偏移量，以保持不同dpis的一致行为？

代码

这是我添加viewpager及其填充

的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:clipToPadding="false"
        android:paddingLeft="40dp"
        android:paddingRight="40dp">

    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/swiper"
        android:text="Animate"
        android:layout_centerInParent="true"
        android:layout_below="@id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

这是viewpager初始化代码：

final ViewPager viewPager = ((ViewPager) findViewById(R.id.viewPager));
Resources r = getResources();
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120, r.getDisplayMetrics());
viewPager.setPageMargin((int) (-1 * px));
viewPager.setOffscreenPageLimit(5);

Answer 1

这就是我最终的结果：

public class ZoomFadeTransformer implements ViewPager.PageTransformer {

    private float offset = -1;
    private float paddingLeft;
    private float minScale;
    private float minAlpha;

    public ZoomFadeTransformer(float paddingLeft, float minScale, float minAlpha) {
        this.paddingLeft = paddingLeft;
        this.minAlpha = minAlpha;
        this.minScale = minScale;
    }

    @Override
    public void transformPage(View page, float position) {
        if (offset == -1) {
            offset = paddingLeft / page.getMeasuredWidth();
        }
        if (position < -1) {
            page.setAlpha(0);
        } else if (position <= 1) {
            float scaleFactor = Math.max(minScale, 1 - Math.abs(position - offset));
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            float alphaFactor = Math.max(minAlpha, 1 - Math.abs(position - offset));
            page.setAlpha(alphaFactor);
        } else {
            page.setAlpha(0);
        }
    }
}

我将其设为

viewPager.setPageTransformer(false, new ZoomFadeTransformer(viewPager.getPaddingLeft(), MIN_SCALE, MIN_ALPHA));

具有下一个和上一个预览和pagetransformer的居中View Pager

1 个答案: