Android CardView+ViewPager ViewPager 페이지 넘 기기 애니메이션 구현 방법

Viewpager 는 쉽게 말 하면 데 이 터 를 좌우 로 뒤 집 을 수 있 는 페이지 의 레이아웃 관리자 로 Fragment 를 연결 하 는 데 자주 사용 되 며 각 페이지 의 수명 주 기 를 편리 하 게 관리 할 수 있 습 니 다.Viewpager 관리 Fragment 를 사용 하 는 것 은 표준 어댑터 입 니 다.가장 많이 사용 되 는 실현 은 일반적으로 Fragment Pager Adapter 와 Fragment State Pager Adapter 가 있 습 니 다.자전거 바 이 두 의 용법.오늘 우리 가 실현 해 야 할 것 은 다음 과 같은 효과 이다.
NO PICTURE TALK A JB

그림 의 효 과 를 실현 하려 면 다음 과 같은 몇 가지 지식 이 필요 하 다.
1.clipChildren 속성
2.한 페이지 에 여러 ViewPager 의 Item 표시
3.사용자 정의 PagerTransformer
4.ViewPager 결합 CardView
1.clipChildren 속성
클립 children:하위 View 를 그 범위 내 에서 제한 할 지 여부 입 니 다.우리 가 그 값 을 false 로 설정 하면 하위 컨트롤 의 높이 가 부모 컨트롤 보다 높 을 때 도 압축 되 지 않 고 완전히 표 시 됩 니 다.(위 중간 단 추 는 위의 그림자 선 을 초과 하여 정상적으로 표시 할 수 있 습 니 다)기본 값 은 true 입 니 다.

이 속성 을 알 게 되면 한 페이지 에 여러 개의 Viewpager 아 이 템 을 표시 할 수 있 습 니 다.
2.한 페이지 에 여러 ViewPager 의 Item 표시
xml 레이아웃 파일 에 직접 설정:android:clipToPadding="false"

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/background">
  <!--1.       viewPager-->
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:clipToPadding="false"
    android:paddingEnd="48dp"
    android:paddingLeft="48dp"
    android:paddingRight="48dp"
    android:paddingStart="48dp" />
  <RelativeLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true">
    <ImageView
      android:id="@+id/img_like"
      android:layout_width="38dp"
      android:layout_height="38dp"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:src="@drawable/icon2" />
  </RelativeLayout>
  <TextView
    android:id="@+id/indicator_tv"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_above="@+id/bottom_layout"
    android:layout_centerHorizontal="true"
    android:gravity="center_vertical"
    android:text="1/199"
    android:textColor="#ffffff"
    android:textSize="16sp" />
  <!--4.    titleBar-->
  <LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!--   activity，  view      -->
    <View
      android:id="@+id/position_view"
      android:layout_width="1px"
      android:layout_height="1px" />
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      android:orientation="horizontal">
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="    "
        android:textColor="#ffffff"
        android:textSize="16sp" />
    </RelativeLayout>
  </LinearLayout>
</RelativeLayout>

3.사용자 정의 ViewPager 페이지 넘 기기 애니메이션
직접 코드

public class CustPagerTransformer implements ViewPager.PageTransformer {
  private int maxTranslateOffsetX;
  private ViewPager viewPager;
  public CustPagerTransformer(Context context) {
    this.maxTranslateOffsetX = dp2px(context, 180);
  }
  public void transformPage(View view, float position) {
    if (viewPager == null) {
      viewPager = (ViewPager) view.getParent();
    }
    int leftInScreen = view.getLeft() - viewPager.getScrollX();
    int centerXInViewPager = leftInScreen + view.getMeasuredWidth() / 2;
    int offsetX = centerXInViewPager - viewPager.getMeasuredWidth() / 2;
    float offsetRate = (float) offsetX * 0.38f / viewPager.getMeasuredWidth();
    float scaleFactor = 1 - Math.abs(offsetRate);
    if (scaleFactor > 0) {
      view.setScaleX(scaleFactor);
      view.setScaleY(scaleFactor);
      view.setTranslationX(-maxTranslateOffsetX * offsetRate);
    }
  }
  /**
   * dp     
   */
  private int dp2px(Context context, float dipValue) {
    float m = context.getResources().getDisplayMetrics().density;
    return (int) (dipValue * m + 0.5f);
  }
}

사용 방법

// 1. viewPager  parallax  ，  PageTransformer    
   viewPager.setPageTransformer(false, new CustPagerTransformer(this));

4.CardView 와 Viewpager 의 공동 사용
viewpager 의 아 이 템 레이아웃 을 먼저 봅 니 다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <cn.yznu.gdmapoperate.ui.widget.AspectRatioCardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="6dp"
    app:cardMaxElevation="6dp">
    <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      android:background="@drawable/bg_map"
      android:contentDescription="@string/app_name"
      android:scaleType="centerCrop" />
    <ImageView
      android:id="@+id/image"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:contentDescription="@string/app_name"
      android:scaleType="centerCrop"
      android:src="@drawable/map" />
    <TextView
      android:id="@+id/txt_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true"
      android:layout_gravity="bottom|center"
      android:padding="5dp"
      android:text="@string/app_name"
      android:textColor="#12edf0"
      android:textSize="15sp" />
  </cn.yznu.gdmapoperate.ui.widget.AspectRatioCardView>
</FrameLayout>

ViewPager 를 사용 하여 Fragment 를 관리 하 는 것 은 표준 어댑터 로 이 루어 지기 때문에 이 xml 를 fragment 의 레이아웃 으로 하면 됩 니 다.이렇게 간단 합 니 다.
빨 갛 고 불 이 흐리멍덩 하고 완 성 된 것 같 아 요.이렇게 간단 해 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.