[안드로이드 Android] ViewPager 애니메이션(Animation)-setPageTransformer()

ViewPager는

사용자가 마치 Page를 넘기는 듯한 효과를 보여주는 앱입니다.

다만

그냥 옆으로 스르륵 미끄러지는 것은 다소 밋밋합니다.

그래서 ViewPager의 Page를 넘길때 마다 약간의 애니메이션을

적용하여 보다 입체적으로 보이도록 해보겠습니다.

아래 결과를 보시면 이전 ViewPager와의 차이를 극명하게 보실 수 있을 겁니다.

좌우로 Page를 넘기는 모습입니다.

  

  

  

좀 더 넘어가는 모습이 입체적이죠?

넘어가거나 들어오는 page View에

크기(scale), 투명도(alpha), 회전(rotate)를 주어서 효과를 만들었습니다.

방법은 간단한데

각 애니메이션의 값을 이해하는 것은 다소 수학적(?)인

계산이 요구됩니다.

일단 방법은 ViewPager에 setPageTransformer()메소드를 설정해서

Page의 변화순간순간 애니메이션값을 적용하여 변화를 주는 방식입니다.

다른 부분은 이전 포스트( ViewPager ) 를 참고하시고

추가 된 부분만 굵은 글씨로 표시했습니다.

메인 액티비티 소스코드만 변경하면 됩니다.

MainActivity.java

public class MainActivity extends Activity { ViewPager pager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pager= (ViewPager)findViewById(R.id.pager); //ViewPager에 설정할 Adapter 객체 생성 //ListView에서 사용하는 Adapter와 같은 역할. //다만. ViewPager로 스크롤 될 수 있도록 되어 있다는 것이 다름 //PagerAdapter를 상속받은 CustomAdapter 객체 생성 //CustomAdapter에게 LayoutInflater 객체 전달 CustomAdapter adapter= new CustomAdapter(getLayoutInflater()); //ViewPager에 Adapter 설정 pager.setAdapter(adapter); //Pager가 Page를 변경할 때 특정 작업을 수행하고 싶을 때 PageTransformer 설정 //여기서는 ViewPager가 Page를 변경할 때 애니메이션이 되도록 설정 pager.setPageTransformer(false, new PageTransformer() { //현재 Page의 위치가 조금이라도 바뀔때마다 호출되는 메소드 //첫번째 파라미터 : 현재 존재하는 View 객체들 중에서 위치가 변경되고 있는 View들 //두번째 파라미터 : 각 View 들의 상대적 위치( 0.0 ~ 1.0 : 화면 하나의 백분율) //           1.현재 보여지는 Page의 위치가 0.0 //           Page가 왼쪽으로 이동하면 값이 -됨. (완전 왼쪽으로 빠지면 -1.0) //           Page가 오른쪽으로 이동하면 값이 +됨. (완전 오른쪽으로 빠지면 1.0) //주의할 것은 현재 Page가 이동하면 동시에 옆에 있는 Page(View)도 이동함. //첫번째와 마지막 Page 일때는 총 2개의 View가 메모리에 만들어져 잇음. //나머지 Page가 보여질 때는 앞뒤로 2개의 View가 메모리에 만들어져 총 3개의 View가 instance 되어 있음. //ViewPager 한번에 1장의 Page를 보여준다면 최대 View는 3개까지만 만들어지며 //나머지는 메모리에서 삭제됨.-리소스관리 차원. @Override public void transformPage(View page, float position) { // TODO Auto-generated method stub //position 값이 왼쪽, 오른쪽 이동방향에 따라 음수와 양수가 나오므로 절대값 Math.abs()으로 계산 //position의 변동폭이 (-2.0 ~ +2.0) 사이이기에 부호 상관없이 (0.0~1.0)으로 변경폭 조절 //주석으로 수학적 연산을 설명하기에는 한계가 있으니 코드를 보고 잘 생각해 보시기 바랍니다. float normalizedposition = Math.abs( 1 - Math.abs(position) ); page.setAlpha(normalizedposition);  //View의 투명도 조절 page.setScaleX(normalizedposition/2 + 0.5f); //View의 x축 크기조절 page.setScaleY(normalizedposition/2 + 0.5f); //View의 y축 크기조절 page.setRotationY(position * 80);   //View의 Y축(세로축) 회전 각도   } }); } //onClick속성이 지정된 View를 클릭했을때 자동으로 호출되는 메소드 public void mOnClick(View v){ int position; switch( v.getId() ){ case R.id.btn_previous://이전버튼 클릭 position=pager.getCurrentItem();//현재 보여지는 아이템의 위치를 리턴 //현재 위치(position)에서 -1 을 해서 이전 position으로 변경 //이전 Item으로 현재의 아이템 변경 설정(가장 처음이면 더이상 이동하지 않음) //첫번째 파라미터: 설정할 현재 위치 //두번째 파라미터: 변경할 때 부드럽게 이동하는가? false면 팍팍 바뀜 pager.setCurrentItem(position-1,true); break; case R.id.btn_next://다음버튼 클릭 position=pager.getCurrentItem();//현재 보여지는 아이템의 위치를 리턴 //현재 위치(position)에서 +1 을 해서 다음 position으로 변경 //다음 Item으로 현재의 아이템 변경 설정(가장 마지막이면 더이상 이동하지 않음) //첫번째 파라미터: 설정할 현재 위치 //두번째 파라미터: 변경할 때 부드럽게 이동하는가? false면 팍팍 바뀜 pager.setCurrentItem(position+1,true); break; } } }

다소 수학적 연산이 요구되지만

잘 생각해보시면 이해가 가능하실 겁니다.

적용값을 조절해 보시면 여러분만의 애니메이션 모양을

만들 수 있습니다.