Android ViewPager酷炫的卡片滑动效果

一、效果图

二、实现代码

MainActivity.java

package com.github.rubensousa.viewpagercards;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity{    private ViewPager mViewPager;    private CardPagerAdapter mCardAdapter;    private ShadowTransformer mCardShadowTransformer;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.viewPager);        mCardAdapter = new CardPagerAdapter();        mCardAdapter.addCardItem(new CardItem(R.string.title_1, R.string.text_1));        mCardAdapter.addCardItem(new CardItem(R.string.title_2, R.string.text_1));        mCardAdapter.addCardItem(new CardItem(R.string.title_3, R.string.text_1));        mCardAdapter.addCardItem(new CardItem(R.string.title_4, R.string.text_1));        mCardShadowTransformer = new ShadowTransformer(mViewPager, mCardAdapter);        mCardShadowTransformer.enableScaling(true);        mViewPager.setAdapter(mCardAdapter);        mViewPager.setPageTransformer(false, mCardShadowTransformer);        mViewPager.setOffscreenPageLimit(3);    }}

CardAdapter.java

package com.github.rubensousa.viewpagercards;import android.support.v7.widget.CardView;public interface CardAdapter {    int MAX_ELEVATION_FACTOR = 8;    float getBaseElevation();    CardView getCardViewAt(int position);    int getCount();}

CardItem.java

package com.github.rubensousa.viewpagercards;public class CardItem {    private int mTextResource;    private int mTitleResource;    public CardItem(int title, int text) {        mTitleResource = title;        mTextResource = text;    }    public int getText() {        return mTextResource;    }    public int getTitle() {        return mTitleResource;    }}

CardPagerAdapter .java

package com.github.rubensousa.viewpagercards;import android.support.v4.view.PagerAdapter;import android.support.v7.widget.CardView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class CardPagerAdapter extends PagerAdapter implements CardAdapter {    private List<CardView> mViews;    private List<CardItem> mData;    private float mBaseElevation;    public CardPagerAdapter() {        mData = new ArrayList<>();        mViews = new ArrayList<>();    }    public void addCardItem(CardItem item) {        mViews.add(null);        mData.add(item);    }    public float getBaseElevation() {        return mBaseElevation;    }    @Override    public CardView getCardViewAt(int position) {        return mViews.get(position);    }    @Override    public int getCount() {        return mData.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = LayoutInflater.from(container.getContext())                .inflate(R.layout.adapter, container, false);        container.addView(view);        bind(mData.get(position), view);        CardView cardView = (CardView) view.findViewById(R.id.cardView);        if (mBaseElevation == 0) {            mBaseElevation = cardView.getCardElevation();        }        cardView.setMaxCardElevation(mBaseElevation * MAX_ELEVATION_FACTOR);        mViews.set(position, cardView);        return view;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View) object);        mViews.set(position, null);    }    private void bind(CardItem item, View view) {        TextView titleTextView = (TextView) view.findViewById(R.id.titleTextView);        TextView contentTextView = (TextView) view.findViewById(R.id.contentTextView);        titleTextView.setText(item.getTitle());        contentTextView.setText(item.getText());    }}

ShadowTransformer.java

package com.github.rubensousa.viewpagercards;import android.support.v4.view.ViewPager;import android.support.v7.widget.CardView;import android.view.View;public class ShadowTransformer implements ViewPager.OnPageChangeListener, ViewPager.PageTransformer {    private ViewPager mViewPager;    private CardAdapter mAdapter;    private float mLastOffset;    private boolean mScalingEnabled;    public ShadowTransformer(ViewPager viewPager, CardAdapter adapter) {        mViewPager = viewPager;        viewPager.addOnPageChangeListener(this);        mAdapter = adapter;    }    public void enableScaling(boolean enable) {        if (mScalingEnabled && !enable) {            // shrink main card            CardView currentCard = mAdapter.getCardViewAt(mViewPager.getCurrentItem());            if (currentCard != null) {                currentCard.animate().scaleY(1);                currentCard.animate().scaleX(1);            }        }else if(!mScalingEnabled && enable){            // grow main card            CardView currentCard = mAdapter.getCardViewAt(mViewPager.getCurrentItem());            if (currentCard != null) {                currentCard.animate().scaleY(1.1f);                currentCard.animate().scaleX(1.1f);            }        }        mScalingEnabled = enable;    }    @Override    public void transformPage(View page, float position) {    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        int realCurrentPosition;        int nextPosition;        float baseElevation = mAdapter.getBaseElevation();        float realOffset;        boolean goingLeft = mLastOffset > positionOffset;        // If we're going backwards, onPageScrolled receives the last position        // instead of the current one        if (goingLeft) {            realCurrentPosition = position + 1;            nextPosition = position;            realOffset = 1 - positionOffset;        } else {            nextPosition = position + 1;            realCurrentPosition = position;            realOffset = positionOffset;        }        // Avoid crash on overscroll        if (nextPosition > mAdapter.getCount() - 1                || realCurrentPosition > mAdapter.getCount() - 1) {            return;        }        CardView currentCard = mAdapter.getCardViewAt(realCurrentPosition);        // This might be null if a fragment is being used        // and the views weren't created yet        if (currentCard != null) {            if (mScalingEnabled) {                currentCard.setScaleX((float) (1 + 0.1 * (1 - realOffset)));                currentCard.setScaleY((float) (1 + 0.1 * (1 - realOffset)));            }            currentCard.setCardElevation((baseElevation + baseElevation                    * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (1 - realOffset)));        }        CardView nextCard = mAdapter.getCardViewAt(nextPosition);        // We might be scrolling fast enough so that the next (or previous) card        // was already destroyed or a fragment might not have been created yet        if (nextCard != null) {            if (mScalingEnabled) {                nextCard.setScaleX((float) (1 + 0.1 * (realOffset)));                nextCard.setScaleY((float) (1 + 0.1 * (realOffset)));            }            nextCard.setCardElevation((baseElevation + baseElevation                    * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (realOffset)));        }        mLastOffset = positionOffset;    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {    }}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="430dp"        android:clipToPadding="false"        android:overScrollMode="never"        android:paddingBottom="30dp"        android:paddingEnd="@dimen/card_padding"        android:paddingLeft="@dimen/card_padding"        android:paddingRight="@dimen/card_padding"        android:paddingStart="@dimen/card_padding" /></android.support.design.widget.CoordinatorLayout>

adapter.xml:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cardView"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_gravity="center"    app:cardUseCompatPadding="true">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:orientation="vertical"            android:padding="24dp">            <TextView                android:id="@+id/titleTextView"                style="@style/TextAppearance.AppCompat.Title"                android:layout_width="wrap_content"                android:layout_height="wrap_content" />            <TextView                android:id="@+id/contentTextView"                style="@style/TextAppearance.AppCompat.Body1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="24dp"/>            <Button                style="@style/ButtonStyle"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="24dp"                android:text="Button" />        </LinearLayout>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="top|end"            android:layout_marginEnd="8dp"            android:layout_marginRight="8dp"            android:layout_marginTop="-5dp"            android:src="@drawable/ic_bookmark_24dp" />    </FrameLayout></android.support.v7.widget.CardView>

三、源码下载

https://github.com/rubensousa/ViewPagerCards