Home

Awesome

Android Arsenal

PageFlip

This project is aimed to implement 3D style page flip on Android system based on OpenGL 2.0.

For JNI version, please visit: android-PageFlip-JNI

Table of Contents

Preview

SinglePage DoublePages

Installation

Gradle

Add it to your build.gradle with:

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

and:

dependencies {
    compile 'com.github.eschao:android-PageFlip:1.0.2'
}

Android Version Support

The following versions have been tested on emulator:

Android versionAPI versionSupport
3.2API 13x
4.1API 16√
4.2API 17√
4.3API 18√
4.4API 19√
5.0API 21√
5.1API 22√
6.0API 23√
7.0API 24√
7.1.1API 25√
7.+API 26√

Usage

I. Simple steps for introducing PageFlip into your project

More details, please take a look PageFlipView in sample application.

II. Configure PageFlip

PageFlip library provides some configurations for customizing its behaviors. For example: shadow color and alpha, mesh pixels and page mode.

1. Page Mode

There are two page modes provided by PageFlip:

You can use enableAutoPage to enable auto page mode or disable it(equally enable single page mode).

Example:

  // enable auto page mode
  mPageFlip.enableAutopage(true);

2. Click screen to flip

You can enable/disable clicking screen to flip

Example:

  // enable clicking to flip
  mPageFlip.enableClickToFlip(true);

3. Area of clicking to flip

You can give a ratio of page width from 0 to 0.5f to set an area for reponsing click event to trigger a page flip. The default value is 0.5f, which means the backfward flip will happen if you click the left half of screen and forward flip will start if you click the right half of screen in single page mode.

Example:

  // set ratio with 0.3
  mPageFlip.setWidthRatioOfClickToFlip(0.3f);

4. PageFlip listener

You can set a listener to tell PageFlip if the forward flip or backward flip could happen.

Example:

  mPageFlip.setListener(mListener);

5. Mesh pixels

Set how many pixels are used for a mesh. The less pxiels the mesh uses, the more fine the drawing is and the lower the performance is. The default value is 10 pixels.

Example:

  mPageFlip.setPixelsOfMesh(5);

6. Ratio of semi-peremeter

When page is curled, it is actually tackled as a semi-cylinder by PageFlip. You can set size of the semi-cylinder to change the flip shap. Since the semi-cylinder dependeds on the line length from the touch point to original point(see the below illustration), you need to provide a ratio of this line length to tell PageFlip the peremeter of the semi-cylinder. The default value is 0.8f.

  +----------------+
  |   touchP       |
  |       .        | 
  |        \       |
  |         + p0   |
  |          \     |
  |           \    |
  |        p1  +   |
  |              \ |
  +----------------+
              original point, that means you drag the page from here to touch point(touchP)

  The length from p0 to p1 is peremeter of semi-cylinder and determined by ratio your giving

Example:

  mPageFlip.setSemiPerimeterRatio(0.6f);

7. Mask alpha for the back of fold page

You can set the mask alpha for the back of fold page when page is curled in single page mode. The default value is 0.6f.

Example:

  mPageFlip.setMaskAlphaOfFold(0.5f);

8. Edge shadow color/alpha of fold page

You can set start/end color and start/end alpha for edge shadow of fold page.

Example:

  // set start color with 0.1f, start alpha with 0.2f, end color with 0.5f
  // and end alpha with 1f
  mPageFlip.setShadowColorOfFoldBase(0.1f, 0.2f, 0.5f, 1f);

9. Base shadow color/alpha of fold page

You can set start/end color and start/end alpha for base shadow of fold page.

Example:

  mPageFlip.setShadowColorOfFoldBase(0.05f, 0.2f, 0.5f, 1f);

10. Edge shadow width of fold page

When page is curled, the size of fold page will follow the finger movement to be changed and its edge shadow width should be changed accordingly. You can set an appropriate width range for shadow width.

Example:

  // set the minimal width is 5 pixels and maximum width is 40 pixels.
  // set the ratio is 0.3f which means the width will be firstly computed by formula: 
  // width = diameter of semi-cylinder * 0.3f, and then compare it with minimal
  // and maximal value to make sure the width is in range.
  mPageFlip.setShadowWidthOfFoldEdges(5, 40, 0.3f);

11. Base shadow width of fold page

Like Edge shadow width of fold page, You can set an appropriate width range for base shadow of fold page.

Example:

  // see {@link #setShadowWidthOfFoldEdges} function
  mPageFlip.setShadowWidthOfFoldBase(5, 40, 0.4f);

12. Duration of flip animating

You can give a duration for flip animating when you call onFingerUp function to handle the finger up event.

Example:

  // the last parameter is duration with millisecond unit, here we set it with 2 seconds.
  mPageFlip.onFingerUp(x, y, 2000);

License

This project is licensed under the Apache License Version 2.0.