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.5'
}

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.isExpanding();

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.5'
}

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
  • Use mVPLayout.onDestroy(); to release source
  • See DemoProject for more details

Attrs:

<declare-styleable name="attr_layout">
    <!-- The duration of Page switching animation, default 300ms -->
    <attr name="switchAnimTime" format="integer" />
</declare-styleable>

Java Code:

	mVPLayout.setImageProvider(imageProvider);
	
	mVPLayout.setAnimMode(animMode);
	
	mVPLayout.setSwitchAnimTime(time);
	
	//maxSize = Runtime.getRuntime().maxMemory();
	//default: maxSize / 5
	//min: maxSize / 8
	mVPLayout.setCacheSize(megabytes);
	
	mVPLayout.onDestroy();
AnimMode Des
DefaultAnimMode No Effect
BlurAnimMode Blur Effect
MoveAnimMode Parallax Effect
ScaleAnimMode Scale Effect
CrossMoveAnimMode Cross 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

If you choose BlurAnimMode, you can enable RenderScript for a high performance.

Open the build.gradle file in the app folder of your application module.
Add the following RenderScript settings to the file:

  android {
  	compileSdkVersion 23
  	buildToolsVersion "23.0.3"

  defaultConfig {
      minSdkVersion 9
      targetSdkVersion 19

  	//Enable RenderScript
      renderscriptTargetApi 23
      renderscriptSupportModeEnabled true
  	}
  }

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