[ ViewPager #5 ] Carousel Effect ViewPager ( Animation )

 

 

public class CarouselEffectTransformer implements ViewPager.PageTransformer {
    private int maxTranslateOffsetX;
    private ViewPager viewPager;

    public CarouselEffectTransformer(Context context) {
        this.maxTranslateOffsetX = dp2px(context, 180);
    }

    public void transformPage(View view, float position) {
        if (viewPager == null) {
            viewPager = (ViewPager) view.getParent();
        }

        int leftInScreen = view.getLeft() - viewPager.getScrollX();
        int centerXInViewPager = leftInScreen + view.getMeasuredWidth() / 2;
        int offsetX = centerXInViewPager - viewPager.getMeasuredWidth() / 2;
        float offsetRate = (float) offsetX * 0.16f / viewPager.getMeasuredWidth();
        float scaleFactor = 1 - Math.abs(offsetRate);

        if (scaleFactor > 0) {
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            view.setTranslationX(-maxTranslateOffsetX * offsetRate);
            //ViewCompat.setElevation(view, 0.0f);
        }
        ViewCompat.setElevation(view, scaleFactor);

    }

    /**
     * Dp to pixel conversion
     */
    private int dp2px(Context context, float dipValue) {
        float m = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * m + 0.5f);
    }

}

 

반응형

 

viewPager.setPadding(padding, 0, padding, 0); // ViewPager Child Item 기준으로 양쪽 패딩을 줌으로써 양쪽 이미지가 padding 에 따라 보여진다.
viewPager.setPageMargin((int) dpToPx(20));  // ViewPager Child Item 간의 Margin 값.
viewPager.setPageTransformer(false, new CarouselEffectTransformer(this)); // Set pageTransformer

 

Carousel Effect 는 ViewPager가 양쪽에 미리 보여지는 상태에서 해야 이쁘게 작동한드아 .. 

좋은 커스텀 코드를 얻음.

 

Sample Example Github