ViewPager.PageTransformer 带阴影

Question

我在 ViewPager 中有一堆片段，自定义的 PageTransformer 定义如下。

mPager.setPageTransformer(true, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(View page, float position) {
        page.setTranslationX(page.getWidth() * -position);
    }
});

如何为离开的片段画阴影？长话短说，我正在寻找 Play Book 中的东西，不需要卷曲效果，只是堆栈顶部元素的阴影，最好是 API 18 compliant

谢谢

Answer 1

我对 setPageMargin 表示怀疑，因为它仅在传入视图具有 alpha 透明度时才有效。我的意思是，边距似乎有错误的高度，它位于传入视图下方，但也许我找到了折衷方案

这是 activity 中用于保证金和自定义 PageTransformer

的代码

    int margin = getResources().getDisplayMetrics().widthPixels / 15;
    mPager = (ViewPager) findViewById(R.id.pager);

    mPager.setPageMargin(margin);
    mPager.setPageMarginDrawable(R.drawable.shadow);
    mPager.setPageTransformer(true, new StackTransformer());

其中可绘制对象定义为

    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle" >
        <gradient
            android:angle="360"
            android:endColor="#00000000"
            android:startColor="#aa000000"
            android:type="linear" />
    </shape>

最后是 PageTransformer 的 transformPage 方法，我在其中调整位置和 alpha 以找到可接受的效果

@Override
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    if (position < -1) {
        view.setAlpha(0);
    } else if (position <= 0) { 
        view.setAlpha(1);
        view.setTranslationX(0);
    } else if (position <= 1) { 
        view.setAlpha(1-position/2); // divide by 2 is the trick
        view.setTranslationX(pageWidth * -position);
    } else { 
        view.setAlpha(0);
    }
}

最终效果就是您在上面的 gif 中看到的效果，但我敢肯定，有更好的方法可以实现这种效果

ViewPager.PageTransformer 带阴影

ViewPager.PageTransformer with a drop shadow

java

android

android-viewpager

shadow

android-pagetransformer