Android ViewPager酷炫的卡片滑動效果
阿新 • • 發佈:2019-01-27
一、效果圖
二、實現程式碼
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>
三、原始碼下載