한 걸음 한 걸음 Viewpager 카드 페이지 넘 기 효과 실현

이 CardStackViewpager 의 영감 은 Github 위의 Flippable StackView 오픈 소스 프로젝트 에서 나 왔 습 니 다.제 가 실현 하고 싶 은 효과 방향 은 Flippable StackView 와 반대 되 고 디 테 일 한 부분 도 차이 가 있 습 니 다.상세 한 것 은 아래 의 효과 대비 도 를 참조 하 십시오.
Flippable StackView 실행 효과 도:

CardStackViewpager 실행 효과 도:

여기 서 에 피 소 드 를 말 하 는데 자신 이 CardStackView pager 를 실현 하려 고 시도 하 는 과정 에서 처음에 PageTransformer 의 onTransform(View page,float position)에 대해 곤 혹 스 러 웠 기 때문에 저 는 초등학교 같은 영어 로 Flippable StackView 개발 자 에 게 메 일 을 썼 습 니 다.어색 한 것 은 지금까지 메 일 을 답장 하지 않 았 습 니 다.
본론 으로 돌아 가면 CardStackViewpager 의 실현 방향 을 구체 적 으로 말씀 드 리 겠 습 니 다.사실은 전체 핵심 은 아래 코드 에 있 습 니 다.아래 코드 를 이해 하면 자신의 PageTransformer 를 사용자 정의 하여 원 하 는 Viewpager 효 과 를 실현 할 수 있 습 니 다.
핵심 Vertical StackTransformer 의 onTransform 방법 최종 판

 @Override
 protected void onTransform(View page, float position) {
  if (position <= 0.0f) {
   page.setAlpha(1.0f);
   Log.e("onTransform", "position <= 0.0f ==>" + position);
   page.setTranslationY(0f);
   //           ，              
   page.setClickable(true);
  } else if (position <= 3.0f) {
   Log.e("onTransform", "position <= 3.0f ==>" + position);
   float scale = (float) (page.getWidth() - ScreenUtils.dp2px(context, spaceBetweenFirAndSecWith * position)) / (float) (page.getWidth());
   //          
   page.setAlpha(1.0f);
   //           ，              
   page.setClickable(false);
   page.setPivotX(page.getWidth() / 2f);
   page.setPivotY(page.getHeight() / 2f);
   page.setScaleX(scale);
   page.setScaleY(scale);
   page.setTranslationY(-page.getHeight() * position + (page.getHeight() * 0.5f) * (1 - scale) + ScreenUtils.dp2px(context, spaceBetweenFirAndSecHeight) * position);
  }
 }

위의 코드 를 분석 하기 전에 우 리 는 다음 과 같은 몇 가지 지식 준 비 를 해 야 한다.
 1.Viewpager 의 setPageTransformer(boolean reverseDrawingOrder,Viewpager.PageTransformer transformer)방법의 첫 번 째 매개 변 수 는 Viewpager 에 추 가 된 뷰 대상 이 정렬 되 었 는 지 거꾸로 되 었 는 지 제어 하 는 데 사 용 됩 니 다.여기 서 우리 가 원 하 는 효 과 를 실현 하기 위해 서 는 레이아웃 에 추 가 된 첫 번 째 View 를 첫 번 째 전시 로 보 여 줘 야 하기 때문에 true 에 들 어 갑 니 다.
 2.Viewpager 의 setOffscreenPageLimit(int limit)방법 은 캐 시 뷰 가 얼마나 있 는 지 설정 합 니 다.이것 은 우리 의 카드 중첩 전시 효 과 를 결정 합 니 다.
지금 우 리 는 위의 onTransform(View page,float position)방법 을 계속 보 았 다.이 방법 은 매우 교묘 하 게 설계 되 었 다.처음에 내 가 탐색 할 때 인쇄 로 그 를 통 해 이 방법 이 어떻게 집행 되 는 지 판단 할 때 이 position 의 값 이 불규칙 해 보 였 다.나중에 나 는 예전 에 수학 에서 정 리 를 추리 할 때의 방법 을 생각 했다.특수 한 상황 에서 착안 하여다른 상황 을 조금 더 분석 한 후에 위의 코드 를 한 걸음 한 걸음 실현 한다.
첫 번 째,응용 프로그램 이 초기 화 되 었 을 때의 position 분석
이때 onTransform(View page,float position)방법 은 다음 과 같 습 니 다.

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform","position ==>"+position);
  //      y     ，              
  page.setTranslationY(-page.getHeight() * position);
 }

대응 로 그 는 다음 과 같 습 니 다:

이 로그 에 따 르 면 제 가 현재 설정 한 set OffscreenPageLimit(int limit)값 이 4 이기 때문에 position 가 위의 몇 가지 상황 이 있 는 것 을 볼 수 있 습 니 다.분명 한 것 은 모든 position 가 카드 에 대응 하 는 것 입 니 다.이때 인터페이스의 효 과 는 그림 과 같 습 니 다.

지금 추측 해 보면 2,3,4,5 번 카드 는 1 번 카드 아래 에 있 습 니 다.지금 우리 의 추측 을 증명 할 방법 을 생각해 보 세 요.onTransform(View page,float position)방법 을 다음 과 같이 바 꾸 세 요.

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform","position ==>"+position);
  //       
  page.setAlpha(0.5f);
  //      
  page.setPivotX(page.getWidth() / 2f);
  page.setPivotY(page.getHeight() / 2f);
  //                         0.9f
  page.setScaleX((float) Math.pow(0.9f,position));
  page.setScaleY((float) Math.pow(0.9f,position));
  //      y     ，              
  page.setTranslationY(-page.getHeight() * position);
 }

운행 이 시 작 된 후에 우리 의 생각 을 실증 했다.

두 번 째 단 계 는 카드 중첩 의 최종 효 과 를 실현 한다.
위의 사진 효 과 를 분석 한 결과 두 번 째 카드 를 아래로 이동 한 후에 한 카드 가 중첩 되 는 초보적인 효 과 를 형성 할 수 있다.아래 와 같이 변 한다.

다른 카드 는 이치 가 같 습 니 다.그러면 이 아래로 이동 하 는 값 을 어떻게 실현 합 니까?이 값 은 어떻게 표현 식 으로 표현 합 니까?먼저 아래 의 A,B,C 절차 의 분석 도 를 보 세 요.

두 장의 카드 를 사이 에 두 고 있 는 오프셋 은 다음 과 같 습 니 다.(H2-H1)+d1 입 니 다.onTransform(View page,float position)방법 은 다음 과 같 습 니 다.

@Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform", "position ==>" + position);
  page.setAlpha(0.5f);
  page.setPivotX(page.getWidth() / 2f);
  page.setPivotY(page.getHeight() / 2f);
  page.setScaleX((float) Math.pow(0.9f, position));
  page.setScaleY((float) Math.pow(0.9f, position));
  //      
  page.setTranslationY(-page.getHeight() * position + (page.getHeight() * 0.5f) * (1 - (float) Math.pow(0.9f, position)) + ScreenUtils.dp2px(context, 10));
 }

이때 효과 그림 은 다음 과 같 습 니 다.

카드 가 반투명 일 때 효과 가 그리 뚜렷 하지 않 습 니 다.page.setAlpha(0.5f)를 page.setAlpha(1.0f)로 바 꾸 고 다시 시도 하 십시오.

놀 라 운 발견 은 이것 이 바로 카드 중첩 효과 가 아 닙 니까?비록 현재 의 효과 디 테 일 에 문제 가 있 지만 우 리 는 급 하지 않 습 니 다.이 디 테 일 문 제 를 간단하게 분석 하면 우리 의 크기 조정 비례 문제 로 인 한 것 이 라 고 생각 할 수 있 습 니 다.다음 단계 의 최적화 를 계속 하면 우 리 는 이 문 제 를 해결 할 것 입 니 다.
세 번 째 단 계 는 인접 카드 의 간격 값 에 따라 동적 으로 크기 조정 값 을 설정 합 니 다.
위의 onTransform(View page,float position)방법 에서 우리 의 x,y 크기 조정 비율 은 모두 고정된 값 0.9f 라 고 쓰 여 있 습 니 다.이것 은 일상적인 수 요 를 만족 시 키 지 못 합 니 다.저 는 상하 두 장의 카드 의 너비 비 교 를 설정 하여 최종 적 으로 원 하 는 크기 조정 비율 로 onTransform(View page,float position)을 수정 하 는 방법 은 다음 과 같 습 니 다.

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform", "position ==>" + position);
  float scale = (float) (page.getWidth() - ScreenUtils.dp2px(context, 20 * position)) / (float) (page.getWidth());
  page.setAlpha(1.0f);
  page.setPivotX(page.getWidth() / 2f);
  page.setPivotY(page.getHeight() / 2f);
  page.setScaleX(scale);
  page.setScaleY(scale);
  //      
  page.setTranslationY(-page.getHeight() * position + (page.getHeight() * 0.5f) * (1 - scale) + ScreenUtils.dp2px(context, 10) * position);
 }

프로그램 을 한 번 더 뛰 면 완벽 한 카드 효과 가 나타난다.

네 번 째 단 계 는 일반 까지 특수 하여 최종 카드 슬라이딩 효 과 를 실현 한다.
이때 우 리 는 Viewpager 를 미 끄 러 뜨 려 보 았 는데 카드 의 전환 효과 가 예정대로 나타 나 지 않 았 다 는 것 을 알 게 되 었 다.여러 번 의 시도 와 분석 을 통 해 나 는 우리 가 현재 미 끄 러 진 카드 에 대해 특별한 처 리 를 하지 않 았 기 때문에 이곳 의 특수 처 리 는 카드 의 추출 전환 효 과 를 실현 하기 위해현재 미 끄 러 진 카드 는 크기 조정 과 오프셋 작업 을 하지 않 고 page.setTranslationY(0f)로 변경 해 야 합 니 다.구체 적 인 코드 는 다음 과 같다.
여기에 블 로그 한 편 을 열거 합 니 다.http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0814/1650.html그 는 주로 onTransform(View page,float position)에서 position 에 대한 이 해 를 말 했다.   

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform", "position ==>" + position);
  if (position <= 0.0f) {
   page.setAlpha(1.0f);
   //             
   page.setTranslationY(0f);
  } else {
   float scale = (float) (page.getWidth() - ScreenUtils.dp2px(context, 20 * position)) / (float) (page.getWidth());
   page.setAlpha(1.0f);
   page.setPivotX(page.getWidth() / 2f);
   page.setPivotY(page.getHeight() / 2f);
   page.setScaleX(scale);
   page.setScaleY(scale);
   //      
   page.setTranslationY(-page.getHeight() * position + (page.getHeight() * 0.5f) * (1 - scale) + ScreenUtils.dp2px(context, 10) * position);
  }
 }

이로써 문장 첫머리 의 애니메이션 효 과 를 실현 할 수 있 게 되 었 다.돌 이 켜 보면 우 리 는 특수 한 상황 을 바탕 으로 코드 를 쓰 고 있 었 다.마지막 으로 그 가 모든 일반적인 상황 중의 하나 라 는 것 을 알 게 되 었 다.다만 특수 한 상황 은 그의 특수성 으로 인해 분석 하고 정리 하기 쉬 워 서 우리 가 알 기 쉬 운 코드 를 만 드 는 데 유리 하 다.
마지막 으로 보충 하면 실제 프로젝트 에서 모든 카드 에 클릭 구역 이 있 을 수 있 고 전체 카드 가 하나의 클릭 구역 일 수도 있 습 니 다.이때 문 제 를 발견 할 수 있 습 니 다.이런 상황 에 처 했 을 때:
나 는 카드 1 뿐만 아니 라 카드 2,카드 3 도 주문 할 수 있다.이렇게 하면 안 될 것 입 니 다.그래서 우 리 는 다시 onTransform(View page,float position)방법 으로 돌아 가 제어 하 나 를 추가 합 니 다.

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform", "position ==>" + position);
  if (position <= 0.0f) {
   //          
   page.setClickable(true);
   .......
  } else {
   //         
   page.setClickable(false);
   ........
  }
 }

또한 우 리 는 4 장의 카드 가 겹 치 는 효과 만 있 으 면 될 수 있 습 니 다.이 럴 때 판단 조건 을 바 꾸 면 됩 니 다.

 @Override
 protected void onTransform(View page, float position) {
  Log.e("onTransform", "position ==>" + position);
  if (position <= 0.0f) {
   ......
  //        
  } else if(position <= 3.0f) {
   ......
  }
 }

이로써 이 글 은 곧 끝 날 것 입 니 다.이것 은 제 정리 입 니 다.여러분 들 이 onTransform(View page,float position)방법 에 대해 더욱 깊이 이해 할 수 있 도록 도와 주 셨 으 면 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.