带投影的ViewPager.PageTransformer

时间:2016-10-27 13:11:15

标签: java android android-viewpager shadow android-pagetransformer

我在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兼容

谢谢

1 个答案:

答案 0 :(得分:0)

我对setPageMargin有疑问,因为只有当传入视图具有Alpha透明度时它才有效。我的意思是,似乎边距有一个错误的高度,它位于传入视图之下,但也许我已经找到了妥协

enter image description here

这是保证金和自定义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());

其中drawable定义为

    <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中看到的,但是我确信那里有更好的方法来实现这种效果