ViewPager層疊卡片效果

層疊片卡效果

說明

GitHub位址：StackCardView

通過設定 ViewPager 的 PageTransformer 實作卡片層疊效果，支援左層疊和右層疊兩種效果

添加依賴

1、 主工程 build.gradle 添加倉庫位址:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
           

2、 app項目工程 build.gradle 添加依賴:

dependencies {
    implementation 'com.github.yeaper:StackCardView:1.0.0'
}
           

用法

以左層疊效果為例

1、 控件使用 ViewPager

2、 卡片使用 Fragment，布局示例如下：

主要是 CardView 的屬性 android:layout_gravity 設定為 right，居右；右層疊反之

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".fragment.CardRightFragment">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="right">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/news_img1"
                android:scaleType="centerCrop"/>

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="21sp"
                android:padding="5dp"/>

            <TextView
                android:id="@+id/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                android:lineSpacingMultiplier="1.2"
                android:padding="5dp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="5dp"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="10dp">
                <TextView
                    android:id="@+id/column"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:textColor="@color/red"/>

                <TextView
                    android:id="@+id/read_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:layout_marginLeft="10dp"/>
            </LinearLayout>

        </LinearLayout>


    </android.support.v7.widget.CardView>
</LinearLayout>
           

3、 自定義 ViewPager 的擴充卡，繼承 StackCardAdapter，示例如下：

隻需要處理 getItem() 的邏輯

public class StackCardLeftAdapter extends StackCardAdapter<NewsBean> {

    public StackCardLeftAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        if(getList() == null){
            return CardLeftFragment.getInstance(null);
        }else{
            return CardLeftFragment.getInstance(getList().get(i));
        }
    }
}
           

4、 為 ViewPager 設定 PageTransFormer，這裡使用StackCardPageTransformer，示例如下：

stackCardViewPager.setPageTransformer(true, StackCardPageTransformer.getBuild()
                .setViewType(PageTransformerConfig.LEFT) //層疊方向
                .setTranslationOffset(DensityUtils.dp2px(this, 50f)) //左右位置偏移量
                .setScaleOffset(DensityUtils.dp2px(this, 50f)) //縮放偏移量
                .setAlphaOffset(0.5f) //卡片透明度偏移量
                .setMaxShowPage(3) //最大顯示的頁數
                .create(stackCardViewPager));
           

參數說明：

參數	類型	描述
viewType	int	卡片層疊方向：左、右
translationOffset	float	卡片向左/右的偏移量，機關用px
scaleOffset	float	卡片的縮放偏移量，機關用px
alphaOffset	float	底下的卡片相對于上一層卡片的透明度
maxShowPage	int	最多顯示的卡片個數

5、 加載資料

左層疊效果：需要将資料倒序排列，并将 ViewPager 定位到最後一張卡片

stackCardLeftAdapter.setList(list, true); //資料倒序排列
stackCardViewPager.setCurrentItem(list.size()-1, false); //定位到最後一張卡片
           

右層疊效果：資料順序排列