정상에서 IT를 외치다

[Android, Parallax View Pager] Custom Parallax View Pager 본문

안드로이드

[Android, Parallax View Pager] Custom Parallax View Pager

Black-Jin 2018. 3. 27. 01:18
반응형




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

반응형
Comments