Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 목적 중심 리더십
- 면접
- 베드테이블
- 북한살둘레길
- 지지않는다는말
- 한달어스
- 한단어의힘
- 소프시스
- 소프시스 밤부 좌식 엑슬 테이블
- 베드트레이
- 목적중심리더십
- 테트리스
- 좌식테이블
- 자취필수템
- 함수형 프로그래밍
- 슬기로운 온라인 게임
- 아비투스
- 한달브런치북만들기
- 브런치작가되기
- 리얼하다
- 안드로이드
- T자형인재
- 프래그먼트
- 재택근무
- 끝말잇기
- 어떻게 나답게 살 것인가
- 캐치마인드
- 커스텀린트
- 1일1커밋
- 한달독서
Archives
- Today
- Total
정상에서 IT를 외치다
[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
반응형
'안드로이드' 카테고리의 다른 글
[Android, Custom Calendar] Custom Calendar 만들기 (2) | 2018.03.28 |
---|---|
[Android, Calendar] Calendar 분석 (0) | 2018.03.28 |
[Android, Collapsing Tool bar] Collapsing Tool bar 에서의 status bar (0) | 2018.03.27 |
[Android, Fullscreen] 풀스크린 모드 (5) | 2018.03.26 |
[Android, Realm] Realm Diary (0) | 2018.01.31 |
Comments