3D Style PageFlip


Source link: https://github.com/eschao/android-PageFlip

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

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 version API version Support
3.2 API 13 x
4.1 API 16
4.2 API 17
4.3 API 18
4.4 API 19
5.0 API 21
5.1 API 22
6.0 API 23
7.0 API 24
7.1.1 API 25
7.+ API 26

Usage

I. Simple steps for introducing PageFlip into your project

  • Creates a surface view class extending from GLSurfaceView

  • Implements android Renderer interface to draw your content on a bitmap and set it as a texture of PageFlip

  • Instanitiates a PageFlip object in the constructor of your surface view

  • Configures PageFlip, For example: set animating duration, page mode or mesh pixels

  • Handles the below android events:

    • onFingerDown: notify PageFlip object to prepare flip
    • onFingerMove: notify PageFlip object to compute data for drawing flip frame
    • onFingerUp: notify PageFlip object to determine whether or not launching a flip animation
    • onSurfaceCreated: notify PageFlip object to handle usreface creating event
    • onSurfaceChanged: notify PageFlip object to handle surface changing event
  • You may need a message handler to send/receive an drawing message. Please refer to PageFlipView in sample application.

  • You may need a lock to avoid conflicts between main thread and OpenGL rendering thread. Please refer to PageFlipView in sample application.

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:

  • Auto Page Mode: In this mode, PageFlip will automatically decide to use single page or double pages to present content on screen. That means single page is used for portrait mode and double pages is used for lanscape mode.
  • Single Page Mode: No matter screen is portait or landscape mode, PageFlip always use single page to show content

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.

Resources

Skeleton Loading View on Kotlin.

A simple animation wrapper. Animate views without the boring boilerplate code.

PinCodeView is Android UI library for replace EditText's PIN input with pretty customizable view.

Android library with collection of some smart toasts designs which will help in situations of following:

  • Completion of some work
  • Errors & Warnings
  • Connection Established
  • Update Status

Advancement Utils for Android Developer with 100% interoperable with Java, written by Kotlin. RichUtils help Android developer to make better application with clean code.

Enhanced Pull-To-Action layout.

Features

  • Pull gesture in UP, DOWN or BOTH directions
  • Scroll thresholding. Bound views are snapped to anchor position if scroll over threshold else are reset to default position
  • Bind views for animating (alpha and translation for now) them in respect to scroll

Topics


2D Engines   3D Engines   9-Patch   Action Bars   Activities   ADB   Advertisements   Analytics   Animations   ANR   AOP   API   APK   APT   Architecture   Audio   Autocomplete   Background Processing   Backward Compatibility   Badges   Bar Codes   Benchmarking   Bitmaps   Bluetooth   Blur Effects   Bread Crumbs   BRMS   Browser Extensions   Build Systems   Bundles   Buttons   Caching   Camera   Canvas   Cards   Carousels   Changelog   Checkboxes   Cloud Storages   Color Analysis   Color Pickers   Colors   Comet/Push   Compass Sensors   Conferences   Content Providers   Continuous Integration   Crash Reports   Credit Cards   Credits   CSV   Curl/Flip   Data Binding   Data Generators   Data Structures   Database   Database Browsers   Date &   Debugging   Decompilers   Deep Links   Dependency Injections   Design   Design Patterns   Dex   Dialogs   Distributed Computing   Distribution Platforms   Download Managers   Drawables   Emoji   Emulators   EPUB   Equalizers &   Event Buses   Exception Handling   Face Recognition   Feedback &   File System   File/Directory   Fingerprint   Floating Action   Fonts   Forms   Fragments   FRP   FSM   Functional Programming   Gamepads   Games   Geocaching   Gestures   GIF   Glow Pad   Gradle Plugins   Graphics   Grid Views   Highlighting   HTML   HTTP Mocking   Icons   IDE   IDE Plugins   Image Croppers   Image Loaders   Image Pickers   Image Processing   Image Views   Instrumentation   Intents   Job Schedulers   JSON   Keyboard   Kotlin   Layouts   Library Demos   List View   List Views   Localization   Location   Lock Patterns   Logcat   Logging   Mails   Maps   Markdown   Mathematics   Maven Plugins   MBaaS   Media   Menus   Messaging   MIME   Mobile Web   Native Image   Navigation   NDK   Networking   NFC   NoSQL   Number Pickers   OAuth   Object Mocking   OCR Engines   OpenGL   ORM   Other Pickers   Parallax List   Parcelables   Particle Systems   Password Inputs   PDF   Permissions   Physics Engines   Platforms   Plugin Frameworks   Preferences   Progress Indicators   ProGuard   Properties   Protocol Buffer   Pull To   Purchases   Push/Pull   QR Codes   Quick Return   Radio Buttons   Range Bars   Ratings   Recycler Views   Resources   REST   Ripple Effects   RSS   Screenshots   Scripting   Scroll Views   SDK   Search Inputs   Security   Sensors   Services   Showcase Views   Signatures   Sliding Panels   Snackbars   SOAP   Social Networks   Spannable   Spinners   Splash Screens   SSH   Static Analysis   Status Bars   Styling   SVG   System   Tags   Task Managers   TDD &   Template Engines   Testing   Testing Tools   Text Formatting   Text Views   Text Watchers   Text-to   Toasts   Toolkits For   Tools   Tooltips   Trainings   TV   Twitter   Updaters   USB   User Stories   Utils   Validation   Video   View Adapters   View Pagers   Views   Watch Face   Wearable Data   Wearables   Weather   Web Tools   Web Views   WebRTC   WebSockets   Wheel Widgets   Wi-Fi   Widgets   Windows   Wizards   XML   XMPP   YAML   ZIP Codes