ViewPager PageTransformer

출처 - http://www.kmshack.kr/2014/01/viewpager-pagetransformer/

 

 

ViewPager의 PageTransformer 인터페이스를 이용하면 페이지 전환시 애니메이션을 다양하게 만들 수 있다. 대표적으로 구글의 플레이뮤직앱을 보면 트렉을 넘기는 경우 일반적으로 좌/우페이지 애니메이션이 아니라 아래에서 위쪽으로 올라오는 애니메이션을 볼 수있다. 

구현 방법은 PageTransformer를 implement해서 transformPage(View view, int position)를 구현 해서 ViewPager의 setPageTransformer (boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) 메서드를 이용해서 설정하면 된다. 

ViewPager pager = (ViewPager) findViewById(R.id.pager);
...
pager.setPageTransformer(true, new DepthPageTransformer());

public class DepthPageTransformer implements ViewPager.PageTransformer {

    public void transformPage(View view, float position) {
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page

        } else if (position <= 1) { // (0,1]
            // Fade the page out.

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.

        }
    }
}

 

view는 현재 화면에 보여지고 있는 View가 들어 오게 되며, postion은 -1~1사이의 값이 들어 온다. -1~0의 값이 들어 오는 경우는 페이지가 없어지고 있을때(왼쪽), 0~1의 값이 들어 오는 경우에는 페이지가 보여지고 있을때(오른쪽)이다. 

예를 들어 1페이지에서 2페이지로 전환 할때 1페이지는 0->-1값으로 수치가 줄어들고, 2페이지는 0->1로 수치가 늘어난다. 이렇기 때문에 4개의 경우로 분할 해서 작업을 하면된다. 

 

• 페이지가 완전히 왼쪽으로 이동된 경우 position < -1
• 페이지가 왼쪽으로 이동되고 있는 경우 position <= 0
• 페이지가 새롭게 나타나고 있는 경우 position <= 1
• 나머지 

이렇게 분할 해서 상황에 따라 View의 alpha, translate등의 효과를 주어 애니메이션을 생성 할 수 있다.