Skip to content

🍭A custom ViewPager for multiple card flow system. && A layout which provide beautiful background effects for ViewPager.

License

Notifications You must be signed in to change notification settings

codeestX/ECardFlow

Repository files navigation

#ECardFlow

ECardFlow, A custom ViewPager for multiple card flow system.designed by Leo Leung
ECardFlow, 一个用于复数卡片滑动与展开效果的ViewPager控件,设计原型出自Leo Leung

ECardFlowLayout, A layout provide beautiful background effect for ViewPager.
ECardFlowLayout, 一个为ViewPager提供多种联动背景效果的布局

#Preview ECardFlow:

ECardFlowLayout:

#Usage(ECardFlow)

Step 1. Add the JitPack repository to your build file

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

Step 2. Add the dependency

dependencies {
        compile 'com.github.codeestX:ECardFlow:v1.0.2'
}

Step 3. Just use it as a ViewPager

<moe.codeest.ecardflow.ECardFlow
        android:id="@+id/ecardflow"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        app:expandMode="slide_up"
        app:expandTime="700"
        app:switchTime="1200"
        app:preloadPageNum="3"
        app:maxRotateY="5">
  • Only support fragment as each page
  • For best performance, giving ECardFlow's parent view an attrandroid:clipChildren="false",and do NOT set ECardFlow's width asmatch_parent
  • See DemoProject for more details

Attrs:

<declare-styleable name="attr">
    <!-- Page switching time, default 1200ms -->
    <attr name="switchTime" format="integer" />

    <!-- Page expanding time, default 700ms -->
    <attr name="expandTime" format="integer" />

    <!-- Page expanding mode, click or slide up to expand, default slide_up -->
    <attr name="expandMode">
        <enum name="slide_up" value="10" />
        <enum name="click" value="11" />
    </attr>

    <!-- The number of pages outside the screen, default 3 -->
    <attr name="preloadPageNum" format="integer" />

    <!-- The shortest sliding distance to trigger the switch, default context.getScaledTouchSlop() -->
    <attr name="touchSlop" format="integer" />

    <!-- The maximum angle of rotation, default 5 -->
    <attr name="maxRotateY" format="integer" />
</declare-styleable>

Java Code:

mEcardflow.gotoNext();

mEcardflow.gotoLast();

mEcardflow.expand();

mEcardflow.shrink();

mEcardflow.setTouchSlop(slop);

mEcardflow.setExpandTime(time);

mEcardflow.setOnExpandStateListener(new ECardFlow.OnExpandStateListener() {
            @Override
            public void onExpand(View page, int position) {
           
            }

            @Override
            public void onShrink(View page, int position) {
          
            }
        });

#Usage(ECardFlowLayout) Step 1. Add the JitPack repository to your build file

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

Step 2. Add the dependency

dependencies {
        compile 'com.github.codeestX:ECardFlow:v1.0.2'
}

Step 3. Just put a ViewPager in ECardFlowLayout

<moe.codeest.ecardflow.ECardFlowLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ecardflow_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="240dp"
        android:layout_height="270dp"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="80dp"/>
</moe.codeest.ecardflow.ECardFlowLayout>

Step 4. setAnimMode & setImageProvider

mVPLayout = (ECardFlowLayout) findViewById(R.id.ecardflow_layout);
mVPLayout.setAnimMode(new BlurAnimMode());
mVPLayout.setImageProvider(new DrawableImageProvider(this, res, width, height);
  • Set AnimMode before Set ImageProvider
  • See DemoProject for more details
  • Use mVPLayout.onDestroy(); to release source

Attrs:

<declare-styleable name="attr_layout">
    <!-- The duration of Page switching animation, default 300ms -->
    <attr name="switchAnimTime" format="integer" />
</declare-styleable>
AnimMode Des
DefaultAnimMode No Effect
BlurAnimMode Blur Effect
MoveAnimMode Parallax Effect
You can custom AnimMode with class which implements AnimMode
ImageProvider Des
DrawableImageProvider Prividing resId(R.drawable/mipmap.xx) as image resource
PathImageProvider Prividing file path as image resource
FileImageProvider Prividing File as image resource
You can custom ImageProvider with class which implements ImageProvider

#License

  MIT Copyright (c) 2017 codeestX

About

🍭A custom ViewPager for multiple card flow system. && A layout which provide beautiful background effects for ViewPager.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages