[Android, Parallax View Pager] Custom Parallax View Pager

Parallax view pager 를 사용하여 이미지의 scale 에 변화를 주어 위와 같이 

이미지가 커지고 작아지는 효과를 주었습니다.

1. ViewPager.PageTransformer 를 인터페이스로 받는 Class 를 생성해 준다.

public class ParallaxPageTransformer2 implements ViewPager.PageTransformer {

    private List<ParallaxPageTransformer2.ParallaxTransformInformation> mViewsToParallax
            = new ArrayList<>();

    public ParallaxPageTransformer2 addViewToParallaxTest(
            @NotNull ParallaxPageTransformer2.ParallaxTransformInformation viewInfo) {
        if (mViewsToParallax != null) {
            mViewsToParallax.add(viewInfo);
        }
        return this;
    }

    @Override
    public void transformPage(View view, float position) {

        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();
        //Dlog.d("pageWidth : " + pageWidth + " , pageHeight : " + pageHeight);

        if(position < -1) {
            // This page is way off-screen to the left
            view.setAlpha(1);

        } else if(position <= 1) {

            for (ParallaxPageTransformer2.ParallaxTransformInformation parallaxTransformInformation : mViewsToParallax) {
                applyParallaxEffectTest(view, position, parallaxTransformInformation, position > 0);
            }

        } else {
            // This page is way off-screen to the right
            view.setAlpha(1);

        }
    }

    private void applyParallaxEffectTest(View view, float position,
                                         ParallaxPageTransformer2.ParallaxTransformInformation information, boolean isEnter) {

        if (information.isValid() && view.findViewById(information.resource) != null) {

            if (isEnter && !information.isEnterDefault()) {

                // 다음 화면
                // position 1 -> 0 으로 바뀜
                // 0.9 0.8 0.7 0.6 ....
                float temp = 1 + (position / 5);

                if(temp > 1.1) {

                    float temp2 = (float) (2.2 - temp);

                    view.findViewById(information.resource).setScaleX(temp2);
                    view.findViewById(information.resource).setScaleY(temp2);
                } else {
                    view.findViewById(information.resource).setScaleX(temp);
                    view.findViewById(information.resource).setScaleY(temp);
                }


            } else if (!isEnter && !information.isExitDefault()) {

                // 현 화면
                // position -0 -> -1
                // -0.0 -0.1 -0.2 -0.3 ....
                float temp = 1 - (position / 5);

                if(temp > 1.1) {

                    float temp2 = (float) (2.2 - temp);

                    view.findViewById(information.resource).setScaleX(temp2);
                    view.findViewById(information.resource).setScaleY(temp2);
                } else {
                    view.findViewById(information.resource).setScaleX(temp);
                    view.findViewById(information.resource).setScaleY(temp);

                }

            }

        }
    }

    public static class ParallaxTransformInformation {

        public static final float PARALLAX_EFFECT_DEFAULT = -101.1986f;

        int resource = -1;
        float parallaxEnterEffect = 1f;
        float parallaxExitEffect = 1f;

        public ParallaxTransformInformation(int resource, float parallaxEnterEffect,
                                            float parallaxExitEffect) {
            this.resource = resource;
            this.parallaxEnterEffect = parallaxEnterEffect;
            this.parallaxExitEffect = parallaxExitEffect;
        }

        public boolean isValid() {
            return parallaxEnterEffect != 0 && parallaxExitEffect != 0 && resource != -1;
        }

        public boolean isEnterDefault() {
            return parallaxEnterEffect == PARALLAX_EFFECT_DEFAULT;
        }

        public boolean isExitDefault() {
            return parallaxExitEffect == PARALLAX_EFFECT_DEFAULT;
        }
    }

}

2. View Pager 의 setPageTransformer 함수를 사용하여 뷰의 움직임에 따른 시차를 준다.

val myPageTransformer = ParallaxPageTransformer2()
        .addViewToParallaxTest(ParallaxPageTransformer2.ParallaxTransformInformation(R.id.ivItemMoviePage, 2f, 2f))

vpActivityMain2.setPageTransformer(true, myPageTransformer)

참고 링크

https://medium.com/@BashaChris/the-android-viewpager-has-become-a-fairly-popular-component-among-android-apps-its-simple-6bca403b16d4