12_2019November11_ViewPager显示前后项部分

DailyWorkSummary

一 需求

• ViewPager的每一项除了当前内容，还要显示上一页和下一页的部分内容
• 可以有选中放大效果
• 适用于轮播图

二 效果图

三 原理

• ViewPager的clipToPadding 和padding实现显示前后项部分内容
• PageTransformer 实现ViewPager的放大效果

四 核心代码

显示前后项：

       android:clipToPadding="false"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"

放大效果

public class FlipViewPager extends ViewPager implements ViewPager.PageTransformer{
    private float maxScale = 0.0f;
    private int mPageMargin;
    private boolean animationEnabled = true;
    private boolean fadeEnabled = false;
    private float fadeFactor = 0.5f;


    public FlipViewPager(Context context) {
        this(context, null);
    }

    public FlipViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        // clipping should be off on the pager for its children so that they can scale out of bounds.
        setClipChildren(false);
        setClipToPadding(false);
        // to avoid fade effect at the end of the page
        setOverScrollMode(2);
        setPageTransformer(false, this);
        setOffscreenPageLimit(3);
        mPageMargin = dp2px(context.getResources(), 40);
        setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
    }

    public int dp2px(Resources resource, int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resource.getDisplayMetrics());
    }

    public void setAnimationEnabled(boolean enable) {
        this.animationEnabled = enable;
    }

    public void setFadeEnabled(boolean fadeEnabled) {
        this.fadeEnabled = fadeEnabled;
    }

    public void setFadeFactor(float fadeFactor) {
        this.fadeFactor = fadeFactor;
    }

    @Override
    public void setPageMargin(int marginPixels) {
        mPageMargin = marginPixels;
        setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
    }

    @Override
    public void transformPage(View page, float position) {
        if (mPageMargin <= 0 || !animationEnabled) {
            return;
        }
        page.setPadding(mPageMargin / 3, mPageMargin / 3, mPageMargin / 3, mPageMargin / 3);

        if (maxScale == 0.0f && position > 0.0f && position < 1.0f) {
            maxScale = position;
        }
        position = position - maxScale;
        float absolutePosition = Math.abs(position);
        if (position <= -1.0f || position >= 1.0f) {
            if (fadeEnabled) {
                page.setAlpha(fadeFactor);
            }

        } else if (position == 0.0f) {
            page.setScaleX((1 + maxScale));
            page.setScaleY((1 + maxScale));
            page.setAlpha(1);
        } else {
            page.setScaleX(1 + maxScale * (1 - absolutePosition));
            page.setScaleY(1 + maxScale * (1 - absolutePosition));
            if (fadeEnabled) {
                page.setAlpha(Math.max(fadeFactor, 1 - absolutePosition));
            }
        }
    }
}

五 Demo

ShrinkViewpagerActivity